Błąd bezpieczeństwa IE9 podczas odczytu z obszaru roboczego (nie między domenami)

Question

Odtwarzam wideo w tagu video. Plik wideo znajduje się w tym samym katalogu co plik index.html. Później umieszczam piksele wideo na canvas, robiąc na nich trochę logiki, czytając je i wkładając kolejne canvas. Wszystko to działa dobrze w firefox i chrome, ale nie w IE9. IE daje błąd bezpieczeństwa, gdy próbuję odczytać piksele z obszaru roboczego. Które byłoby zrozumiałe, jeśli wideo pochodzi z innej domeny, ale tak nie jest. Co ciekawsze, błąd pojawia się, gdy wstawiam odpowiedni kod do setTimeout lub wyzwolę go z konsoli, ale nie wtedy, gdy zostanie wywołany bezpośrednio w skrypcie. Oto odpowiedni javascript:

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

Co się tutaj dzieje i co można zrobić, aby ominąć to miejsce?

Answer 1

Hmm .. to wydaje się dziwne! Czy próbowałeś użyć requestAnimationFrame zamiast 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);