How can i use chrome webcam API and the processing.js to manipulate the video?

问题

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.

回答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.

来源：https://stackoverflow.com/questions/12719294/how-can-i-use-chrome-webcam-api-and-the-processing-js-to-manipulate-the-video