CORS/cross domain security exception when assigning HTML5 video tag to webGL texture

Question

I would like to assign a remote video to a texture in WebGL. Since the video source is different from the document source, I added Access-Control-Allow-Origin:* to the http headers of the video source. In addition, I assigned an anonymous origin to the video tag by using video.crossOrigin = '';. Interestingly, the cross-domain attribute works with images, but NOT with the video tag. As soon as the WebGL texture is assigned to the video object, javascript throws the following exception:

Uncaught Error: SECURITY_ERR: DOM Exception 18

Here is a jsfiddle to reproduce this issue. This example is based on the webgl_kinect example of three.js: http://jsfiddle.net/ZgeTU/2/

Here are the relevant sections:

// CROSS-ORIGIN VIDEO SOURCE 
// REMOTE VIDEO SOURCE PROVIDES "Access-Control-Allow-Origin:*" HEADER
video.src =
  'http://kammerl.de/threejs/three.js/examples/textures/kinect.webm';
// DEFINING ANONYMOUS ORIGIN
video.crossOrigin = '';
video.play();

Later the video tag is assigned to a Three.js texture:

texture = new THREE.Texture( video );

Apparently this problem using a crossOrigin video in webGL is known for a while, but I haven't found any updates on this: http://jbuckley.ca/2012/02/cross-origin-video/

Does anyone know what the status of this issue is? Is there any workaround to access remote videos in webGL? Any help is greatly appreciated!

Thanks!

Tested example and the video loads fine on Chrome, and I can view it if I add it to the DOM, although I'm not seeing any security errors I am seeing "Error creating WebGL context." — jpillora
@Jamo - Did you go through the JSFiddle? Which version of Chrome are you using (and OS)? — baalexander
You send a Content-Type: text/plain header for this video. You should send video/webm. — pozs
Do have access to the server that this will be sitting (both the page and the remote video)? — Chris

DrM DrM · Accepted Answer · 2013-01-14T17:31:02

Since you are on jquery, and some client side handling is recommended, perhaps you might take a look at the plugin or the basis for the cors plugin (2,3).

Assuming you are doing things right and adding the headers as appropriate for each browser (4,5), get out a packet analyzer such as wireshark and examine the packets to give you more insight.

However, that being said, there is a good chance that CORS for WebGL is a work in progress. In order to implement it according to spec, the browsers are revising support (1).

Good luck.

(1) Source: https://www.khronos.org/webgl/public-mailing-list/archives/1106/msg00042.html

(2) Source: archive.plugins.jquery.com/project/cors

(3) Source: saltybeagle.com/2009/09/cross-origin-resource-sharing-demo/

(4) Source:www.html5rocks.com/en/tutorials/cors/

(5) Source: github.com/saltybeagle/cors

Also note: www.jaanga.com/2012/04/access-cross-origin-images-from.html

CORS/cross domain security exception when assigning HTML5 video tag to webGL texture

3 Answers