Javascript 在html5中使用网络摄像头拍摄一张照片

我正在用javascript制作一个小班，为electron和cylon应用程序使用网络摄像头。他们需要像使用数码相机一样使用相机，如中所示，查看视频流，单击按钮，然后保存该图像

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);
      }
    });
  }
}

这将允许我制作一个流，并将该流作为视频元素附加到页面中。然而，我的问题是：如何从这个流中获得一张图片？例如，单击某种按钮，保存当前帧

$('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 */ );
});

---

如何在事件中用javascript保存视频流中的图片？

基于@putvande提供的链接，我能够在我的类中创建以下内容。我向构造函数添加了一个画布以使其工作。抱歉，代码块太长了

class Camera {
  constructor(video, canvas, height=320, width=320) {
    this.isStreaming = false;  // maintain the state of streaming
    this.height = height;
    this.width = width;

    // need a canvas and a video in order to make this work.
    this.canvas = canvas || $(document.createElement('canvas'));
    this.video = video || $(document.createElement('video'));
  }

  // streamTo and getStream are more or less the same.

  // returns a new image element with a still shot of the video as streaming.
  takePicture() {
    let image = new Image();
    let canv = this.canvas.get(0)
    var context = canv.getContext('2d');
    context.drawImage(this.video.get(0), 0, 0, this.width, this.height);
    var data = canv.toDataUrl('image/png');
    image.src = data;
    return image;
  }
}

---

（太长了，无法回答）太棒了！不知道为什么我在谷歌上找不到这个，从mozilla到Too，但请记住，这只适用于少数浏览器。有些人不喜欢；我不支持这个功能。第二天我在谷歌上搜索了“html5网络摄像头api拍照”；我在最近的一个项目中也做了类似的事情，从MDN教程中获得了我所需要的一切，然后从那里开始跟踪文档链接。在这种情况下，广泛的浏览器兼容性并不是很大的问题，因为它应该只在electron上