How to capture picture from webcam with Webcam.js

more information : http://makitweb.com/how-to-capture-picture-from-webcam-with-webcam-js/

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.24/webcam.js"></script>
<!-- CSS -->
<style>
  #my_camera {
    width: 320px;
    height: 240px;
    border: 1px solid black;
  }

</style>

<!-- -->
<div id="camera"></div>

<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
  // Configure a few settings and attach camera
  Webcam.set({
    width: 320,
    height: 240,
    image_format: 'jpeg',
    jpeg_quality: 90
  });
  Webcam.attach('#camera');

</script>

JavaScript

const camera = document.querySelector('#camera > video');
const video = document.createElement("video");
video.setAttribute("id", "video-mock");
const source = document.createElement("source");
//doesnot work with presigned webm from s3
source.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
source.type = "video/mp4";
video.appendChild(source);
video.setAttribute("crossorigin", "anonymous");
video.playsInline = true;
video.loop = true;
video.autoplay = true;
video.oncanplay = () => {
  video.muted = true;
  const stream = video.captureStream();
  camera.srcObject = stream;
};