Сделайте снимок с помощью веб-камеры в html5

Question

Я делаю небольшой класс в javascript для использования веб-камеры для приложения электрона и цилиндра. Им нужно использовать камеру, как цифровую камеру, например, в видеопотоке, нажать кнопку и сохранить это изображение.

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 на мероприятии?

Answer 1

Основываясь на ссылке @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; 
    } 
}