CODEWITHSUNDEEP
javascripthtmlreactjsreduxweb-mediarecorder
Vinay Sharma
Vinay Sharma

Reputation: 3777

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

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

Upvotes: 5

Views: 4230

Answers (1)

Vinay Sharma
Vinay Sharma

Reputation: 3777

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'

Upvotes: 6

Related Questions