如何使用Chrome网络摄像头API和processing.js来处理视频? [英] How can i use chrome webcam API and the processing.js to manipulate the video?

问题描述

作为主题， 我想使用网络摄像头，而chrome网络摄像头API派上用场了，不需要插件.

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

但是，我对javascript语法并不熟悉，因此我仍然想使用processing.js来处理视频. 那么代码应该如何?

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在画布中，然后?我如何告诉processing.js画布中有一个视频?

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

导入processing.video应该不起作用，因为它是processing.js而不是处理.

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

推荐答案

据此:

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();

他们在此处提供了一个调用getUserMedia的WEBCAM类: https: //github.com/austinhappel/webcam-processingjs/blob/master/js/webcam.js

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

关键行在这里:

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);

祝你好运！我只是用Java完成此操作，所以请让我们知道您是否使用javascript和网络摄像头可以很好地播放游戏.我想您需要使用最新版本的chrome才能使其正常工作.

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.

这篇关于如何使用Chrome网络摄像头API和processing.js来处理视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！