Capture webcam video on webpage


The article goes over how to stream webcam video using HTML5 and JavaScript.

HTML

Add <video> with autoplay enabled:

<video autoplay></video>

JavaScript

Stream the video media using MediaDevices.getUserMedia():

var constraints = { video: true };
var video = document.querySelector('video');
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
  video.srcObject = stream;
});

Code

Full example:

<!-- index.html -->
<video autoplay></video>
<script>
  var constraints = { video: true };
  var video = document.querySelector('video');
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
    video.srcObject = stream;
  });
</script>

Demo

Replit:

If you get Requested device not found, this is because:

  • your webcam is disabled.

If you get Permission denied, this is because:

Check out the demo webpage instead:

Resources



Please support this site and join our Discord!