Guided by
Basically just googling
"html use webcam" --> "capture frame from video element"
and very little bit of thinking
| <video autoplay="true" id="videoElement"> | |
| </video> | |
| <button onclick="captureVideo()">capture</button> | |
| <canvas id="myCanvas"/> | |
| <script> | |
| function main() { | |
| var video = document.querySelector("#videoElement"); | |
| if (navigator.mediaDevices.getUserMedia) { | |
| navigator.mediaDevices.getUserMedia({video: true}) | |
| .then(function(stream) { | |
| video.srcObject = stream; | |
| }) | |
| .catch(function(err0r) { | |
| console.log("Something went wrong!"); | |
| }); | |
| } | |
| /** | |
| * The browser asks whether to allow the webcam or not. | |
| */ | |
| videoElement.addEventListener("playing", ()=> { | |
| /** | |
| * Video element attributes are not available, or does not | |
| * have the desired value until it is "playing". | |
| * | |
| * So set the canvas size when it has the desired value. | |
| */ | |
| myCanvas.width = videoElement.videoWidth; | |
| myCanvas.height = videoElement.videoHeight; | |
| }); | |
| } | |
| function captureVideo() { | |
| console.log("capture video"); | |
| myCanvas.getContext('2d').drawImage(videoElement, 0,0); | |
| } | |
| main() | |
| </script> |