brianmed/canvasWithWorker.html

## canvasWithWorker.html
<html>
  <head>
    <title>Joy</title>
  </head>

  <body>
    <button id="joy-button">Joy</button>
    <canvas id="canvas0" width="1280" height="720"></canvas>

    <script>
        let canvasOffscreen = null;
        let videoWorker = null;

        let btn = document.querySelector("#joy-button")
        btn.addEventListener("click", startCanvas);

        (async function() {
            canvasOffscreen = document.querySelector('#canvas0').transferControlToOffscreen();
            videoWorker = new Worker('canvasWithWorkerVideo.js');
        }());

        async function startCanvas()
        {
            var constraints =
            {
                audio:
                {
                    // noiseSuppression: true,
                    // echoCancellation: true,
                    channelCount: 2
                },
                video:
                {
                    facingMode: "user",
                    width: { min: 1280, ideal: 1280, max: 1280 },
                    height: { min: 720, ideal: 720, max: 720 }
                }
            };

            const stream = await navigator.mediaDevices.getUserMedia(constraints);

            const videoTrack = stream.getVideoTracks()[0];
            const videoTrackProcessor = new MediaStreamTrackProcessor(videoTrack);
            const videoReader = videoTrackProcessor.readable;

            videoWorker.postMessage({ canvasOffscreen: canvasOffscreen, videoReader: videoReader }, [canvasOffscreen, videoReader]);
        }
    </script>
  </body>
</html>

## canvasWithWorkerVideo.js
let canvasOffscreen = null;
let canvasCtx = null;

onmessage = async (e) =>
{
    canvasOffscreen = e.data.canvasOffscreen;

    canvasCtx = canvasOffscreen.getContext("2d");

    let videoReader = e.data.videoReader.getReader();

    let videoFrameCounter = 0;

    while (true)
    {
        const videoReaderResult = await videoReader.read();

        if (videoReaderResult.done)
        {
            break;
        }

        const videoFrameFromCamera = videoReaderResult.value;

        videoFrameCounter++;

        canvasCtx.drawImage(videoFrameFromCamera, 0, 0);

        videoFrameFromCamera.close();
    }
}
	<html>
	<head>
	<title>Joy</title>
	</head>

	<body>
	<button id="joy-button">Joy</button>
	<canvas id="canvas0" width="1280" height="720"></canvas>

	<script>
	let canvasOffscreen = null;
	let videoWorker = null;

	let btn = document.querySelector("#joy-button")
	btn.addEventListener("click", startCanvas);

	(async function() {
	canvasOffscreen = document.querySelector('#canvas0').transferControlToOffscreen();
	videoWorker = new Worker('canvasWithWorkerVideo.js');
	}());

	async function startCanvas()
	{
	var constraints =
	{
	audio:
	{
	// noiseSuppression: true,
	// echoCancellation: true,
	channelCount: 2
	},
	video:
	{
	facingMode: "user",
	width: { min: 1280, ideal: 1280, max: 1280 },
	height: { min: 720, ideal: 720, max: 720 }
	}
	};

	const stream = await navigator.mediaDevices.getUserMedia(constraints);

	const videoTrack = stream.getVideoTracks()[0];
	const videoTrackProcessor = new MediaStreamTrackProcessor(videoTrack);
	const videoReader = videoTrackProcessor.readable;

	videoWorker.postMessage({ canvasOffscreen: canvasOffscreen, videoReader: videoReader }, [canvasOffscreen, videoReader]);
	}
	</script>
	</body>
	</html>
	let canvasOffscreen = null;
	let canvasCtx = null;

	onmessage = async (e) =>
	{
	canvasOffscreen = e.data.canvasOffscreen;

	canvasCtx = canvasOffscreen.getContext("2d");

	let videoReader = e.data.videoReader.getReader();

	let videoFrameCounter = 0;

	while (true)
	{
	const videoReaderResult = await videoReader.read();

	if (videoReaderResult.done)
	{
	break;
	}

	const videoFrameFromCamera = videoReaderResult.value;

	videoFrameCounter++;

	canvasCtx.drawImage(videoFrameFromCamera, 0, 0);

	videoFrameFromCamera.close();
	}
	}