(Camera) video not showing on iOS with Blaze

[JH7]

I'm currently trying to get (web)camera access into my Meteor app powered by Blaze. Camera access is requested via navigator.mediaDevices.getUserMedia. On Android and the web, everything works as expected. On iOS (Safari), I can't get the <video> element displaying the video stream of the camera. It just displays a black screen or nothing at all.

Interestingly, this error does not occur if I use the same camera requesting and streaming code with React (but also with Meteor).

For debugging and replication purposes I created this repository. There is one Meteor project with Blaze, one with React and one with pure HTML. The React and HTML projects work, the Blaze project does not. This is the reason why I suspect that this error has something to do with Blaze. There could also be some polyfill-sort-of implementation in React which makes this work. So this totally could also be some sort of user error on my end. More information can be found in the repository's README.

iOS version 14.2 seemed to work fine but with iOS versions 14.4.2 and 14.6 the error is there.

This is most probably also related to iOS/Safari needing "user interaction" before displaying a video stream. Maybe React dispatches the button click events differently than Blaze and Safari is only detecting the "React way". I also tried all different suggestions on the web (including adding autoplay playsinline muted to the <video> element) but nothing seems to work for me. As a reference, the same issue is discussed here https://github.com/zxing-js/library/issues/431.

[JH7]

OK, so I finally found a workaround:

Adding the <video> element via JavaScript did the trick. Example:

document.getElementById('outer-div').innerHTML = `
    <video id="scan-video" autoplay></video>
  `;

I've added the workaround to the replication repository.

Apparently, Safari likes injecting the video element directly to the DOM more than a Blaze template.

[jankapunkt]

@jh7 just out of curiosity

would this standard setup work if you have some reactivitiy triggering the re-rendering of the template?

[racosa]

Same problem here.

@JH7 thanks for posting this workaround!

[iaroshvictor]

That's how i fixed this issue <video id="videoCam" autoPlay playsInline=true muted></video> the important part for iOS is playsInline=true