Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recording does not work on iOS 15 #627

Open
chernodub opened this issue Dec 6, 2021 · 7 comments
Open

Recording does not work on iOS 15 #627

chernodub opened this issue Dec 6, 2021 · 7 comments
Labels
safari-mobile safari iOS browser issues

Comments

@chernodub
Copy link

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

Screen Shot 2021-12-06 at 12 06 02

"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
Copy link

Same issue here

@chernodub
Copy link
Author

chernodub commented Jan 27, 2022

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
Copy link

you save my day @chernodub

@thijstriemstra thijstriemstra added the safari-mobile safari iOS browser issues label Feb 2, 2022
@pradeepaanumalla
Copy link

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

@chernodub
Copy link
Author

@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
Copy link

will reducing bitrate increase the filesize?

@prdip
Copy link

prdip commented Aug 5, 2024

will reducing bitrate increase the filesize?

It will decrease the filesize.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
safari-mobile safari iOS browser issues
Projects
None yet
Development

No branches or pull requests

6 participants