我正在运行一些小型项目，这些项目需要捕获并分析画布的内容。
它是播放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次，但没有任何调用。我对流有误解吗？ 最佳答案
HTMLCanvasElement.captureStream返回MediaStream。此MediaStream最初由特殊类型的MediaStreamTrack组成：CanvasCaptureMediaStreamTrack只是简单的特殊视频轨道，带有指向原始HTMLCanvasElement的链接。
在这个阶段，这听起来还是外国语言。
MediaStream是一个容器对象，它跟踪自身以保存原始数据流，这些数据是媒体的一部分。音轨将保存原始音频数据流，视频或画布将保存原始视频数据流。
可以在MediaStream中添加或删除轨道，以便将由网络摄像机的视频提供的MediaStream更改为即将到来的WebRTC等视频。这是onaddtrack事件监视的内容：将MediaStreamTrack添加到MediaStream容器时。
它与将帧添加到视频流无关，对于MediaStream，它是流传输还是已暂停。
因此，您的MediaStream包含从画布当前状态生成的视频数据流。
从画布捕获的流具有此特殊功能，您可以要求浏览器以最大频率将新帧附加到
视频流。但是，这仅仅是一个最大值。如果在画布上没有绘制任何新图像，则不会添加任何图像，并且流将继续显示最后添加的图像。
我不认为有什么方法可以知道何时执行此操作，但是即使有一次操作，您的过程也很费时。
在画布上绘制1
捕获流
在中渲染流
在canvas2上绘制
处理在canvas2上绘制的图像
虽然您需要的只是
在画布上绘制1
处理在canvas1上绘制的图像
如果要以某个帧速率执行此操作，请设置一个超时循环。