MediaPipe 自拍分割：尝试从画布捕获流时出错答案

【问题标题】：MediaPipe selfie segmentation: Getting error when trying to capture stream from canvasMediaPipe 自拍分割：尝试从画布捕获流时出错
【发布时间】：2023-02-17 21:03:17
【问题描述】：

我正在尝试对来自我的网络摄像头的图像使用自拍分割。为此，我正在使用 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

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

【问题讨论】：

标签： javascript mediapipe segmentationselfie

【解决方案1】：

处理分割结果每次分割结果返回值时执行

我想首先你需要移动画布流在这个功能之外

另外，您可能会使用画布元素自己捕获流

【讨论】：