MediaPipe 自拍分段：尝试从画布捕获流时出现错误

Question

我正在尝试对网络摄像头的图像使用自拍分割。为此，我使用 MediaPipe 库。

这是我的代码

const selfieSegmentation = new SelfieSegmentation({locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
}});
selfieSegmentation.setOptions({
    modelSelection: 1,
});
selfieSegmentation.onResults(handleSegmentationResults);

videoElement.addEventListener('playing', function () {
    selfieSegmentation.send({image: this})
})

这是我获取分割结果并绘制画布的地方：

const videoElement = document.getElementById('myVideo');
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const controlsElement = document.getElementsByClassName('control-panel')[0];
const canvasCtx = canvasElement.getContext('2d');
const img = document.getElementById('vbackground');

function handleSegmentationResults(results) {
    canvasCtx.save();

    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
    canvasCtx.globalCompositeOperation =  'source-in'; 
    canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);

    // // Make all pixels not in the segmentation mask transparent
    canvasCtx.globalCompositeOperation = 'destination-atop';
    canvasCtx.drawImage(results.segmentationMask, 0, 0, canvasElement.width, canvasElement.height);

    canvasCtx.globalCompositeOperation = 'destination-over';
    canvasCtx.drawImage(img, 0, 0, canvasElement.width, canvasElement.height);

    canvasCtx.restore();
    //here is where I'm getting the error
    const canvasStream = canvasCtx.canvas.captureStream();
}

我想捕获画布流，以便将其放置在我的视频元素上。但是当我尝试使用 canvasCtx.canvas.captureStream() 方法时，我收到此错误：

未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“captureStream”：画布不是原始干净的。 在评估（在handleSegmentationResults评估（http://localhost:3000/js/host.js:1570:9），：1:18） 在handleSegmentationResults (http://localhost:3000/js/host.js:1570:9) 在 https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js:88:322

有谁知道另一种捕获流的方法或者我做错了什么？谢谢！

Answer 1

handleSegmentationResults每次分段结果返回某些内容时都会执行

我想首先你需要将 canvasStream 移到这个函数之外

此外，您可以使用 canvasElement 本身来捕获流