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!

Answer 1

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