javascript - Take a single picture using webcam in html5 -

i making small class in javascript use webcam electron , cylon application. need use camera digital camera, in, see video stream, click button, , save image.

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

this allow me make stream , append stream page video element. however, question is: how can single picture stream? eg, on sort of button click, save current frame.

$('button[data-action="take-picture"]').on('click', function (ev) {   // clicked button has "source" referencing video.   var video = $(ev.target).data('source');   // lost here. want catch current "state" of video.   // take still image , put in "target" div preview.   $(ev.target).data('target').append( /** image here */ ); }); 

how can save picture video stream in javascript on event?

based on link @putvande supplied, able create following in class. added canvas constructor make work. sorry long code block though.

class camera {   constructor(video, canvas, height=320, width=320) {     this.isstreaming = false;  // maintain state of streaming     this.height = height;     this.width = width;      // need canvas , video in order make work.     this.canvas = canvas || $(document.createelement('canvas'));     this.video = video || $(document.createelement('video'));   }    // streamto , getstream more or less same.    // returns new image element still shot of video 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;   } }