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

user_11220479 0
Viewed 2790

Problem Statement

Hi, I want to add support for audio recording using MediaRecorder API in my app for IE 11 and Safari, but couldn’t figure anything so far. Are there any polyfills available that can help me add support for the same in these browsers?

Safari:

I can see Safari does have MediaRecorder API supported under experimental features, but even that doesn’t seem to work properly despite giving a proper mime type of audio/webm, it always returns a blob of video/mp4 mime type.

IE 11:

It's an ancient piece of rubbish, that's all I can say :)

Code:

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()

NOTE: Please don't ask to ditch these browsers as they are my requirement :)

web-mediarecorder redux reactjs html javascript
1 Answers

Safari Support:

I was able to add support for MediaRecorder API in Safari by using Audio Recorder Polyfill. You can check this NPM package here.

Steps (React JS):

  1. Install the package using npm i audio-recorder-polyfill
  2. Add this piece of code in public/index.html. This will make sure that the polyfill is loaded only for the browsers which do not support 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>
  1. Add this piece of code in src/index.tsx or src/index.js. This will assign this polyfill to MediaRecorder present in window object.
import AudioRecorder from 'audio-recorder-polyfill'
window.MediaRecorder = AudioRecorder
  1. If you are using Typescript, you might have to add type declarations in src/audio-recorder-polyfill.d.ts
declare module 'audio-recorder-polyfill'
user_112204790
Related