어떻게 크롬 웹캠 API와 processing.js를 사용하여 비디오를 조작 할 수 있습니까?

Question

주제로, 웹캠 및 크롬 웹캠 API를 가지고 놀고 싶습니다. 플러그인이 필요하지 않습니다.

그러나 자바 스크립트 구문에 익숙하지 않아서 processing.js를 사용하여 비디오를 조작하고 싶습니다. 그러면 코드는 어떻게되어야할까요?

캔버스에 사용자 콘텐츠를 넣으시겠습니까? processing.js에 캔버스에 비디오가 있다는 것을 어떻게 알릴 수 있습니까?

import processing.video는 처리하는 대신 processing.js이므로 작동하지 않아야합니다.

Answer 1

이에 따르면 당신은 그들이 웹캠을 제공 수동

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

캔버스에 픽셀을 조작 할 수 있습니다 거기에서

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

: https://github.com/austinhappel/webcam-processingjs/blob/master/js/webcam-processing.js, 당신은 예를 들어 웹캠의 메소드를 호출 할 필요가 여기서 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); 

행운을 빈다. 자바로만이 작업을 수행 했으므로 자바 스크립트와 웹캠으로 좋은 결과를 얻었 으면 알려주십시오. 이 모든 작업을 수행하려면 최신 크롬 빌드가 필요하다고 생각합니다.