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

Question

问题陈述

您好，我想在我的 IE 11 和 Safari[=] 应用程序中使用 MediaRecorder API 添加对录音的支持，但到目前为止什么都想不通。是否有可用的 polyfills 可以帮助我在这些浏览器中添加对它们的支持？

野生动物园：

我可以看到 Safari 在 实验性 功能下确实有 MediaRecorder API 支持，但即便如此尽管给出了 audio/webm 的正确 mime 类型，它似乎仍能正常工作，它总是 returns 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()

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

Answer 1

Safari 支持：

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

步骤（React JS）：

使用 npm i audio-recorder-polyfill
在public/index.html中加入这段代码。这将确保只为不支持 MediaRecorder 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 分配给存在于 window 对象中的 MediaRecorder。

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

如果您使用的是 Typescript，您可能需要在 src/audio-recorder-polyfill.d.ts

declare module 'audio-recorder-polyfill'

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

Mediarecorder: How to support audio recording on Safari, IE 11?

html

javascript

reactjs

web-mediarecorder

redux

问题陈述

野生动物园：

IE 11:

代码：

Safari 支持：

步骤（React JS）：