如何拍摄亚马逊S3上托管的视频截图

Question

我正在实现一个视频标记系统。我们使用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上。我知道这是一个访问控制允许来源的问题。我已经看到了为什么canvas.toDataURL（）会抛出安全异常？和https://forums.aws.amazon.com/thread.jspa?messageID=329118以及相关联的线程。

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

Answer 1

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

Answer 2

也可以尝试window.open（canvas.toDataURL（"images/png"））