title: How to capture a streaming video using WebRTC
body: <p>the following code is similar to the one written in Mozilla Developer's Network: <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos</a>.</p>
  
  <p>For some reasons,the webcam is not turned on when ran under a server.ejs. Only a button a shown. I suspect some editorial exists on the code, it would be nice if we could find where the problem stands? Thank you</p>
  
  <pre><code> &lt;!doctype html&gt;
   &lt;html lang="en"&gt;
    &lt;head&gt; 
   &lt;title&gt; Introduction to WebRTC &lt;/title&gt;
   &lt;link rel = "stylesheet" type="text/css" href="styles.css"&gt;
   &lt;/head&gt;
   &lt;body&gt; 
  
   &lt;p&gt; &lt;button id = "takeProfilePicture" type="button" autofocus="true"&gt;Create Profile Picture&lt;/button&gt;&lt;/p&gt;
   &lt;video autoplay&gt;&lt;/video&gt;
   &lt;video id="videoTag" autoplay&gt;&lt;/video&gt;
   &lt;canvas id = "profilePicCanvas" style="display: none;"&gt;&lt;/canvas&gt;
   &lt;div&gt;
   &lt;img id = "profilePictureOutput"&gt;
   &lt;/div&gt;
  
  &lt;script&gt; 
   navigator.getUserMedia = navigator.getUserMedia  ||         navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  
   var constraints = {
    audio: false, 
    video: {
             mandatory: {
  
               minWidth  : 240,
               maxWidth  : 240,
               minHeight : 240,
               maxHeight : 240
               }
               }
             };
  
   var videoArea = document.querySelector("video");
   var profilePicCanvas = document.querySelector("#profilePicCanvas");
   var profilePictureOutput =   document.querySelector("#profilePictureOutput");
  var takePicButton = document.querySelector("#takeProfilePicture");
  var videoTag = document.querySelector("#videoTag");
  
  var width  = 240 ;
  var height = 0   ;
  var streaming = false ;
  
  takePicButton.addEventListener('click', function(ev){
  takeProfilePic();
  ev.PreventDefault();
  }, false;) 
  
  videoTag.addEventListener('canplay', function(ev){
  if (!streaming) {
  height = videoTag.videoHeight / (videoTag.videoWidth/width);
  
  if (isNaN(height)) {
  
  height = width / (4/3) ;
  
  }
  videoTag.setAttribute('width',width);
  videoTag.setAttribute('height',height);
  profilePicCanvas.setAttribute('width',width);
  profilePicCanvas.setAttribute('height',height);
  streaming = true ;
  
  
  }
  },false);
  
  function takeProfilePic() {
  var context = profilePicCanvas.getContext('2d');
  if (width &amp;&amp; height) {
   profilePicCanvas.width  = width ;
   profilePicCanvas.height = height ;
  
   context.drawImage(videoTag, 0 , 0 , width, height);
  
   var data = profilePicCanvas.toDataURL('image/png');
   profilePictureOutput.setAttribute('src',data);
   }
   }
  
  navigator.getUserMedia(constraints, onSuccess, onError);
  
  function onSuccess(stream) {
  console.log("Sucess! We have a stream!");
  videoArea.src = window.URL.createObjectURL(stream);
  videoArea.className = "grayscale_filter";
  videoArea.play() ;
  
  }
  
  function onError(error) {
  
  console.log("Error with getUserMedia: ", error);
  }
  
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>