HTML5 Canvas drawImage из видео, не отображаемого при первом рисовании

Поскольку это на OSX с Safari, есть и плохие новости:

Примечание. Видео в качестве источника для метода canvas drawImage() в настоящее время не поддерживается в iOS.

Источник

Если это устаревшая информация, я не знаю, но в любом случае у текущей реализации есть проблемы. Как установлено (в комментариях), проблема вряд ли связана с кодеками, так как это происходит и с другими форматами. fiddle исключает метод toDataURL() в качестве источника, поэтому остается метод drawImage().

Поскольку это работает на другой платформе с предоставленным кодом, и, судя по всему, это не является источником проблемы, поэтому вы здесь рассматриваете очень возможную проблему (ошибку) с браузером Safari на платформе OSX.

В официальной документации, приведенной выше, также говорится, что это не поддерживается, поэтому, вероятно, это очень ранняя реализация, в которой все еще есть некоторые проблемы.

В этом отношении вы мало что можете сделать, кроме как подождать, а также сообщить об этом как о проблеме (я искал сообщение о проблеме, но не смог найти его, поэтому я рекомендую вам сделать это).

Недавно я сам столкнулся с той же проблемой и обошел ее, нарисовав видео на «фиктивном» холсте, прежде чем приступить к «настоящей» работе с ним. Это хорошо работает, так как все методы в моем коде, которые пытаются проанализировать видео, ждут, пока на видео не будет запущено событие «canplaythrough». Я оборачиваю обработчик события «canplaythrough» в обещание и разрешаю обещание только тогда, когда получено событие «canplaythrough» И была предпринята попытка нарисовать видео на фиктивном холсте. Это эффективный обходной путь. для ошибки Safari.

Например:

var readyPromise = new Promise(function(resolve) {
    video.addEventListener("canplaythrough", function() {
        var canvas = document.createElement("canvas"),
            context = canvas.getContext("2d");

        context.drawImage(video, 0, 0);

        resolve(video);
    });
});

readyPromise.then(function() {
    // NOW manipulate the video, draw it onto a canvas, etc
});

Я столкнулся с той же проблемой и опробовал решение в последнем комментарии. Это еще не сработало для меня.

Я понял позже и нашел обходной путь:

в моем коде у меня есть другой рисунок вместе с drawImage из видео, например

context.rect(0, 0, 50, 50);
context.fillStyle = 'black';
context.fill();

и с ними второй розыгрыш по-прежнему не будет работать, даже если его перерисовать после события «canplaythrough».

Поэтому я удалил три строки выше и просто сделал второй розыгрыш после события «canplaythrough». Тогда это сработало.

Просто код, который сработал у меня, выглядит так:

context.drawImage(video, 0, 0);
video.addEventListener('canplaythrough', function () {
    context.drawImage(video, 0, 0);
});