please dont rip this site

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() {
      .then(imageBitmap => {
        const canvas = document.querySelector('#grabFrameCanvas');
        drawCanvas(canvas, imageBitmap);
      .catch(error => ChromeSamples.log(error));


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

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


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:

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) { // 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 = for (let i = 0; i < data.length; i += 4) { let r=i, g=i+1, b=i+2 data[r] = Math.abs([r] - data[r]); // red data[g] = Math.abs([g] - data[g]); // green data[b] = Math.abs([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:

file: /Techref/language/java/script/cameras.htm, 6KB, , updated: 2022/4/9 12:35, local time: 2024/7/20 00:16,

 ©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?
Please DO link to this page! Digg it! / MAKE!

<A HREF=""> Browser Based Image Processing: Subtraction, Area Sum</A>

After you find an appropriate page, you are invited to your to this massmind site! (posts will be visible only to you before review) Just type a nice message (short messages are blocked as spam) in the box and press the Post button. (HTML welcomed, but not the <A tag: Instead, use the link box to link to another page. A tutorial is available Members can login to post directly, become page editors, and be credited for their posts.

Link? Put it here: 
if you want a response, please enter your email address: 
Attn spammers: All posts are reviewed before being made visible to anyone other than the poster.
Did you find what you needed?


Welcome to!


Welcome to!