HTML5 Canvas captureStream-高分辨率图像问题

我正在使用HTMl5 Canvas API，专门绘制到画布，然后从中捕获流。我遇到了一个奇怪的问题，似乎无法解决，需要一些帮助。

对于我的设置，我有一个canvas元素和2个输入字段：

就像标记的一样，当我添加颜色时，画布会被涂成该颜色，而当我输入URL时，画布会绘制出图像（获取后）。

所有这些都有效，问题始于captureStream（fps）。

我在页面上添加了一个video元素以显示画布流的输出（用于测试）。

当我更改颜色时，canvas元素会反映所有更改，并且更改也会通过我的video元素中的流反映出来。

现在，我想尝试添加背景图像，因此我输入了图像URL。无论我在该字段中放入多大尺寸的图像，都会产生相同的结果。画布将反映变化并绘制我的图像；但是，更改不会通过流反映出来。流将消失，或者在最后一帧（绘制图像之前）“冻结”。我无法一生找出原因。

我在流中添加了一个回调，例如：

stream.addEventListener('inactive',(event) => {
    console.log(`${event.track.kind} inactive`);
});

该事件从未触发，这使我相信该流仍处于活动状态。

有什么想法吗？预先感谢！

编辑：似乎将画布流的视频轨道设置为静音，但不知道为什么。它不是可设置的选项。来自文档：

“当轨道的源暂时无法提供媒体数据时，将静音事件发送到MediaStreamTrack。当轨道再次能够产生媒体输出时，将发送取消静音事件。”

所以仍然不知道是什么原因造成的。