websocket - 使用 WebSockets 流式传输视频并使用 WebGL 渲染

Question

我有一个想法，即在 WebGL 中渲染使用 WebSockets流式传输的视频数据。我知道我们可以将视频数据（一帧）作为纹理从<video>标签导入到 WebGL。但是，我在考虑是否可以改用套接字，以便更好地控制它。这个想法可能吗？

谢谢，易

Answer 1

这家伙使用 WebSocket 实现了简单的网络摄像头共享。他实际上是通过 WebSocket 一次发送一帧作为 Base64 编码的 JPEG 图像，并在收到它后立即将其分配给浏览器端的src属性。<img>

根据该页面，他在 Chrome 上达到了 640×480 @ 30 fps，在 iPhone/iPad 上达到了 320×240 @ 30 fps。

我不明白为什么以后不能使用图像数据来创建 WebGL 纹理：

var textureImg = document.getElementById("myTextureImg");
var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, textureImg);
gl.generateMipmap(gl.TEXTURE_2D);

等等。