Excepción de security CORS / dominio cruzado cuando se asigna una label de video HTML5 a la textura webGL

Me gustaría asignar un video remoto a una textura en WebGL. Como la fuente de video es diferente de la fuente del documento, agregué Access-Control-Allow-Origin:* a los encabezados http de la fuente de video. Además, video.crossOrigin = ''; un origen anónimo a la label de video al usar video.crossOrigin = ''; . Curiosamente, el atributo de dominio cruzado funciona con imágenes, pero NO con la label de video. Tan pronto como la textura de WebGL se asigna al object de video, JavaScript arroja la siguiente exception:

Error no detectado: SECURITY_ERR: DOM Exception 18

Aquí hay un jsfiddle para reproducir este problema. Este ejemplo se basa en el ejemplo webgl_kinect de three.js: http://jsfiddle.net/ZgeTU/2/

Aquí están las secciones relevantes:

 // 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(); 

Más tarde, la label de video se asigna a una textura Three.js:

 texture = new THREE.Texture( video ); 

Aparentemente este problema al usar un video crossOrigin en webGL es conocido por un time, pero no he encontrado ninguna actualización al respecto: http://jbuckley.ca/2012/02/cross-origin-video/

¿Alguien sabe cuál es el estado de este problema? ¿Hay alguna solución para acceder a videos remotos en webGL? ¡Cualquier ayuda es muy apreciada!

¡Gracias!

Como está en jquery, y se recomienda cierto event handlingl lado del cliente, tal vez podría echarle un vistazo al plugin o la base para el plugin cors (2,3).

Asumiendo que está haciendo las cosas bien y agregando los encabezados según corresponda para cada browser (4,5), saque un analizador de packages como wireshark y examine los packages para darle más información.

Sin embargo, dicho esto, existe una buena posibilidad de que CORS para WebGL sea un trabajo en progreso. Para implementarlo de acuerdo con las especificaciones, los browseres están revisando el soporte (1).

Buena suerte.

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

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

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

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

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

También tenga en count: http://www.jaanga.com/2012/04/access-cross-origin-images-from.html

Me bloquearon con el error similar cuando estaba configurando el atributo de video en "crossOrigin" en lugar de "crossorigin" … Tan pronto como escribí todo en minúscula, comenzó a funcionar.

Gracias por los comentarios.

Benoit Jacob de Mozilla presentó un informe de error sobre este tema: https://bugzilla.mozilla.org/show_bug.cgi?id=837153

.. y creó un caso de testing más compacto: http://people.mozilla.org/~bjacob/video-cors.html