Javascript getUserMedia shows black screen on first load in iphone safari

user_11934228 0
Viewed 800

I made qr code scan function with HTML/Javascript and deployed to site. When I open site on iphone safari, click show camera, it shows for a few seconds and crash, get black screen.

One interesting is, I get black screen after a few seconds. Before get black screen, If I push home button on iphone and come back to site again, then it works normally, no crash, no black screen.

This is part of js.

const constraints = {
    audio: false,
    video: {
      facingMode: 'environment'
    }
  }

navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      video.setAttribute("playsinline", true);
      video.setAttribute("autoplay", true);
      video.setAttribute("muted", true);
      video.srcObject = stream;
      video.play();
    })

How can I make it to work for first load?

camera iphone javascript ios
1 Answers

As said here, add the playsinline attribute to the video element:

const video = document.getElementById("video-element");    
video.setAttribute("playsinline", true);
user_175566790
Related