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:
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));
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
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) { //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:
file: /Techref/language/java/script/cameras.htm, 6KB, , updated: 2022/4/9 12:35, local time: 2024/10/5 12:47,
35.170.81.33:LOG IN ©2024 PLEASE DON'T RIP! THIS SITE CLOSES OCT 28, 2024 SO LONG AND THANKS FOR ALL THE FISH!
|
©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? <A HREF="http://www.piclist.com/Techref/language/java/script/cameras.htm"> Browser Based Image Processing: Subtraction, Area Sum</A> |
Did you find what you needed? |
PICList 2024 contributors:
o List host: MIT, Site host massmind.org, Top posters @none found - Page Editors: James Newton, David Cary, and YOU! * Roman Black of Black Robotics donates from sales of Linistep stepper controller kits. * Ashley Roll of Digital Nemesis donates from sales of RCL-1 RS232 to TTL converters. * Monthly Subscribers: Gregg Rew. on-going support is MOST appreciated! * Contributors: Richard Seriani, Sr. |
Welcome to www.piclist.com! |
.