Errore di sicurezza CORS/cross domain durante l'assegnazione del tag video HTML5 alla trama WebGL

Question

Vorrei assegnare un video remoto a una trama in WebGL. Poiché la sorgente video è diversa dalla fonte del documento, ho aggiunto Access-Control-Allow-Origin:* alle intestazioni http della sorgente video. Inoltre, ho assegnato un'origine anonima al tag video utilizzando video.crossOrigin = '';. È interessante notare che l'attributo cross-domain funziona con le immagini, ma NON con il tag video. Non appena la texture WebGL viene assegnato all'oggetto video, javascript genera la seguente eccezione:

Uncaught Errore: SECURITY_ERR: DOM Exception 18

Ecco un jsfiddle per riprodurre il problema. Questo esempio si basa sull'esempio webgl_kinect di Three.js: http://jsfiddle.net/ZgeTU/2/

Qui ci sono sezioni rilevanti:

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

In seguito il tag video è assegnato ad una texture Three.js:

texture = new THREE.Texture(video); 

Apparentemente questo problema utilizzando un video crossOrigin in webGL è noto per un po ', ma non ho trovato alcun aggiornamento su questo: http://jbuckley.ca/2012/02/cross-origin-video/

Qualcuno sa qual è lo stato di questo problema? C'è qualche soluzione alternativa per accedere ai video remoti in webGL? Qualsiasi aiuto è molto apprezzato!

Grazie!

Answer 1

Dato che ci si trova su jquery e si consiglia la gestione del lato client, è possibile dare un'occhiata al plug-in o alla base del plugin cors (2,3).

Supponendo che si stiano facendo le cose per bene e aggiungendo le intestazioni appropriate per ciascun browser (4,5), estrarre un analizzatore di pacchetti come wireshark ed esaminare i pacchetti per darvi maggiori informazioni.

Tuttavia, detto questo, c'è una buona probabilità che CORS per WebGL sia un work in progress. Per implementarlo secondo le specifiche, i browser stanno revisionando il supporto (1).

Buona fortuna.

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

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

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

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

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

noti inoltre : www.jaanga.com/2012/04/access-cross-origin-images-from.html

Answer 2

Grazie per i commenti.

Benoit Jacob da Mozilla ha presentato un bug report su questo tema: https://bugzilla.mozilla.org/show_bug.cgi?id=837153

..e ha creato un banco di prova più compatta: http://people.mozilla.org/~bjacob/video-cors.html

Answer 3

mi è stato bloccato con l'errore simile quando stavo impostando l'attributo video su "crossOrigin" invece di "crossorigin" .... Appena ho in minuscolo tutto, è iniziato lavoro.