Loading...
Logo
Processing Forum
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 :)

Copy code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>GetUserMedia API and ProcessingJS</title>
  6. </head>
  7. <body>
  8. <video style="display:none;" id="videoOutput" width="500px" height="660px" autoplay></video>
  9. <canvas id="output" width="500px" height="660px" align="center">
  10. <p>Please upgrade your browser to something new like <a href="https://www.google.com/chrome">Google Chrome</a>.</p>
  11. </canvas>
  12. <script type="text/javascript" src="processing-1.4.1.js"></script>
  13. <script type="text/processing" data-processing-target="output">

  14. /*
  15. GetUserMedia script from http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/
  16. */
  17. var video = document.getElementById("videoOutput");

  18. var getUserMedia = function(t, onsuccess, onerror) {
  19. if (navigator.getUserMedia) {
  20. return navigator.getUserMedia(t, onsuccess, onerror);
  21. } else if (navigator.webkitGetUserMedia) {
  22. return navigator.webkitGetUserMedia(t, onsuccess, onerror);
  23. } else if (navigator.mozGetUserMedia) {
  24. return navigator.mozGetUserMedia(t, onsuccess, onerror);
  25. } else if (navigator.msGetUserMedia) {
  26. return navigator.msGetUserMedia(t, onsuccess, onerror);
  27. } else {
  28. onerror(new Error("No getUserMedia implementation found."));
  29. }
  30. };

  31. var URL = window.URL || window.webkitURL;
  32. var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
  33. if (!createObjectURL) {
  34. throw new Error("URL.createObjectURL not found.");
  35. }

  36. getUserMedia({audio:true, video:true},
  37. function(stream) {
  38. var url = createObjectURL(stream);
  39. video.src = url;
  40. },
  41. function(error) {
  42. alert("Couldn’t access webcam.");
  43. }
  44. );

  45. var ctx;
  46. PImage img;
  47. int nb=20;
  48. int numPixels;
  49. int[] previousFrame;
  50. void setup(){
  51. size(500,660);
  52. ctx = externals.context;
  53. // ellipseMode(CORNER);
  54. // smooth();
  55. // numPixels = video.width * video.height;
  56. numPixels = 500 * 660;
  57. // Create an array to store the previously captured frame
  58. previousFrame = new int[numPixels];
  59. loadPixels();
  60. }

  61. void draw(){
  62. pushMatrix();
  63. translate(width,0);
  64. scale(-1,1);//mirror the video
  65. ctx.drawImage(video, 0, 0, width, height); //video is defined inside getUserMedia.js
  66. popMatrix();

  67. //do something
  68. /* img=get();
  69. img.resize(nb,nb);
  70. background(255);
  71. noStroke();
  72. for(int j=0; j<nb; j++){
  73. for(int i=0; i<nb; i++){
  74. fill(img.get(i, j));
  75. ellipse(i*width/nb, j*height/nb, width/nb, height/nb);
  76. }
  77. }
  78. */
  79. img=get()
  80. int movementSum = 0; // Amount of movement in the frame
  81.    for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame...
  82. color currColor = img.pixels[i];
  83. int Icurr=int(currColor);
  84. color prevColor = previousFrame[i];
  85. int Iprev =int(prevColor);
  86. float diff=abs(brightness(currColor)- brightness(prevColor));
  87.  movementSum += diff;
  88.   pixels[i] = color(diff);
  89.    previousFrame[i] = currColor;
  90. }
  91. if (movementSum > 0) {
  92. updatePixels();
  93. //println(movementSum); // Print the total amount of movement to the console
  94. }
  95. }
  96. </script>
  97. </body>
  98. </html>

Replies(5)

Change your processing code by the following:
//Canvas drawing context for the running sketch.
var ctx;
PImage img;
int numPixels;
int[] previousFrame;

void setup(){
	size(window.innerWidth,window.innerHeight-10);
	ctx = externals.context;

	numPixels = width * height;
	previousFrame = new int[numPixels];
	loadPixels();
}

void draw(){
	pushMatrix();//mirror the video
	translate(width,0);
	scale(-1,1);
	ctx.drawImage(video, 0, 0, width, height); //video is defined inside getUserMedia.js
	popMatrix();
	img=get();
	img.loadPixels(); // Make its pixels[] array available
		
	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];
		color prevColor = previousFrame[i];
		// Extract the red, green, and blue components from current pixel
		int currR = (currColor >> 16) & 0xFF; // Like red(), but faster
		int currG = (currColor >> 8) & 0xFF;
		int currB = currColor & 0xFF;
		// Extract red, green, and blue components from previous pixel
		int prevR = (prevColor >> 16) & 0xFF;
		int prevG = (prevColor >> 8) & 0xFF;
		int prevB = prevColor & 0xFF;
		// Compute the difference of the red, green, and blue values
		int diffR = abs(currR - prevR);
		int diffG = abs(currG - prevG);
		int diffB = abs(currB - prevB);
		// Add these differences to the running tally
		movementSum += diffR + diffG + diffB;
		// Render the difference image to the screen
		pixels[i] = color(diffR, diffG, diffB);
		// The following line is much faster, but more confusing to read
		//pixels[i] = 0xff000000 | (diffR << 16) | (diffG << 8) | diffB;
		// Save the current color into the 'previous' buffer
		previousFrame[i] = currColor;
	}
	// To prevent flicker from frames that are all black (no movement),
	// only update the screen if the image has changed.
	if (movementSum > 0) {
		updatePixels();
		println(movementSum); // Print the total amount of movement to the console
	}
}
Makio135
http://makio135.com/
Hi Makio, all,
I am trying to test your code but although I usually can run getusermedia code for example from the openprocessing page since the Chrome browser asks me permission to access the webcam and I grant it, when I write directly code in my PC and open the html file in the Chrome browser an alert from javascript appears (Couldn´t access webcam) and although I change the multimedia exceptions in the chrome configuration nothing changes, again the same error happens.
I am running the lastes release, Chrome 27.
Can anybody help?
Thanks,



Hi all,
To reinforce my previous post, I have tried to upload the code to a real webpage and everything works perfectly, the problem appears when I test the html code locally.
Thanks, 
Most modern browsers doesn't like to run JavaScript, or some advanced parts of JS, in local mode (file:// URLs). For security reasons.
ok, good to know, thanks a lot!!