如何在实时视频上加载像素和更新像素

问题描述

我想使用 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,width - 20,height);
    text("My Video",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 方法将颜色更新为红色。但这似乎不起作用。我对此很陌生。谁能帮我解决这个问题？

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ml5.js p5.js tensorflow.js