Browser Based Video Processing:

Also: Image processing in the browser

As of 2019/08/22 (this appears to change daily), the accepted method of accessing the users camera in a web page is:

1. Have a <video> tag, with the autoplay attribute set and an id (e.g. 'video') 
2. Call navigator.mediaDevices.getUserMedia() with a set of "selectors "(an object) that filters to only cameras: {video:true} to get a promised stream. This will query the user for permission, which will be linked to your URL.

     navigator.mediaDevices.getUserMedia({video: true})
     .then(mediaStream => {
       document.querySelector('video').srcObject = mediaStream;
   
       const track = mediaStream.getVideoTracks()[0];
       imageCapture = new ImageCapture(track);
     })
     .catch(error => console.log(error));
   

3. Call .takePhoto() from the ImageCapture object based on the streams first video track, .getVideoTracks()[0] with a promised bitmap

   function onGrabFrameButtonClick() {
     imageCapture.grabFrame()
     .then(imageBitmap => {
       const canvas = document.querySelector('#grabFrameCanvas');
       drawCanvas(canvas, imageBitmap);
     })
     .catch(error => ChromeSamples.log(error));
   }
   

   
   OR...
   
   You can just draw the video into a 2d canvas context. e.g.

     let ctx = canvas.getContext('2d')
     ctx.drawImage(video, 0, 0)
   

See: https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html

But only over https

Note: Chrome (and soon other browsers) will not allow access to the Camera from any page that was not loaded over an https: connection. However, you can tell Chrome to trust it anyway by:

• Navigate to chrome://flags/#unsafely-treat-insecure-origin-as-secure
• Enable it
• Add the URL to trust. E.g. "http://192.168.4.1"
• Close Chrome and restart it.

Unfortunately, on the Android OS version of Chrome, the command line argument specified for the URL is NOT retained.

Video Stream, Frame Capture, Subtraction, Area Sum
<H2>
 Show Difference
</H2>
 This page uses the camera to show differences over time and
 summarize those changes as being in the left, right, or top
 center of the area.
 <BR>
 Press Video to start using
 the camera. It needs to be able to support 180x120 format.
 Press Capture or click the video to display the difference, 
 or press Start to display one difference per second. Press
 Stop to stop. 
<P>
<input type="button" id="capture-button" value="Video">
<br><video autoplay id="my-video"></video>
<br><input type="button" id="screenshot-button" value="Capture">
<input type="button" id="start-button" value="Start">
<input type="button" id="stop-button" value="Stop">
<br><span id="results"></span>
<br><img id="my-image" src="">
<canvas style="display:none;"></canvas>
<script>
const thresh = 50
function byId(id) {return document.getElementById(id)}
const captureVideoButton =  byId("capture-button")
const screenshotButton = byId("screenshot-button")
const startButton = byId("start-button")
const stopButton = byId("stop-button")
const img = byId('my-image');
const video = byId('my-video');
var interval
var saved

const canvas = document.createElement('canvas')
const constraints = { video: {width: {exact: 90}, height: {exact: 60} } }
captureVideoButton.onclick = function() {
  navigator.mediaDevices.getUserMedia(constraints).
  then((stream) => {video.srcObject = stream})
}

function arraySum(data) {
//https://jsperf.com/array-reduce-vs-foreach/2
	let total = 0
  for (let i=0, n=data.length; i<n; i++) {
  	total += data[i]
  	}
  return total
	}

screenshotButton.onclick = video.onclick = function() {
  let w = canvas.width = video.videoWidth;
  let h = canvas.height = video.videoHeight;
  let leftwidth=Math.floor(w/3)
  let rightwidth=Math.floor(w/3)
  let centerwidth=w - leftwidth - rightwidth
  let ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0)
  // Other browsers will fall back to image/png
	if (!saved) saved = ctx.getImageData(0, 0, w, h)
	let imageData = ctx.getImageData(0,0, w, h)
	let data = imageData.data

  for (let i = 0; i < data.length; i += 4) {
  		let r=i, g=i+1, b=i+2
      data[r] = Math.abs(saved.data[r] - data[r]);     // red
      data[g] = Math.abs(saved.data[g] - data[g]); // green
      data[b] = Math.abs(saved.data[b] - data[b]); // blue
      if (data[r] < thresh) data[r]=0
      if (data[g] < thresh) data[g]=0
      if (data[b] < thresh) data[b]=0
    }
  saved = ctx.getImageData(0, 0, w, h)
  ctx.putImageData(imageData, 0, 0)
  img.src = canvas.toDataURL('image/webp')
  //sum remaining image by area
  let leftside = arraySum(ctx.getImageData(0, 0, leftwidth, h).data)
  let rightside = arraySum(ctx.getImageData(w-rightwidth,0,rightwidth,h).data)
  let centertop = arraySum(ctx.getImageData(
  	leftwidth, 0, centerwidth, Math.floor(h/2)
    ).data)
  //subtract out the alpha channels
  leftside -= leftwidth*h*255
  rightside -= rightwidth*h*255
  centertop -= centerwidth * Math.floor(h/2) * 255
  byId("results").innerHTML = "left:"+leftside+" center:"+centertop+" right:"+rightside
};

startButton.onclick = function() {
  interval = setInterval(function(){video.onclick()},1000)
}

stopButton.onclick = function() {
  clearInterval(interval)
}


</script>

See also:

• https://github.com/anvaka/oflow Optical Flow (Lucas-Kande Method). See FlowCalculator.js in src folder.+
• https://docs.opencv.org/trunk/js_face_detection_camera.html Face recognition in the web browser with Javascript (!) using OpenCV.js+

  .