将网络摄像头流作为 WebGL 纹理进行操作？

Posted 2023-05-07

【中文标题】将网络摄像头流作为 WebGL 纹理进行操作？

【英文标题】：Manipulate a webcam stream as a WebGL texture?

【发布时间】：2019-10-31 13:06:34

【问题描述】：

将网络摄像头流作为纹理直接获取到 WebGL 的最有效方法是什么？

标准流程（如 Three.js 中所述）是使用 video 标签，然后在 canvas 标签中操作它，然后从 canvas 到 WebGL。

这会增加 CPU 开销，并且 Chrome 会启动一个工作器以将图像数据从相机发送到 GPU（例如每秒 30 次）。

有什么方法可以更有效地做到这一点并减少 CPU 上的渲染/处理？

【问题讨论】：

您不需要视频到画布部分，否则是的，目前除了通过视频元素解码之外，没有其他方法可以访问流的视频数据。不过未来可能会改变。

非常相关：***.com/questions/36690965/…

【参考方案1】：

最简单的方法是简单地将流放在视频 html 元素中，然后将其转换为纹理。这种方式导致低fps。幸运的是，有一个图书馆可以快速完成。我不明白到底是怎么回事（可能是从流本身中提取纹理，或者优化第一种方法）。

https://p5js.org/examples/dom-video-capture.html https://p5js.org/examples/3d-shader-using-webcam.html#

您可以查看源代码以了解他们是如何做到的。 https://github.com/processing/p5.js/

当我比较这两种方法时，第二种方法的结果为 60fps，而第一种方法的着色器为 20fps。