0

As topic, I want to play with the webcam and chrome webcam API comes in handy, no plugin is needed.

However, I am not familiar with javascript syntax, so I still want to use processing.js to manipulate the video. So how should the code be like?

GetUserMedia in the canvas,then? How can i tell the processing.js that there is a video in the canvas?

import processing.video should not work because it is processing.js instead of processing.

kikkpunk
  • 1,287
  • 5
  • 22
  • 34

1 Answers1

1

According to this: https://github.com/austinhappel/webcam-processingjs/blob/master/js/webcam-processing.js , you need to call the webcam's method, e.g.:

ctx.drawImage(myImg, imageOffset, 0, height / width * nb, nb);

from there on you can manipulate the pixels on the canvas manually

p.loadPixels();
imgPixelData = p.pixels.toArray();

They provide a WEBCAM class here that calls getUserMedia: https://github.com/austinhappel/webcam-processingjs/blob/master/js/webcam.js

Key lines are here:

if (navigator.getUserMedia) {
  navigator.getUserMedia({video: true}, function (stream) {
    self.video.src = stream;
    self.localMediaStream = stream;
  }, onWebcamFail);
} else if (navigator.webkitGetUserMedia) {
  navigator.webkitGetUserMedia({video: true}, function (stream) {
    self.video.src = window.webkitURL.createObjectURL(stream);
    self.localMediaStream = stream;
}, onWebcamFail);

Good luck! I've only done this in Java, so let us know if you get javascript and the webcam to play nice. I presume you need the newest build of chrome for any of this to work.

Arcymag
  • 1,037
  • 1
  • 8
  • 18
  • thank you. So I learn from this example but i still got stuck http://stackoverflow.com/questions/12726739/chrome-webcam-api-with-processing-js-how-to-show-video And i try another method and it does not work either http://stackoverflow.com/questions/12729073/chrome-webcam-api-with-processing-js-video-does-not-display dont know what's wrong. – kikkpunk Oct 05 '12 at 00:34