Javascript 如何拍摄托管在AmazonS3上的视频截图？

我正在实施一个视频标签系统。我们使用Zencoder转换用户上传的视频，使用VideoJS播放视频。用户应该能够在观看视频时标记并添加评论。一切正常，除了，我想在用户标记时拍摄视频的一个小快照（54px高度）。我有一个Javascript：

function getSnapshot(htmlPlayerId){
    var video  = document.getElementById(htmlPlayerId);
    var canvas = document.createElement('canvas');

    var ratio = 54 / video.videoHeight;

    canvas.width  = ratio * video.videoWidth;
    canvas.height = 54;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,  0, 0, canvas.width, canvas.height);

    return canvas.toDataURL('image/jpeg');
}

不幸的是，我收到了一个安全错误，因为该文件托管在AmazonS3上。我知道这是一个访问控制允许来源的问题。 我已经看到了这些和相关的线程

---

我想知道是否有办法拍摄快照

我最近遇到了同样的问题，我的解决方案是在S3中托管一个带有视频和一些javascript的小html文件，然后在iframe中加载该页面。当你想拍摄屏幕截图时，你不能使用postMessage让iframe为你拍摄照片，然后在iframe中拍摄屏幕截图，并再次使用postMessage将数据：//URL传递回父页面。

也可以尝试window.open（canvas.toDataURL（“image/png”）

不幸的是，Amazon不打算添加对Access Control Allow Origin标头的支持。这听起来相当巧妙！我没想过！