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（仅限Firefox）一个go，它将在视频的每一帧发射一次。或者你是通过连续制作一组静态图像来伪造视频流？在这种情况下，你为什么不使用视频元素？

在后台运行requestAnimationFrame

1 个答案: