2

I am recording and sending audio via a website. For that purpose I use the MediaRecorder API.

There are no issues when using the site on desktop or Android devices and according to the MediaRecorder documentation, since a release in September 2020, iOS 14 should be supported as well.

The MediaRecorder is instantiated like this:

navigator.mediaDevices.getUserMedia({ audio: true, video: false })
  .then((stream) => {
    // Some validation and other processing. Omitted for brevity.

    const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

    // Using the mediaRecorder. Omitted for brevity.
  });

When doing this on an iPhone 12 with iOS 14.6, i get the following error from that instantiation line:

NotSupportedError: mimeType is not supported

I get the same error when trying other formats (these are the ones I found and tried):

  • audio/webm (as shown in example above)
  • video/webm
  • audio/ogg (also errors on desktop)
  • audio/ogg; codecs=opus (also errors on desktop)

Is there any mimeType for MediaRecorder that lets me use audio on iOS devices?

Am I getting something else entirely wrong?

2
  • Hi Felix, I'm using Ionic React and using React-Webcam. I also chose the mimeType: video/mp4, and it led to the "mimeType not supported" error. Are you using Ionic as well? If so, did you find a way to get the camera working on iOS simulator?
    – Mars2024
    Oct 21, 2021 at 23:59
  • btw, which mime-type is supported by MediaRecorder can be live tested using sitelint.com/lab/media-recoder-supported-mime-type Dec 22, 2022 at 19:41

2 Answers 2

3

A preferred solution for me is something like this:

if (MediaRecorder.isTypeSupported('video/webm; codecs=vp9')) {
    var options = {mimeType: 'video/webm; codecs=vp9'};
} else  if (MediaRecorder.isTypeSupported('video/webm')) {
    var options = {mimeType: 'video/webm'};
} else if (MediaRecorder.isTypeSupported('video/mp4')) {
    var options = {mimeType: 'video/mp4', videoBitsPerSecond : 100000};
} else {
    console.error("no suitable mimetype found for this device");
}
const mediaRecorder = new MediaRecorder(stream, options);

IOS only allows mp4, so after running this code you will get that option automatically.
I believe this is probably a better method than a try catch for the error.

2

It turns out video/mp4 works with iOS. It can be used for audio-only as well, even though it says video.

Since other browsers don't support video/mp4, a try/catch with the video/mp4 as a fallback can be used, which results in the following solution:

let mediaRecorder;
try {
  mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
}
catch (err1) {
  try {
    // Fallback for iOS
    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/mp4' });
  }
  catch (err2) {
    // If fallback doesn't work either. Log / process errors.
    console.error({err1});
    console.error({err2})
  }
}

The code could be made cleaner and more explicit by:

  • catching the NotSupportedError explicitly
  • querying the device / OS and using the according mimeType explicitly, instead of knowingly running into an error.

But for now it works and that's good enough for a personal project.

3
  • video/mp4 results in a 1 second audio when recorded on Chrome-iOS. Is this something you ran across during your issue, i have already spent a lot of time on this on getting audio recording to work on Chrome/iOS, any help is appreciated!
    – arjary
    Jun 30, 2021 at 22:17
  • @arjary No, using the code above I don't encounter your problem with Chrome on iOS w\ iPhone 12, iOS 14.6. The start function of MediaRecorder has an optional parameter timeslice, if you set this parameter, you get bits of audio of the specified length. I set this to 1000 milliseconds in my project and reassemble the audio later. Maybe you set the timeslice and forgot to reassemble the audio, in that case you would always get a bit of audio of only e.g. 1 second length. Jul 2, 2021 at 8:51
  • Or related to this: stackoverflow.com/q/70273551/1066234
    – Avatar
    Jan 4, 2022 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.