error de seguridad IE9 cuando se lee de tela (no entre dominios)

Question

Estoy jugando a un vídeo en una etiqueta video. El archivo de video está en el mismo directorio que el index.html. Luego coloco los píxeles de video en canvas, haciendo un poco de lógica sobre ellos, leyéndolos y poniendo otro canvas. Todo esto funciona bien en Firefox y Chrome, pero no en IE9. IE da un error de seguridad cuando intento leer los píxeles del lienzo. Lo cual sería comprensible si el video se originó desde algún otro dominio, pero no es así. Lo que es aún más curioso, el error ocurre cuando coloco el código relevante en setTimeout o lo disparo desde la consola, pero no cuando se lo llama directamente en el script. Aquí está el javascript relevante:

$(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 
}); 

¿Qué está pasando aquí y qué se puede hacer para evitarlo?

Answer 1

Hmm ... ¡eso parece raro! ¿Ha intentado utilizar requestAnimationFrame en lugar de 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);