<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Marc Grabanski</title>
</head>
<body>
<video id="webcam"></video>
<canvas id="c1" width="640" height="480"></canvas>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1Marc/a-pen-by-marc-grabanski-HGxdg */
navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true, audio: true
}, onSuccess, onError);
} else {
alert('getUserMedia is not supported in this browser.');
}
function onSuccess(stream) {
var video = document.getElementById('webcam');
var videoSource;
videoSource = window.URL.createObjectURL(stream);
video.autoplay = true;
video.src = videoSource;
var c1 = document.getElementById("c1");
var ctx = c1.getContext("2d");
computeFrame(video, ctx);
}
function onError() {
alert('There has been a problem retreiving the streams');
}
function computeFrame(video, ctx) {
ctx.drawImage(video, 0, 0, video.width, video.height);
var frame = ctx.getImageData(0, 0, video.width, video.height);
var l = frame.data.length / 4;
for (var i = 0; i < l; i++) {
var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
frame.data[i * 4 + 0] = grey;
frame.data[i * 4 + 1] = grey;
frame.data[i * 4 + 2] = grey;
}
ctx.putImageData(frame, 0, 0);
return;
}