Opus MediaRecorder Example does not work on Chrome for iOS 12

[axis80]

The Opus MediaRecorder Example at https://kbumsik.io/opus-media-recorder/ is not working for me in Chrome 70.0.3538.60 (iOS 12.0.1). When I click on the "create" button, this error message is output:

Message: TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia') - URL: https://kbumsik.io/opus-media-recorder/example.js - Line: 23 - Column: 25

Changing the MIME type in the dropdown menu has no effect.

Notably, the example does work correctly in the Safari browser on the same iPad device.

[kbumsik]

Welcome the first issue! I never thought Chrome on iOS cases. The error message says it is not a problem with opus-media-recorder but a problem with navigator.mediaDevices.getUserMedia API. This API is necessary to get audio stream from microphones.

Unfortunately, it looks like getUserMediaAPI does not support on Chrome for iOS because Apple does not allow it. Therefore there is no way for this example to support Chrome for iOS. I'm going to add a warning message for that browser.

I will let you know when Apple allows getUserMedia for third-party browsers or I figure out a workaround!

[kbumsik]

Closed the issue since it is not possible to support Chrome on iOS.

[NfNitLoop]

Updating this old issue/thread in case anyone else arrives here from the link on https://kbumsik.io/opus-media-recorder/ as I did:

iOS 14.4 (And Maybe even iOS 14.3?) now allows getUserMedia in embedded mode (used by Firefox, Chrome, and others). It does require that you be accessing the site via https, and I believe the recording must be started from the main thread, not an async callback.

Aha, even https://kaliatech.github.io/web-audio-recording-tests/dist/#/test1 confirms that

As of 14.3, iOS appears to have a full MediaRecorder implementation.

[codewithsuraj]

getSupportedMimeTypes() { const VIDEO_TYPES = [ "webm", "WEBM", "ogg", "mp4", "x-matroska" ]; const VIDEO_CODECS = [ "vp9", "vp9,opus", "vp9.0", "vp8", "vp8,opus", "VP8,OPUS", "vp8,vp9,opus", "vp8.0", "avc1", "av1", "h264", "h264,opus", "h264,vp9,opus", "H264", "h265", "h.265", "h264", "h.264", "opus", ];

const supportedTypes = [];
VIDEO_TYPES.forEach((videoType) => {
  const type = `video/${videoType}`;
  VIDEO_CODECS.forEach((codec) => {
    const variations = [
      `${type};codecs=${codec}`,
      `${type};codecs:${codec}`,
      `${type};codecs=${codec.toUpperCase()}`,
      `${type};codecs:${codec.toUpperCase()}`,
      `${type}`
    ]
    variations.forEach(variation => {
      if (MediaRecorder.isTypeSupported(variation))
        supportedTypes.push(variation);
    })
  });
});
return supportedTypes;

}