title: Take a single picture using webcam in html5
body: <p>I am making a small class in javascript to use a webcam for an electron and cylon application. They need to use the camera like a digital camera, as in, see the video stream, click a button, and save that image.</p>
  
  <pre><code>class Camera {
    constructor() {
      this.video = document.createElement('video');
    }
    getStream() {
      return new Promise(function (resolve, reject) {
        navigator.webkitGetUserMedia({ video: true }, resolve, reject);
      });
    }
    streamTo(stream, element) {
      var video = this.video;
      return new Promise(function (resolve, reject) {
        element.appendChild(video);
        video.src = window.URL.createObjectURL(stream);
        video.onloadedmetadata = function (e) {
          video.play();
          resolve(video);
        }
      });
    }
  }
  </code></pre>
  
  <p>This will allow me to make a stream and append the stream to the page as a video element. However, my question is: how can I get a single picture from this stream? Eg, on some sort of button click, save the current frame.</p>
  
  <pre><code>$('button[data-action="take-picture"]').on('click', function (ev) {
    // the clicked button has a "source" referencing the video.
    var video = $(ev.target).data('source');
    // lost here. Want to catch current "state" of the video.
    // take that still image and put it in the "target" div to preview.
    $(ev.target).data('target').append( /** my image here */ );
  });
  </code></pre>
  
  <p>How can I save a picture from a video stream in javascript on an event?</p>