Recording Video HTML5 not working in Safari and iOS mobile app

Question

I am trying to use the HTML5 video - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video to access camera on the device.

I am following this example - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element to record the video.

It works perfectly in Chrome browser but does not seem to be working on Safari and iOS mobile app. On debugging both captureStream() and mozCaptureStream() functions are undefined.

Any suggestions on how to fix this?

PS: Is this a known issue - https://bugs.webkit.org/show_bug.cgi?id=181663. Are there any workarounds? Thanks!

Answer 1

"It works perfectly in Chrome browser but does not seem to be working on Safari and iOS mobile app. On debugging both captureStream() and mozCaptureStream() functions are undefined."

1. Your link is recording into Google's own webM video which is a format not supported by Apple. The Safari browser cannot encode pixels as VP8 or VP9 to use inside webM container. Apple has an MPEG video license so Safari should record MP4 format.
   
   update: Safari actually records as Fragmented MP4 format (ISOBMFF).
   

2. mozCaptureStream() is specific to Mozilla Firefox. Safari won't know/accept it.

3. captureStream() is not fully suppported on Safari. The missing part is the recording part.

Possible workarounds:

• Try enabling MediaRecorder API in Safari settings.
  Research (double-check) for known issues, like as mentioned at bottom of this read this article: https://blog.addpipe.com/safari-support-on-macos-beta/

• If you can draw webcam to Canvas then consider bringing in your own (Javascript-based) H264 encoder (for MP4 video) or VP8/VP9 encoder (for webM video).
  

• You can try: https://github.com/TrevorSundberg/h264-mp4-encoder.

• Wait for webCodecs API to be added to Safari.
  Note in Chrome/Edge you can just use the built-in webCodecs API to encode video for MP4 or WebM formats. Safari has no free encoders and thus has no webCodecs API.

Answer 2

I've been banging my head on getting captureStream to work on iOS (Safari and Chrome, same results) to no avail. This reply by @VC.One helped me stop trying to use webM format, which was used by the sample code I was following from mdn which is here... https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element

So I simply switched to mp4 instead of webm, using .srcObject instead of .captureStream, and now I have things working on iOS. I still have a lot of clean-up to do, but when my solution is finished I will make a nice write-up and post back.

Also, someone pointed out that I needed to use the onloadedmetadata with the play method, in order to get a video element to show a real-time feed of bytes from getUserMedia, and that worked. Then I just needed to store the bytes somewhere that iOS will not freak out about (it does not support captureStream) and then it all came together. It definitely seems to be a licensing issue at the heart of it all, which is why this works using mp4 instead of webm.