如何使用TypeScript结合extendable-media-recorder将录制文件保存到本地指定路径

根据运行环境不同，对应保存方案如下：

1. 浏览器端运行 #

浏览器受安全沙箱限制，无法绕过用户交互直接写入任意本地路径，可根据需求选择以下两种方案：

• 通用兼容方案：触发下载弹窗由用户选择保存路径
  录制完成拿到Blob对象后，通过创建临时a标签触发下载即可：

  // 假设你已经在录制结束回调中拿到了录制内容的Blob对象recordBlob
  const downloadUrl = URL.createObjectURL(recordBlob)
  const downloadLink = document.createElement('a')
  downloadLink.href = downloadUrl
  // 可自定义默认保存的文件名
  downloadLink.download = `录制文件_${Date.now()}.webm`
  downloadLink.click()
  // 用完释放临时内存
  URL.revokeObjectURL(downloadUrl)
  

• Chromium内核浏览器指定路径方案（需用户授权）
  如果你用的是Chrome、Edge等Chromium内核浏览器，可以用File System Access API实现用户授权后写入指定路径：

  // 录制结束拿到recordBlob后执行
  // 触发用户选择保存的目标路径，拿到文件句柄
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: `录制文件_${Date.now()}.webm`,
    types: [{
      accept: {
        'video/webm': ['.webm'],
        // 如果你录制的是音频，可替换为对应mime类型
        // 'audio/mp3': ['.mp3']
      }
    }]
  })
  // 写入内容到选中的路径文件
  const writableStream = await fileHandle.createWritable()
  await writableStream.write(recordBlob)
  await writableStream.close()
  

2. Node.js/Electron 环境运行 #

如果是在Node.js服务端、或者Electron环境（有权限调用Node.js API）下运行，可以直接通过fs模块写入到任意指定路径：

const fs = require('fs/promises')

// 1. 将录制得到的Blob转为Buffer
const recordBuffer = Buffer.from(await recordBlob.arrayBuffer())
// 2. 填写你要保存的绝对路径
const targetPath = '/Users/xxx/Documents/我的录制.webm'
// 3. 写入文件
await fs.writeFile(targetPath, recordBuffer)

如果是Electron渲染进程未开启Node集成，可以通过IPC把Blob数据传输给主进程，由主进程调用fs模块完成写入即可。

内容的提问来源于stack exchange，提问作者ahii1289