在后台运行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不是为动画而设计的，也不应该这样使用。

您提到需要对视频流进行动画处理。您的意思是在视频标签上应用动画，或者通过画布元素更改视频元素的外观？在这两种情况下，你都不应该在后台继续这样做，但你可以尝试一下computeFrame (仅限火狐)，它将在视频的每一帧中触发一次。或者，您实际上是通过连续设置一组静态图像的动画来伪造视频流？在这种情况下，为什么不使用video元素呢？