I am trying to record video with my phone and use it as a background on the site I am building. The goal is to do stuff with the video stream, but first I need to just be able to render it at all. I have the code below:

That I am also testing as a simple html page exposed via python -m http.server over ngrok to make sure it is sitting on https. On my laptop it happily takes the webcam, but on phone (iphone 12 and 15 tested) I can see that it gets access to the camera (the permission modal shows correctly) and I can place an alert to see how far it gets, but it never seems to try to render anything.

I'm not sure where to go from here, maybe it should not work, any help would be appreciated.

The code:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function (stream) {
  // Stream the camera feed to a video element on the page
  var videoElement = document.querySelector('video');
  videoElement.srcObject = stream;
})
  .catch(function (error) {
  alert(error)
  console.error('Error accessing the camera: ' + error);
});

<p>Video thing</p>
<video autoplay="true"></video>

video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

p {
  color: red;
}

I am trying to record video with my phone and use it as a background on the site I am building. The goal is to do stuff with the video stream, but first I need to just be able to render it at all. I have the code below:

https://codepen.io/jasperkennis/pen/yLGjOrw

That I am also testing as a simple html page exposed via python -m http.server over ngrok to make sure it is sitting on https. On my laptop it happily takes the webcam, but on phone (iphone 12 and 15 tested) I can see that it gets access to the camera (the permission modal shows correctly) and I can place an alert to see how far it gets, but it never seems to try to render anything.

I'm not sure where to go from here, maybe it should not work, any help would be appreciated.

The code:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function (stream) {
  // Stream the camera feed to a video element on the page
  var videoElement = document.querySelector('video');
  videoElement.srcObject = stream;
})
  .catch(function (error) {
  alert(error)
  console.error('Error accessing the camera: ' + error);
});

<p>Video thing</p>
<video autoplay="true"></video>

video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

p {
  color: red;
}

• javascript
• html
• camera
• webcam
• mediastream

2 Answers 2

Solution:

When calling navigator.mediaDevices.getUserMedia, the browser will prompt the user to allow or deny access.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // Handle the camera stream
  })
  .catch(function(error) {
    // Handle errors, such as permission denied
  });

Before trying to access the camera, you can check if the browser has permission to use the camera by using navigator.permissions.query

navigator.permissions.query({ name: 'camera' })
  .then(function(permissionStatus) {
    if (permissionStatus.state === 'granted') {
      // Camera access is granted
    } else {
      // Camera access is not granted; request permission as needed
    }
  });

You need to add the playsinline attribute to your <video> element.

iOS Safari has a quirk that requires this, otherwise it tries to play the video in fullscreen format.

From MDN:

playsinline is required for mobile Safari, allowing videos to play without forcing fullscreen mode.

So your HTML will be updated to look like:

<video autoplay playsinline></video>