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 and related threads.

I wonder if there is work to do to get the picture.


source to share

2 answers

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.



also try (canvas.toDataURL ("image / png"));



All Articles