I'm trying to get video stream from phone camera and display the stream on a video element. This is the gist of the code I have:

    ...
    navigator.mediaDevices.getUserMedia(constraints)
    .then((stream)=>{
        video.srcObject=stream;
        video.volume=0;
        video.mute=0;
        video.play(); //error here on  iOS Safari
        ...

While this works on all desktop and android browsers, this does not seem to work on iOS, giving me the error on line video.play().

From what I understand so far, this seems to be a safety measure by Safari on mobile to prevent websites from consuming too much of user's data. Meaning, unless specifically initiated by the user, the browser won't allow video.play()

I have tried adding "muted" attribute on the video element itself (besides just autoplay), but that did not seem to fix the issue.

So, I'd like to know if there are any other remedies to the issue here or if I should look for alternative ways to show the video feed. Any help/suggestions are greatly appreciated.

I'm trying to get video stream from phone camera and display the stream on a video element. This is the gist of the code I have:

    ...
    navigator.mediaDevices.getUserMedia(constraints)
    .then((stream)=>{
        video.srcObject=stream;
        video.volume=0;
        video.mute=0;
        video.play(); //error here on  iOS Safari
        ...

While this works on all desktop and android browsers, this does not seem to work on iOS, giving me the error on line video.play().

From what I understand so far, this seems to be a safety measure by Safari on mobile to prevent websites from consuming too much of user's data. Meaning, unless specifically initiated by the user, the browser won't allow video.play()

I have tried adding "muted" attribute on the video element itself (besides just autoplay), but that did not seem to fix the issue.

So, I'd like to know if there are any other remedies to the issue here or if I should look for alternative ways to show the video feed. Any help/suggestions are greatly appreciated.

• javascript
• html
• webrtc
• mobile-safari

1 Answer 1

Have you tried adding playsinline to the video element?

https://webkit/blog/6784/new-video-policies-for-ios/