Recording does not work on iOS 15

[chernodub]

Description

Unable to record a video from a device on iOS 15. This is reliably reproducible when recording a video that has a length of about 1.5-2 minutes.

I believe the issue lies in the RecordRTC library as I have tested it on webrtc-experiment and it doesn't work too. I added some more logs on muaz-khan/RecordRTC#782 (comment)
If you guys have any ideas on how to use the library for iOS devices considering the caveats in RecordRTC I would appreciate to hear it. Please feel free to contact me if more info is needed, thanks!

Steps to reproduce

1. Set up this repo for local development
2. Update the maxLength in https://github.com/collab-project/videojs-record/blob/a36ba88e74ecadbf765c2bf191fb094e724a75b2/examples/audio-video.html to ~360 for testing more long-lasting videos
3. Host it locally via HTTPS (need to update the start script with https key: npm run build && webpack serve --config ./build-config/webpack.dev.main.js --https)
4. Proceed to the local network address of your PC from an iOS device
5. Try recording a video for about 1.5-2 min.

Results

Expected

The replay via online-player should be working and the file should not be 0 bytes in length.

Actual

It both can't be replayed in the online player or to be downloaded and played since the file is broken. Also, the error below is thrown.

Error output

"ERROR:" – "(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)" – "The media could not be loaded, either because the server or network failed or because the format is not supported."

Additional Information

versions

videojs

7.14.3

recordrtc

5.6.2

browsers

• Safari 15
• Chrome 96

OSes

iOS 15.1.1

[markitosgv]

Same issue here

[chernodub]

For anyone looking (including @markitosgv), I was able to fix the issue by monkey-patching the bitrate of the video on iOS devices (as far as I understood, videojs-record doesn't provide an API to do that properly):

function isIOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

/** 
 * On some of the iOS devices, the video gets too big so that Safari fails to process the file and returns 0-byted one without failing (which is undocumented and, obviously, an error).
 * As a workaround, we reduce the quality of a video in the native recording API (which is used by the `videojs-record` and `RecordRTC` internally) so that it won't get to this size.
 * 
 * TODO: remove it when https://bugs.webkit.org/show_bug.cgi?id=85851 is resolved by Apple.
 */
if (isIOS()) {
  const DefaultMediaRecorder = window.MediaRecorder;
  const kb = 8 * 1024;
  const preferredBitRatePerSecond = 100 * kb;
  window.MediaRecorder = class extends DefaultMediaRecorder {
    constructor(stream, options) {
      super(stream, {
        ...options, 
        audioBitsPerSecond: preferredBitRatePerSecond,
        videoBitsPerSecond: preferredBitRatePerSecond,
      });
    }
  }
}

[markitosgv]

you save my day @chernodub

[pradeepaanumalla]

@chernodub this is not working for more than 2 minute videos in iphone 11 with safari 15+

[chernodub]

@chernodub this is not working for more than 2 minute videos in iphone 11 with safari 15+

Probably you could try reducing the bitrate even more, but I'm not sure whether it'll work

[dosdemon]

will reducing bitrate increase the filesize?