Capture webcam video on webpage
Add <video>
element with the autoplay
attribute enabled:
<!-- index.html --> <video autoplay></video>
Stream the video media using MediaDevices.getUserMedia()
:
// script.js var constraints = { video: true }; var video = document.querySelector('video'); navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { video.srcObject = stream; });
Full example (see demo and code), which is inspired by the article "Capture Audio and Video in HTML5":
<!-- 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>
This article was originally published on remarkablemark.org on December 17, 2020.