Using the <video> element to render a webcam stream in a HTML page

webcam.js

var video;

function startWebCam() {

// video = document.createElement( 'video');
   video = document.querySelector('#video');

   video.style.width  = '400px'; // document.body.clientWidth  + 'px';
// video.style.height = '400px'; // document.body.clientHeight + 'px';

   video.setAttribute('autoplay'   , 'true');

// document.body.appendChild(video);

   var stopVideo = document.querySelector("#stop");

   if (navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({ video: true })
       .then(function(stream) {
         video.srcObject = stream;
       })
       .catch (function(err) {
         alert(err);
       });
   }

   stopVideo.addEventListener("click", stopWebcam, false);
}

function stopWebcam(ev) {
   var tracks = video.srcObject.getTracks();

   for (var i = 0; i < tracks.length; i++) {

     tracks[i].stop();
   }

   video.srcObject = null;
}

Github repository about-HTML, path: /tags/video/webcam.js

webcam.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>Render Webcam</title>

<style>
    body {
      height: 100vh;
    }

    button#stop {
      border          : 2px dotted #f73;
    }

    button:hover  { background-color: #edc; }
    button:active { background-color: #dcb; }

  </style>

</head>

<body onload='startWebCam()'>


<script src='webcam.js'></script>
<video id='video'></video>
<p>
<button id="stop">Stop WebCam</button>

</body>
</html>

Github repository about-HTML, path: /tags/video/webcam.html

Using the <video> element to render a webcam stream in a HTML page

webcam.js

webcam.html

See also