I need to extract the background from the real-time video and replace it with an image.
The code you created has completed the background and person extraction, but the background is not deleted.
It’s a basic function, but I can’t solve it alone, so I’d appreciate it if you could help me.
This is my code
<body>
<div class="container">
<video class="input_video" width="640px" height="480px"></video>
<canvas class="output_canvas" width="640px" height="480px"></canvas>
</div>
<script type="module">
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = document.getElementsByClassName('output_canvas')[0];
const canvasCtx = canvasElement.getContext('2d');
function onResults(results) {
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.segmentationMask, 0, 0,
canvasElement.width, canvasElement.height);
// Only overwrite existing pixels.
canvasCtx.globalCompositeOperation = 'source-in';
canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.segmentationMask = 'source-out';
// Only overwrite missing pixels.
canvasCtx.globalCompositeOperation = 'destination-atop';
canvasCtx.drawImage(
results.image, 0, 0, canvasElement.width, canvasElement.height);
canvasCtx.restore();
}
const selfieSegmentation = new SelfieSegmentation({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
}});
selfieSegmentation.setOptions({
modelSelection: 1,
selfieMode: true,
effect: 'mask',
});
selfieSegmentation.onResults(onResults);
const camera = new Camera(videoElement, {
onFrame: async () => {
await selfieSegmentation.send({image: videoElement});
},
width: 640,
height: 480
});
camera.start();
</script>
</body>
