javascript - CORScross domain security exception when assigning HTML5 video tag to webGL texture - Stack Overflow

admin管理员组

文章数量:1287972

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

Here are the relevant sections:

// CROSS-ORIGIN VIDEO SOURCE 
// REMOTE VIDEO SOURCE PROVIDES "Access-Control-Allow-Origin:*" HEADER
video.src =
  '.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: /

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!

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

• javascript
• html
• three.js
• webgl
• cors

Share Improve this question Follow edited Jan 8, 2013 at 2:39 monsur 48k1818 gold badges103103 silver badges9696 bronze badges asked Jan 8, 2013 at 0:05 Julius KammerlJulius Kammerl 17111 silver badge33 bronze badges 8

• 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 Commented Jan 10, 2013 at 1:33
• 1 @Jamo - Did you go through the JSFiddle? Which version of Chrome are you using (and OS)? – baalexander Commented Jan 10, 2013 at 17:50
• Can you access this through https instead? – chadpeppers Commented Jan 11, 2013 at 20:44
• 1 You send a Content-Type: text/plain header for this video. You should send video/webm. – pozs Commented Jan 15, 2013 at 1:47
• Do have access to the server that this will be sitting (both the page and the remote video)? – Chris Commented Jan 16, 2013 at 11:15

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2 +50

Since you are on jquery, and some client side handling is remended, 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/webgl/public-mailing-list/archives/1106/msg00042.html

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

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

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

(5) Source: github./saltybeagle/cors

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

I was blocked with the similar error when I was setting the video attribute to "crossOrigin" instead of "crossorigin".... As soon as I lowercased everything, it started working.

Thanks for ments.

Benoit Jacob from Mozilla filed a bug report on this issue: https://bugzilla.mozilla/show_bug.cgi?id=837153

.. and created a more pact test case: http://people.mozilla/~bjacob/video-cors.html

本文标签：