IE9 Sicherheitsfehler beim Lesen von Leinwand (nicht Cross-Domain)

Question

Ich spiele ein Video in einem video Tag. Die Videodatei befindet sich im selben Verzeichnis wie die index.html. Ich setze dann die Video-Pixel auf eine canvas, mache etwas Logik auf sie, lese sie und setze eine weitere canvas. All das funktioniert gut in Firefox und Chrome, aber nicht in IE9. IE gibt einen Sicherheitsfehler, wenn ich versuche, die Pixel aus dem Canvas zu lesen. Was wäre verständlich, wenn das Video von einer anderen Domain stammt, aber nicht. Was noch seltsamer ist, der Fehler tritt auf, wenn ich den relevanten Code in setTimeout setze oder ihn von der Konsole aus trigge, aber nicht, wenn er direkt im Skript aufgerufen wird. Hier ist das relevante 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 
}); 

Was passiert hier, und was kann getan werden, um es zu umgehen?

Answer 1

Hmm .. das scheint seltsam! Haben Sie versucht, requestAnimationFrame anstelle von setTimeout zu verwenden?

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