Mediarecorder：如何在 Safari、IE 11 上支持录音？

Question

问题陈述

嗨，我想MediaRecorder在我的IE 11和Safari应用程序中使用API添加对录音的支持，但到目前为止什么都没有。是否有任何可用的polyfills可以帮助我在这些浏览器中添加对相同内容的支持？

苹果浏览器：

我可以看到Safari确实MediaRecorder在实验性功能下支持 API ，但即使提供了适当的 mime 类型audio/webm，它似乎也不能正常工作，它总是返回一个video/mp4mime 类型的 blob 。

IE 11：

这是一块古老的垃圾，我只能这么说:)

代码：

const stream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: false,
})


const mimeType = 'audio/webm'

// check if above mime type is supported in browser and instantiate recorder
if (MediaRecorder.isTypeSupported(mimeType)) {
  this.recorder = new MediaRecorder(this.stream, { mimeType })
} else {
  this.recorder = new MediaRecorder(this.stream)
}

recorder.start()

注意：请不要要求放弃这些浏览器，因为它们是我的要求:)

Answer 1

Safari 支持：

我能够通过使用Audio Recorder PolyfillMediaRecorder在Safari 中添加对API 的支持。你可以在这里查看这个 NPM 包。

步骤（反应 JS）：

1. 使用安装包 npm i audio-recorder-polyfill
2. 在public/index.html 中添加这段代码。这将确保仅为不支持MediaRecorderAPI的浏览器加载 polyfill 。

<script>
  // load this bundle only for browsers without MediaRecorder support
  if (!window.MediaRecorder) {
    document.write(
      decodeURI('%3Cscript defer src="/polyfill.js">%3C/script>')
    )
  }
</script>

3. 在src/index.tsx或src/index.js 中添加这段代码。这会将这个polyfill分配给window对象中存在的MediaRecorder。

import AudioRecorder from 'audio-recorder-polyfill'
window.MediaRecorder = AudioRecorder

4. 如果您使用的是 Typescript，则可能需要在src/audio-recorder- polyfill.d.ts 中添加类型声明

declare module 'audio-recorder-polyfill'