转换相机流并发送给其他人（甚至从非活动选项卡/应用程序）

Question

我正在开发用于修改面部特征的视频通话网站的模块。 本质上，我获取视频流（MediaStream）并返回修改后的流。

目前我正在使用“canvas.captureStream()”来生成更新的流。我使用“requestAnimationFrame”来调用在画布上绘制并最终推送到输出 MediaStram 的转换函数。为了从传入流接收帧，我将其附加到视频中。

只要用户在页面上处于活动状态，此设置就可以正常工作。

但是，如果用户切换到另一个选项卡或另一个应用程序，则会启动浏览器优化并暂停“requestAnimationFrame”。

我尝试了其他替代方案，但无济于事：

1. setTimeout - 浏览器优化将非活动选项卡的超时减少到“1S”
2. Web 工作线程 - 不适合我，因为我有无法在工作线程中完成的 GL 处理。
3. WebRTC 流转换类 - 仅限 Chrome。

请提供任何可以解决我的问题的替代方案 - 转换传入的视频流并生成其他应用程序可以使用的输出流。接收某种回调，即使在非活动选项卡中我也可以执行处理。

我也对其他输入/输出选项持开放态度。

如果需要，我们很乐意提供更多信息。

Answer 1

您正在尝试打破浏览器功耗模型 - 这些限制正是为了防止此类活动。

1. 可能的解决方案是将计时器移至 Worker 并从中启动帧捕获？
2. 您可以使用适用于 Chrome/Edge 的 Insertable Stream 和适用于 Firefox 的 Canvas，如果有 AudioContext，则不会拖曳后台选项卡 (https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) - 是的，没有 Chrome 支持，并且需要两个实现，但目前是这样。将来，当其他浏览器添加 IS 支持时，您可以完全切换到可插入流 - 这是在发送之前处理曲目的最佳方式。