Как сделать скриншот видео, размещенного на Amazon S3?

Question

Я внедряю систему тегов видео. Мы используем Zencoder для преобразования видео, загруженного пользователем, и VideoJS для воспроизведения видео. Пользователь должен иметь возможность добавлять теги и добавлять комментарии во время просмотра видео. Все работает, за исключением того, что я хотел бы сделать небольшой снимок (высота 54 пикселя) видео во время пометки пользователя. У меня есть этот 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');
}

К сожалению, я получаю ошибку безопасности, потому что файл размещен на Amazon S3. Я знаю, что это проблема Access-Control-Allow-Origin. Я уже видел эти Почему canvas.toDataURL () генерирует исключение безопасности? и https://forums.aws.amazon.com/thread.jspa?messageID=329118 и связанные потоки.

Интересно, есть ли способ сделать снимок.

Answer 1

Недавно я столкнулся с той же проблемой, и я решил разместить небольшой файл html на S3 с видео и некоторым javascript, а затем загрузить эту страницу в iframe. Если вы хотите сделать снимок экрана, вы не можете использовать postMessage, чтобы попросить, чтобы iframe сделал фотографию для вас, затем сделайте снимок экрана в iframe и передайте data: // URL обратно на родительскую страницу, снова используя postMessage.

Answer 2

также попробуйте window.open (canvas.toDataURL ("image / png"));