Errore di sicurezza IE9 durante la lettura da canvas (non tra domini)

Question

Sto riproducendo un video in un tag video. Il file video si trova nella stessa directory di index.html. Sto quindi inserendo i pixel video su un canvas, facendo un po 'di logica su di loro, leggendoli e mettendo su un altro canvas. Tutto questo funziona bene in Firefox e Chrome, ma non in IE9. IE fornisce un errore di sicurezza quando sto provando a leggere i pixel dalla tela. Il che sarebbe comprensibile se il video proviene da un altro dominio, ma non lo è. Ciò che è ancora più curioso, l'errore si verifica quando inserisco il codice rilevante in setTimeout o lo avvio dalla console, ma non quando viene chiamato direttamente nello script. Ecco il javascript rilevante:

$(document).ready(function(){ 
fun = function(){ 
    var main= $("#main"); 
    var video = $('<video autoplay="autoplay"> 
       <source src="orange.mp4" type="video/mp4" /> 
       <source src="orange.ogv" type="video/ogg" /></video>'); 
    video.css({"width" : 100, "height" : 200}); 
    var canvas1 = $('<canvas></canvas>'); 
    canvas1.css({"position" : "relative", "top" :0, 
       "width" : 100, "height" : 200, "background-color":"red"}); 
    canvas1.attr({"width" : 100, "height" : 200}); 
    var context1=canvas1[0].getContext("2d"); 

    var canvas2 = $('<canvas></canvas>'); 
    canvas2.css({"position" : "relative", "top" :0, 
       "width" : 100, "height" : 200, "background-color":"purple", 
       "margin" : "5px"}); 
    canvas2.attr({"width" : 100, "height" : 200}); 
    var context2=canvas2[0].getContext("2d"); 

    main.append(video); 
    main.append(canvas1); 
    main.append(canvas2); 


    var drawFrame = function(){ 
      context1.drawImage(video[0],0,0,100,200); 
      var data = context1.getImageData(0,0,100,200); 
      context2.putImageData(data, 0, 0); 
      setTimeout(drawFrame, 50); 
    } 

    drawFrame(); 
} 
fun();     // <--- this one works 
var wurst = setTimeout(fun,50);  // <--- this one doesn't 
}); 

Che cosa sta succedendo qui e cosa si può fare per aggirarlo?

Answer 1

Hmm .. sembra strano! Hai provato a utilizzare requestAnimationFrame anziché setTimeout?

// Polyfill for HTML5's requestAnimationFrame API. 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

requestAnimFrame(fun);