Run requestAnimationFrame in background

Question

I am using requestAnimationFrame to animate video streams and I know that request animation does not work in backgrounds so is there any way to make it run on background.

I know that we can animate using setInterval or setTimeout too but when I use these, animations were not work properly and images on video stream were blinking.

Here is my code:

const drawFrame = function drawFrame() {
            if (!ctx) {
                ctx = canvas.getContext('2d');
            }
            if (!tmpCanvas) {
              tmpCanvas = document.createElement('canvas');
              tmpCtx = tmpCanvas.getContext('2d');
              tmpCanvas.width = canvas.width;
              tmpCanvas.height = canvas.height;
            }
            tmpCtx.drawImage(videoElement, 0, 0, tmpCanvas.width, tmpCanvas.height);
            const imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
            const data = selectedFilter(imgData);
            ctx.putImageData(data, 0, 0);
            if (!stopped) {
              requestAnimationFrame(drawFrame);
            } else {
              tmpCanvas = null;
              tmpCtx = null;
              ctx = null;
            }
        };
        requestAnimationFrame(drawFrame);

Answer 1

I guess you are out of luck. requestAnimationFrame intentionally pauses in the background because animations have no reason to be running in the background, and as you mention setInterval and setTimeout are not designed for animation and should not be used as such.

You mention that you need to animate a video stream. Do you mean that you are applying an animation on top of a video tag, or changing the appearance of the video element via a canvas element? In both cases, you shouldn't continue to do so in the background anyway, but you may give computeFrame (Firefox only) a go, which will fire once every frame of the video. Or is it that you are actually faking a video stream by animating a set of static images in succession? In that case, why are you not using the video element?