title: take photo with webrtc
body: <p>On My chrome the following code just opens up the camera and immediately crashes i.e show black screen. This code works fine on firefox. Why?</p>
  
  <p><a href="http://jsfiddle.net/2mLb6cs2/" rel="nofollow">http://jsfiddle.net/2mLb6cs2/</a></p>
  
  <pre><code>(function() {
      // The width and height of the captured photo. We will set the
      // width to the value defined here, but the height will be
      // calculated based on the aspect ratio of the input stream.
  
      var width = 320; // We will scale the photo width to this
      var height = 0; // This will be computed based on the input stream
  
      // |streaming| indicates whether or not we're currently streaming
      // video from the camera. Obviously, we start at false.
  
      var streaming = false;
  
      // The various HTML elements we need to configure or control. These
      // will be set by the startup() function.
  
      var video = null;
      var canvas = null;
      var photo = null;
      var startbutton = null;
  
      function startup() {
          video = document.getElementById('takephoto-video');
          canvas = document.getElementById('takephoto-canvas');
          photo = document.getElementById('takephoto-preview');
          previewarea = document.getElementById('takephoto-previewarea');
          startbutton = document.getElementById('takephoto-startbutton');
          downloadbutton = document.getElementById('takephoto-download');
  
          navigator.getMedia = (navigator.getUserMedia ||
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.msGetUserMedia);
  
          navigator.getMedia({
                  video: true,
                  audio: false
              },
              function(stream) {
                  if (navigator.mozGetUserMedia) {
                      video.mozSrcObject = stream;
                  } else {
                      var vendorURL = window.URL || window.webkitURL;
                      video.src = vendorURL.createObjectURL(stream);
                  }
                  video.play();
              },
              function(err) {
                  console.log("An error occured! " + err);
              }
          );
  
          video.addEventListener('canplay', function(ev) {
              if (!streaming) {
                  height = video.videoHeight / (video.videoWidth / width);
  
                  // Firefox currently has a bug where the height can't be read from
                  // the video, so we will make assumptions if this happens.
  
                  if (isNaN(height)) {
                      height = width / (4 / 3);
                  }
  
                  video.setAttribute('width', width);
                  video.setAttribute('height', height);
                  canvas.setAttribute('width', width);
                  canvas.setAttribute('height', height);
                  streaming = true;
              }
          }, false);
  
          startbutton.addEventListener('click', function(ev) {
              takepicture();
              ev.preventDefault();
          }, false);
  
          clearphoto();
      }
  
      // Fill the photo with an indication that none has been
      // captured.
  
      function clearphoto() {
          var context = canvas.getContext('2d');
          context.fillStyle = "#AAA";
          context.fillRect(0, 0, canvas.width, canvas.height);
  
          var data = canvas.toDataURL('image/png');
          photo.setAttribute('src', data);
      }
  
      // Capture a photo by fetching the current contents of the video
      // and drawing it into a canvas, then converting that to a PNG
      // format data URL. By drawing it on an offscreen canvas and then
      // drawing that to the screen, we can change its size and/or apply
      // other changes before drawing it.
  
      function takepicture() {
          var context = canvas.getContext('2d');
          if (width &amp;&amp; height) {
              canvas.width = width;
              canvas.height = height;
              context.drawImage(video, 0, 0, width, height);
  
              var data = canvas.toDataURL('image/png');
              photo.setAttribute('src', data);
  
              previewarea.classList.remove("hide");
              downloadbutton.href = data;
  
          } else {
              clearphoto();
          }
      }
  
      startup();
  })();
  </code></pre>
  
  <p>Above code is copied from </p>
  
  <p><a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill/" rel="nofollow">https://mdn-samples.mozilla.org/s/webrtc-capturestill/</a></p>