使用 three.js 渲染 IP CAMERA 流

Question

我正在尝试将来自 IP 摄像机的视频流渲染到 three.js 纹理，但我找不到具体方法。我正在尝试这样的事情：

....
var video   = document.createElement('video');
video.crossOrigin="anonymous";
video.width = 320;
video.height    = 240;
video.autoplay  = true;
video.loop  = true;

//This works, but it is not from an IP Camera
//video.src="http://video.webmfiles.org/big-buck-bunny_trailer.webm";

//This does not work
video.src="http://webcam01.bigskyresort.com/mjpg/video.mjpg";

this._video = video
var texture;
texture = new THREE.Texture( video );
....

有什么想法吗？

非常感谢！

Answer 1

在 Windows 中，将此命令粘贴到运行 window

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

这将打开一个新的 chrome 浏览器，该浏览器不允许访问 'access-control-allow-origin' header 请求。

它有 security implications，应该只用于测试。

如果没有 --user-data-dir= path，每个人（每个网站）都将能够以您的名义与您的银行、社交网站或您拥有帐户的其他网站进行互动，并且每个人（每个网站）都将能够从您的提供商网站阅读您的邮件，没有任何安全措施阻止它们。所以不要为此使用当前的 session，创建一个新的。

或者您可以安装另一个浏览器实例，并仅将其用于打开页面。

使用 three.js 渲染 IP CAMERA 流

Render IP CAMERA stream with three.js

javascript

tquery

ip-camera

three.js