捕获HTML画布进行处理

Question

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

它是玩google no-internet恐龙游戏的代理。

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

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而言，它是流传输还是已暂停 。

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

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

1. 在画布上绘制1
2. 捕获流
3. 在<video>中渲染流
4. 在canvas2上绘制<video>
5. 处理在canvas2上绘制的图像

虽然您需要的只是

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

如果要以某个帧速率执行此操作，请设置一个超时循环。