javascript - 跨源视频可以工作 html5 但不能工作 webgl

Question

我正在尝试使用 Three.js 和 Threex.videoTexture 在我的 webGL 场景中使用流式视频作为纹理。

我理解阻止跨源资源的原因，经过大量研究，我通过在我的 apache 服务器中设置代理设置，设法将其放入 html5 视频标签中:)。

但是，即使我可以看到在 Html5 视频标签中播放的视频，当我将视频应用为 webGl 中的纹理时，我收到以下错误:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

我确实听到了视频的声音，但我没有在对象上看到视频。

工作的 html5 视频标签没有将 crossorigin 参数设置为“匿名”，但它仍然有效。当我在 webGL 中使用的视频元素上添加 crossorigin 参数时，我没有收到错误，但我听不到声音也看不到视频

我真的很感激任何建议! TIA!

我使用的代码取自本教程:http://learningthreejs.com/blog/2014/04/30/easy-way-to-integrate-video-or-even-webcam-in-your-texture-with-threex-dot-videotexture-game-extension-for-three-dot-js/

编辑: 这是我添加到 httpd.conf 来配置代理设置的内容:

ProxyRequests On
ProxyVia On
ProxyPreserveHost On

<Proxy *>
    Order allow,deny
    Allow from all
</Proxy>

# VLC server stream

ProxyPass /desktop.ogg http://localhost:8081/desktop.ogg
ProxyPassReverse /desktop.ogg http://localhost:8081/desktop.ogg

这是我的 htm5 视频标签(工作):

<video id="video" src="http://localhost:8081/desktop.ogg" autoplay>  
    Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code> element.  
</video> 

Answer 1

根据上面的评论，我将提出以下建议。

1. 确保您确实在使用代理。 VLC 正在流式传输到 8081。您需要确保它是通过 Apache 代理的，您声明 Apache 在端口 8888 上运行。
2. 由于代理使您的视频“同源”，因此您不必使用完整的 uri 来引用它；您只需要准确地引用您需要的内容即可。 (这就是代理的目的，使资源看起来来自同一来源)。同一台机器上两个不同端口上的HTTP服务器仍然不是同源的。

修改后的代码如下:

 <video id="video" src="/desktop.ogg" autoplay>  
    Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code> element.  
 </video> 

我不能说这些代理设置是否正确。一些 Apache 专家将不得不对此发表评论。我只相信你的话，即这是设置代理的正确方法，因为我不知道。