How do I take a screenshot of a video hosted on Amazon S3?
I am implementing a video tagging system. We use Zencoder to convert user uploaded videos and VideoJS to play videos. The user should be able to mark and add a comment while watching the video. Everything works, except that I would like to take a small snapshot (54px height) of the video at the time the user is tagged. I have this 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');
}
Unfortunately, I am getting a security error because the file is hosted on Amazon S3. I know this is an Access-Control-Allow-Origin issue. I've already seen these Why does canvas.toDataURL () throw a security exception? and https://forums.aws.amazon.com/thread.jspa?messageID=329118 and related threads.
I wonder if there is work to do to get the picture.
source to share
I recently faced the same problem, my solution was to put a small html file in S3 with a video and some javascript and then load that page into an iframe. When you want to take a screenshot, you cannot use postMessage to ask the iframe to take a photo for you and then take the screenshot in the iframe and pass the data: // url back to the parent page using postMessage.
source to share