捕获HTML画布进行处理

Question

我正在运行一些小型项目，这些项目需要捕获并分析画布的内容。

这是代理Google no-internet dinosaur game的代理商。

我可以使用以下命令从控制台访问画布的内容：

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

但是我一直试图使用HTMLCanvasElement.captureStream()以给定的帧速率或每当画布更改时生成事件。

但是当我将其实现为：

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是一个容器对象，它跟踪自身以保存原始数据流，这些数据是媒体的一部分。音轨将保存原始音频数据流，视频或画布将保存原始视频数据流。

可以在MediaStream中添加或删除轨道，以便将由网络摄像头的视频馈送的MediaStream更改为即将到来的WebRTC等视频。这是onaddtrack事件监视的内容：当MediaStreamTrack为已添加到MediaStream容器中。
它与附加到视频流的帧无关，对于MediaStream，它是 streaming 或 paused 。

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

我不认为有什么方法可以知道何时进行此操作，但是即使有一次操作，您的过程也会非常费事。

1. 在canvas1上绘制
2. 捕获流
3. 在
中渲染流
4. 在canvas2上绘制
5. 处理在canvas2上绘制的图像

您所需要的只是

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

如果要以特定的帧速率进行操作，请设置一个超时循环。