canvas - 将网络摄像头流作为 WebGL 纹理进行操作?

标签 canvas video html5-video webrtc webgl

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

标准过程(如 Three.js 中所述)是使用视频标签,然后在 Canvas 标签中操作它,然后从 Canvas 到 WebGL。

这会增加 CPU 开销,Chrome 会启动一个工作程序以将图像数据从相机发送到 GPU(例如每秒 30 次)。

有没有办法更有效地做到这一点并减少 CPU 上的渲染/处理?

最佳答案

最简单的方法是简单地将流放入视频 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。

关于canvas - 将网络摄像头流作为 WebGL 纹理进行操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56639762/

相关文章:

javascript - Uncaught Error : INVALID_STATE_ERR: DOM Exception 11 with webkitEnterFullScreen

javascript - 让 HTML5 YouTube 播放器适应 UIWebView

javascript - 在 JavaScript Canvas API 中设置允许的绘图区域

Javascript:隐藏 Canvas 对象的笔划

javascript - HTML5 视频 - 开始播放后无法加载资源错误

javascript - 从视频中获取 MediaStreamTrack(audio)

html5-video - 如何在html中为视频添加字幕?

javascript - 尝试从文件目录加载 Canvas 图像

javascript - 更改 Canvas 渐变对象的属性

file - ffmpeg 在写入视频文件时将视频转换为图像