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!
"It works perfectly in Chrome browser but does not seem to be working on Safari and iOS mobile app. On debugging both
captureStream()andmozCaptureStream()functions are undefined."
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).
mozCaptureStream() is specific to Mozilla Firefox. Safari won't know/accept it.
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.