A Pen by Marc Grabanski

/*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;
}