0

我想使用 p5.js 更新实时视频上的像素，即不通过传递任何视频文件，而只是通过网络摄像头或移动摄像头实时流式传输内容。

使用以下代码捕获视频并加载 bodyPix：

let constraints = {audio: false, video: {facingMode: 'environment'}};
// video capture for live stream
myVideo = createCapture(constraints,
    function(stream) {
        let p5lm = new p5LiveMedia(this, "CAPTURE", stream, "jZQ64AMJc")
        p5lm.on('stream', gotStream);
    }
);

// using tensorflow.js for bodyPix person segmentation
bodyPix.load({
    architecture: 'MobileNetV1',
    outputStride: outputStride,
    multiplier: multiplier,
    quantBytes: 4
})
    .catch(error => {
        console.log(error);
    })
    .then(objNet => {
        model = objNet;
    });

绘制函数被编写为在画布上显示

 function draw() {
// draw the video onto canvas
if (startVideo && myVideo != null) {
    image(myVideo, 10, 10,width - 20,height);
    text("My Video", 10, 10);
    let myVideoPixels = myVideo.get();
    detectBody();
}

调用segmentPerson根据人物分割加载和更新像素

// Inside detectBody, replacing pixels which have value as 0 / 1
function detectBody(){
if (!model) {
    return;
}
model.segmentPerson(document.querySelector('canvas'),  {
    flipHorizontal: false,
    internalResolution: 'full',
    segmentationThreshold: segmentationThreshold,
    scoreThreshold: 0.01
})
    .catch(error => {
        console.log(error);
    })
    .then(personSegmentation => {
        loadPixels();
        for (let x =0; x< width; x++) {
            for (let y=0; y< height; y++) {
                let n = x + (y * width) * 4;

                if (personSegmentation.data[n] === 0) {
                    myVideo.set(x, y, red);
                }
            }
        }
        updatePixels();
    });
}

使用 .set 方法将颜色更新为红色。但这似乎不起作用。我对此很陌生。谁能帮我摆脱这个问题？

谢谢。

4

0 回答 0