first.html

<video style="display:none;" autoplay></video>
<img src="">
<canvas width="800" height="600" style="display:none;"></canvas>

<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

var errorCallback = function(e) {
	console.log('Reeeejected!', e);
};

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;

function snapshot() {
	if (localMediaStream) {
		console.log('snap');
		ctx.drawImage(video, 0, 0);
		var img = new Image();
		img.src = canvas.toDataURL('image/png');
		document.body.insertBefore(img, document.body.firstChild);
	}
}

setInterval(snapshot, 1000);

navigator.getUserMedia({video: true}, function(stream) {
	var video = document.querySelector('video');
	video.src = window.URL.createObjectURL(stream);
	localMediaStream = stream;
}, errorCallback);
</script>