Possible to move the canvas offscreen and render in a worker?

[John Deutscher]

Wondering if anyone has tried to move the canvas Offscreen to improve performance and allow for rendering of the video to happen in a Worker. Would that help with backgrounding of tabs? It does not work on mobile browsers of course, but could it improve things on standard browsers that support Offscreen canvas and Workers?

[John Deutscher]

I actually got this working. If you remove the requestAnimationFrame timer calling the updateCanvas, you can replace that with something like the npm worker-timers module and it will now keep the stream running in the background when the tab loses focus.

import * as workerTimers from 'worker-timers';

I replaced these timers (there are two I think...)
requestAnimationRef.current = requestAnimationFrame(updateCanvas);

with this timeOut on the
workerTimerAnimationRef = workerTimers.setTimeout(updateCanvas, (1000/30));

[Matthew McClure]

🤯 Very cool, thanks for the update @johndeu!