Skip to content
← Back to Community
Capture webcam video on webpage
Profile icon
remarkablemark

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.

Voters
Profile icon
Fre3Styl3r
Profile icon
23950logan
Profile icon
Squirrel777
Profile icon
maxina
Profile icon
EpicGamer007
Profile icon
badst
Profile icon
remarkablemark