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

Comments

Post a Comment

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

apache - setting document root in antoher partition on ubuntu -

-
i place apache document root inside partition of ubuntu hard drive, keep getting forbidden message, when place home directory woking find, how be? group or owner affected ? here mysite.conf , apache2.conf when place document root in home folder (working) #site-available/mysite.conf documentroot /home/jono/www #/etc/apache2/apache2.conf <directory /home/jono/www/> options indexes followsymlinks allowoverride none require granted </directory> bu when change document root partition keep getting forbidden messasge #site-available/mysite.conf documentroot /media/jono/website_data/www #/etc/apache2/apache2.conf <directory /media/jono/website_data/www/> options indexes followsymlinks allowoverride none require granted </directory> is owner/group access affected ? or there problem ? at last it's working, have grant access www:data accesing whole directory @mark-b, using chown -r www-data:www-data whole directory is...
Read more