交叉原點視頻工作HTML5但不是webgl

我想在我的webGL場景中使用流視頻作爲紋理，使用three.js和threex.videoTexture。交叉原點視頻工作HTML5但不是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>

來源

2014-12-03 Ronny vdb

如果您通過Apache服務器提供視頻數據來提供服務，那麼數據不應該是跨源的。瀏覽器不知道Apache從哪裏獲取數據。這似乎是瀏覽器向原始數據源發出請求，而不是您的代理。 – JayC 2014-12-03 20:55:56

@JayC感謝您的評論，我編輯了我的問題以提供有關我的設置的更多信息。我正在使用VLC將視頻流到目的地localhost：8081/desktop.ogg，所以如果我沒有弄錯，我應該向那個目的地提出請求？ – 2014-12-03 21:32:00

等一下，Apache運行的端口是什麼？你甚至使用代理？運行在與託管頁面不同的端口上的服務器將被視爲「跨域」。你確定你不應該有'

從上面的評論，我會建議以下。

確保您實際使用的是代理服務器。 VLC正在流式傳輸到8081.您要確保它是通過Apache進行代理的，並且您在端口8888上運行Apache。
由於代理使您的視頻「同源」，因此您不必使用完整的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專家將不得不對此發表評論。我只相信你的話，那就是設置代理的正確方式，因爲我不知道。

來源

2014-12-03 22:24:56 JayC

你是對的，我沒有通過代理。謝謝你的幫助！ – 2014-12-05 18:58:54

交叉原點視頻工作HTML5但不是webgl

回答

相關問題