1

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

它是一个玩谷歌无互联网恐龙游戏的代理。

我可以从控制台访问画布的内容：

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 次，但没有被调用。我对流有误解吗？

4

1 回答 1

2

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上绘制的图像

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

于 2019-02-09T00:04:31.430 回答