如何通过HTML5 Files API从本地加载的视频文件中获取像素数据？

Question

我正在尝试加载本地视频文件并获取其像素数据：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var file = document.getElementById("inputFile").files[0];
var fr = new FileReader();
fr.addEventListener("load", function () {
  var video = document.createElement("video");
  video.src = fr.result;
  video.play();
  video.addEventListener("loadedmetadata", function () {
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    var imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
  });
});
fr.readAsDataURL(file);

类似的代码段适用于图片文件，但对于视频，我在ctx.getImageData(..)电话中收到此错误：

SecurityError: The operation is insecure.

我做错了什么？