3

I am implementing a video tagging system. We use Zencoder to convert the video uploaded by the user and VideoJS to play the video. The user should be able to tag and adding a comment while he is watching the video . Everything works except, I would like to take a small snapshot (54px height) of the video at the time that the user is tagging. 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 receive a Security Error because the file is hosted on Amazon S3. I know that it is a Access-Control-Allow-Origin problem. I already saw these Why does canvas.toDataURL() throw a security exception? and https://forums.aws.amazon.com/thread.jspa?messageID=329118 and associated threads.

I wonder if there is a work around to be able to take the snapshot.

Community
  • 1
  • 1
Chris Cinelli
  • 4,679
  • 4
  • 28
  • 40

2 Answers2

1

I've run into the same problem recently, my solution was to host a small html file in S3 with the video and some javascript, and then to load that page in a iframe. When you want to take a screenshoot, you cant use postMessage to ask the iframe to take the photo for you, then take the screenshoot in the iframe and pass the data:// URL back to the parent page using postMessage again.

David Bengoa
  • 127
  • 1
  • 7
0

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

Oberdan
  • 304
  • 1
  • 4
  • 9