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

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

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中发现了此错误。。电话：

---

我做错了什么？

您没有做错任何事情，但是如果您绘制的图像源与网页本身不在同一域中，canvas将不允许使用ctx.getImageData。正如错误消息所指出的，此限制是出于非常好的安全原因。解决方法是将视频与网页放在同一个域中。但是为什么它可以处理图像呢？难道不应该对它们应用相同的安全限制吗？这里有几个可能的障碍：loadedmetadata不能保证您需要的实际视频数据可以播放。readAsDataURL；在某些浏览器中，数据uri有长度限制。您至少需要使用blob/ArrayBuffer，但这会终止缓冲，视频需要首先完全加载到内存中。getImageData使用视频大小。您应该首先设置画布大小以确保。必须在canplay事件处理程序内调用play。我不认为你在任何情况下都能用一个blob对象的视频缓冲。。。

SecurityError: The operation is insecure.