javascript - 捕获 html Canvas 进行处理

Question

我正在运行需要捕获和分析 Canvas 内容的小型项目。

是玩google的agent no-internet dinosaur game .

我可以从控制台访问 Canvas 的内容:

canvas = document.getElementById("gamecanvas");
context = canvas.getContext("2d");
imgData = context.getImageData(0,0,600,150);

但我一直在尝试使用 HTMLCanvasElement.captureStream() 以给定帧速率或 Canvas 更改时生成事件。

但是当我将它实现为:

const canvas = document.getElementById("gamecanvas");
const stream = canvas.captureStream(25)
stream.onaddtrack = function(event) { console.log("Called") }

我希望 console.log("Called") 每秒被调用 25 次，但没有任何调用。我对流有什么误解吗？

Answer 1

HTMLCanvasElement.captureStream 返回一个 MediaStream。此 MediaStream 最初由一种特殊的 MediaStreamTrack 组成: 一个 CanvasCaptureMediaStreamTrack这只是一个特殊的视频轨道，带有指向原始 HTMLCanvasElement 的链接。

这在现阶段听起来可能还是外语...
MediaStream 是一个容器对象，其中包含轨道本身，其中包含原始数据流，这些数据是媒体的一部分。音轨将保存原始音频数据流，视频或 Canvas 将保存原始视频数据流。

可以在 MediaStream 中添加或删除轨道，以便将网络摄像头视频提供的 MediaStream 更改为来自 webRTC 等的视频。这就是 onaddtrack 事件监控的内容:一个 MediaStreamTrack 被添加到 MediaStream 容器中。
它与附加到视频流的帧无关，对于 MediaStream，它是streaming 或paused。

因此您的 MediaStream 包含从 Canvas 当前状态生成的视频数据流。
从 Canvas 捕获的流具有这种特殊性，您可以要求浏览器应以哪种最大频率将新帧附加到视频流。但是，这只是最大值；如果 Canvas 上没有绘制任何新图像，则不会附加任何图像，并且流将继续显示最后附加的图像。

我认为没有任何方法可以知道此操作何时发生，但即使有，您的过程也会非常复杂。

1. 在 Canvas 上绘图1
2. 捕获流
3. 在
4. 在canvas2上绘制
5. 处理画在canvas2上的图像

虽然你只需要

1. 在 Canvas 上绘图1
2. 处理画在canvas1上的图像

如果您想以特定的帧速率执行此操作，请设置超时循环。