<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Stream video via webcam --> <div class="video-wrap"> <video id="video" playsinline autoplay></video> </div> <!-- Trigger canvas web API --> <div class="controller"> <button id="snap">Capture</button> </div> <!-- Webcam video snapshot --> <canvas id="canvas" width="640" height="480"></canvas>

'use strict'; const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const snap = document.getElementById("snap"); const errorMsgElement = document.querySelector('span#errorMsg'); const constraints = { audio: true, video: { width: 1280, height: 720 } }; // Access webcam async function init() { try { const stream = await navigator.mediaDevices.getUserMedia(constraints); handleSuccess(stream); } catch (e) { errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`; } } // Success function handleSuccess(stream) { window.stream = stream; video.srcObject = stream; } // Load init init(); // Draw image var context = canvas.getContext('2d'); snap.addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); });