processingjs + webcam + frame differencing
in
Processing with Other Languages
•
9 months ago
quite new to processingjs I try to to frame differencing from the webcam
and I get nothing !
here is "my" code, in fact a copy/paste from different sources ;)
including makio135 for the "getusermedia" part and
Golan Levin for Frame Differencing.
any help would be welcomed :)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>GetUserMedia API and ProcessingJS</title>
- </head>
- <body>
- <video style="display:none;" id="videoOutput" width="500px" height="660px" autoplay></video>
- <canvas id="output" width="500px" height="660px" align="center">
- <p>Please upgrade your browser to something new like <a href="https://www.google.com/chrome">Google Chrome</a>.</p>
- </canvas>
- <script type="text/javascript" src="processing-1.4.1.js"></script>
- <script type="text/processing" data-processing-target="output">
- /*
- GetUserMedia script from http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/
- */
- var video = document.getElementById("videoOutput");
- var getUserMedia = function(t, onsuccess, onerror) {
- if (navigator.getUserMedia) {
- return navigator.getUserMedia(t, onsuccess, onerror);
- } else if (navigator.webkitGetUserMedia) {
- return navigator.webkitGetUserMedia(t, onsuccess, onerror);
- } else if (navigator.mozGetUserMedia) {
- return navigator.mozGetUserMedia(t, onsuccess, onerror);
- } else if (navigator.msGetUserMedia) {
- return navigator.msGetUserMedia(t, onsuccess, onerror);
- } else {
- onerror(new Error("No getUserMedia implementation found."));
- }
- };
- var URL = window.URL || window.webkitURL;
- var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
- if (!createObjectURL) {
- throw new Error("URL.createObjectURL not found.");
- }
- getUserMedia({audio:true, video:true},
- function(stream) {
- var url = createObjectURL(stream);
- video.src = url;
- },
- function(error) {
- alert("Couldn’t access webcam.");
- }
- );
- var ctx;
- PImage img;
- int nb=20;
- int numPixels;
- int[] previousFrame;
- void setup(){
- size(500,660);
- ctx = externals.context;
- // ellipseMode(CORNER);
- // smooth();
- // numPixels = video.width * video.height;
- numPixels = 500 * 660;
- // Create an array to store the previously captured frame
- previousFrame = new int[numPixels];
- loadPixels();
- }
- void draw(){
- pushMatrix();
- translate(width,0);
- scale(-1,1);//mirror the video
- ctx.drawImage(video, 0, 0, width, height); //video is defined inside getUserMedia.js
- popMatrix();
- //do something
- /* img=get();
- img.resize(nb,nb);
- background(255);
- noStroke();
- for(int j=0; j<nb; j++){
- for(int i=0; i<nb; i++){
- fill(img.get(i, j));
- ellipse(i*width/nb, j*height/nb, width/nb, height/nb);
- }
- }
- */
- img=get()
- int movementSum = 0; // Amount of movement in the frame
- for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
- color currColor = img.pixels[i];
- int Icurr=int(currColor);
- color prevColor = previousFrame[i];
- int Iprev =int(prevColor);
- float diff=abs(brightness(currColor)- brightness(prevColor));
- movementSum += diff;
- pixels[i] = color(diff);
- previousFrame[i] = currColor;
- }
- if (movementSum > 0) {
- updatePixels();
- //println(movementSum); // Print the total amount of movement to the console
- }
- }
- </script>
- </body>
- </html>
1