Camera snapshot

Open camera, Take snapshot, Save image, Close camera

by Osama Qassar

HTML

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<button onclick="start()">Start!</button>
<button onclick="snap()">Snap!</button>
<button onclick="saveImg()">Save!</button>
<button onclick="stop()">Stop</button>
<div id="div"></div>
<video id="vid" width="160" height="120" autoplay></video><br>
<canvas id="preview" width="180" height="150"></canvas>

JavaScript

var start = () =>
  navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
  	vid.srcObject = stream; 
    window.localStream = stream;})
  .catch(log);

var stop = () => 
  localStream.getTracks().forEach((track) => {
    track.stop();
  })

var snap = () => {
  var canvas = document.createElement("canvas");
  canvas.width = 640;
  canvas.height = 480;
  canvas.getContext('2d').drawImage(vid, 0, 0, 640, 480);
  preview.getContext('2d').drawImage(canvas, 0, 0, 160, 120);
}

var saveImg = () => {
	let img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  console.log(img)
	window.location.href=img; 
}

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