javascript - 三.js 中 Canvas 上的 IP 摄像机流

Question

我被要求解决一个看似简单的 JavaScript 任务，但可以这么说，我对此并不熟悉。我需要获取 IP 摄像头流并将其放入 Three.js Canvas 上。

我从这个使用网络摄像头而不是 IP 摄像头的示例开始: http://stemkoski.github.io/Three.js/Webcam-Texture.html

其中有一个视频标签，如下所示:

<video id="monitor" autoplay width="160" height="120" style="visibility: hidden; float:left;"></video>

我相信稍后会调用:

    video = document.getElementById( 'monitor' );

所以，就像我说的，我对 javascript 不太了解，但我希望将本例中对网络摄像头的调用替换为对 IP 摄像头的调用会相对简单。我尝试简单地将标签替换为新标签:

<video controls src="http://[wowza-address]:1935/live/camera.stream/playlist.m3u8">
</video>

但这没有用。显然它比我最初预期的要复杂。谁能引导我走向正确的方向？

Answer 1

已解决。

var imageDetect = document.createElement('img');

imageDetect.src = BaseURL + File;

            function render() {

            imageContext.drawImage( imageDetect, 0, 0 );

            if ( texture ) texture.needsUpdate = true;
            if ( textureReflection ) textureReflection.needsUpdate = true;

            renderer.render( scene, camera );

        }