Modern insta snapshot

by jib1

HTML

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<button onclick="snap()">Snap!</button><div id="div"></div>
<video id="video" width="160" height="120" autoplay></video><br>
<canvas id="canvas" width="160" height="120"></canvas>

JavaScript

var snap = () => navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    return new Promise(resolve => video.onplaying = resolve);
  })
  .then(() => canvas.getContext('2d').drawImage(video, 0, 0, 160, 120))
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;