JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="doTest(true)">
use dom canvas
</button>
<br>
<button onclick="doTest(false)">
do not use dom canvas
</button>
<br>
original video
<video id="video" autoplay playsInline controls width=200px></video><br>
canvas-in-dom video
<video id="canvas1Video" autoplay playsInline controls width=200px></video><br>
canvas-not-in-dom video
<video id="canvas2Video" autoplay playsInline controls width=200px></video><br>
canvas
<canvas id="canvas2"></canvas>

JavaScript

async function processStream(mediaStream, useDOMCanvas)
{ 
    const settings = mediaStream.getVideoTracks()[0].getSettings(); 
    const canvas = useDOMCanvas ? canvas2 : document.createElement('canvas'); 
    const ctx = canvas.getContext('2d'); 
    canvas.width = settings.width; 
    canvas.height = settings.height;

    const loop = () => { 
        if (!video.paused && !video.ended) { 
            ctx.drawImage(video, 0, 0); 
            setTimeout(loop,1000 /66);  
        } 
    }; 
    loop(); 

		const canvasVideo = useDOMCanvas ? canvas1Video : canvas2Video;
		canvasVideo.srcObject = canvas.captureStream();
    canvasVideo.play();
}

function doTest(useDOMCanvas)
{
    navigator.mediaDevices.getUserMedia({video:true}).then(async s => {
        video.srcObject = s; 
        video.autoplay = true; 
        await video.play();
        processStream(s, useDOMCanvas);
    });
}