Cross origin video working html5 but not webgl

Question

I am trying to use a streamed video as texture in my webGL scene, using three.js and threex.videoTexture.

I understand the reasoning of blocking cross origin resources and after a lot of researching I have managed to get it to in an html5 video tag :) by setting up the proxy settings in my apache server.

However, even though I can see the video playing in the Html5 video tag, when I apply the video as a texture in webGl I get the following error:

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

I do hear the sound of the video, but I do not see the video on the object.

The working html5 video tag does not have the crossorigin parameter set to "anonymous" but it still works. When I add the crossorigin parameter on the video element I am using in webGL, I do not receive the error, but I don't hear the sound nor see the video

I would really appreciate any suggestions! TIA!

The code I am using has been taken from this tutorial: 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/

EDIT: This is what I added to the httpd.conf to configure the proxy settings:

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

This is my htm5 video tag (working):

<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>

If you're serving it up by serving the video data through your Apache server, then the data shouldn't be cross-origin. The browser doesn't know where Apache got its data from. It seems like the browser making a request to the original data source instead of your proxy. — JayC
@JayC thanks for your comment, I have edited my question to supply more information about my setup. I am using VLC to stream the video to destination localhost:8081/desktop.ogg, so if I am not mistaken, I should be making the request to that destination? — Ronny vdb
Wait, what port is Apache running on? Are you even using the proxy? A server running on a different port than the one hosting your page would be considered "cross domain". Are you sure you shouldn't instead have <video id="video" src="http://localhost/desktop.ogg" autoplay> ? (assuming you're running Apache proper and not some development envirnoment version... if not, you need to use it's port, not the port VLC set up, if I can remember what VLC does...) — JayC
the apache server is running on port 8888, isn;t cross-origin and cross-domain the same thing? — Ronny vdb
My bad. I meant "cross origin". But if your Apache is running on port 8888, you clearly were not using the proxy; you were trying to access the resource—the streamed video—directly. That's not what you wanted. — JayC

JayC JayC · Accepted Answer · 2014-12-03T22:24:56

From the comments above, I'm going to suggest the following.

Make sure you are actually using the proxy. VLC is streaming to 8081. You want to make sure that's proxied through Apache, which you state is running on port 8888.
Since the proxy makes your video "same origin", you shouldn't have to use the full uri to refer to it; you only need refer to precisely what you need. (That's the point of the proxy, to make the resource appear to come from the same origin). To HTTP servers on two different ports on the same machine are still not the same origin.

Here's the modified code:

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

I can't say whether or not those proxy settings are right. Some Apache expert will have to comment on that. I'm only trusting your word that that's the right way to set up the proxy because, I don't know.

Cross origin video working html5 but not webgl

1 Answers