HTML JS

CAPTURE PHOTO WITH WEBCAM

(quick guide & examples)

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

WEBCAM HTML

01

TAKE SNAPSHOT <canvas id="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("live")   .srcObject = stream );

function vidtake () {   GET HTML ELEMENTS   let v = document.getElementById("live"),        c = document.createElement("snap"),        ctx = c.getContext("2d");

SNAPSHOT TO CANVAS

03

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