HTML JS

HOW TO CAPTURE PHOTO WITH WEBCAM IN JAVASCRIPT

WEBCAM “LIVE FEED” <video id="kam-live" autoplay></video>

WEBCAM HTML

01

TAKE SNAPSHOT <canvas id="kam-snap"></canvas> <input type="button" onclick="vidtake()" value="Click"/>

GET PERMISSION TO ACCESS WEBCAM navigator.mediaDevices.getUserMedia({ video: true })

WEBCAM FEED TO VIDEO TAG

02

STREAM WEBCAM TO VIDEO TAG .then((stream) => {     document.getElementById   ("kam-live").srcObject = stream;  }).catch((err) => { console.log(err); });

function vidtake () {   GET HTML ELEMENTS   let vid = document.getElementById   ("kam-live"),   canvas = document.createElement   ("kam-snap"),   ctx = canvas.getContext("2d");

SNAPSHOT TO CANVAS

03

  SNAPSHOT VIDEO TO CANVAS   canvas.width = vid.videoWidth;   canvas.height = vid.videoHeight;   ctx.drawImage(vid, 0, 0, vid.videoWidth,   vid.videoHeight); }