javascript - 在后台运行 requestAnimationFrame

Question

我正在使用 requestAnimationFrame 为视频流设置动画，我知道请求动画在后台不起作用，所以有什么方法可以让它在后台运行。

我知道我们也可以使用 setInterval 或 setTimeout 制作动画，但是当我使用这些时，动画无法正常工作并且视频流中的图像在闪烁。

这是我的代码:

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

我猜你运气不好。 requestAnimationFrame 有意在后台暂停，因为动画没有理由在后台运行，正如您提到的 setInterval 和 setTimeout 不是为动画设计的，不应该这样使用。

您提到您需要为视频流制作动画。你是说你在视频标签上应用动画，还是通过 Canvas 元素改变视频元素的外观？在这两种情况下，你都不应该在后台继续这样做，但你可以给 computeFrame (仅限 Firefox)a go，视频的每一帧都会触发一次。还是您实际上是通过连续动画一组静态图像来伪造视频流？在那种情况下，您为什么不使用视频元素？