javascript - Mediarecorder : How to support audio recording on Safari, IE 11？

Question

问题陈述
您好，我想使用 MediaRecorder 添加对录音的支持我的应用程序中用于 的 API IE 11 和 Safari ，但到目前为止什么都想不通。有没有填充物 可以帮助我在这些浏览器中添加对相同的支持吗？
苹果浏览器:
我可以看到 Safari 有MediaRecorder 下支持的 API实验 功能，但即使给出了正确的 MIME 类型 audio/webm 似乎也不能正常工作，它总是返回 video/mp4 的 blob mime 类型。
即 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 支持:
我能够添加对 MediaRecorder 的支持 中的 API Safari 通过使用 录音机 Polyfill .你可以查看这个 NPM 包 here .
步骤( react JS):

使用 npm i audio-recorder-polyfill 安装软件包

将这段代码添加到 公共(public)/index.html .这将确保仅为不支持 MediaRecorder 的浏览器加载 polyfill。 API。

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

将这段代码添加到 src/index.tsx 或 src/index.js .这会将这个 polyfill 分配给 媒体记录器 出现在 窗口目的。

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

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

declare module 'audio-recorder-polyfill'