【问题标题】：Mediarecorder: How to support audio recording on Safari, IE 11?Mediarecorder：如何在 Safari、IE 11 上支持录音？
【发布时间】：2020-07-21 14:39:30
【问题描述】：

问题陈述

您好，我想在我的 IE 11 和 Safari 应用程序中使用 MediaRecorder API 添加对音频录制的支持，但目前还想不通。是否有任何可用的 polyfills 可以帮助我在这些浏览器中添加对它们的支持？

Safari：

我可以看到 Safari 确实在 实验性 功能下支持 MediaRecorder API，但即使提供了适当的 mime 类型的 @，即使这样似乎也无法正常工作987654323@，它总是返回一个 video/mp4 mime 类型的 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()

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

【问题讨论】：

标签： javascript html reactjs redux web-mediarecorder

【解决方案1】：

Safari 支持：

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

步骤（React JS）：

使用npm i audio-recorder-polyfill安装包
在 public/index.html 中添加这段代码。这将确保仅为不支持 MediaRecorder API 的浏览器加载 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>

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

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

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

declare module 'audio-recorder-polyfill'

【讨论】：