HTML5 видео скриншот

Question

Я пытаюсь сделать скриншот видео с заданным временем в фильме. Поэтому я попробовал это с элементом canvas. Дело в том, что видео должно воспроизводиться, когда вы рисуете изображение, но мне нужно, чтобы изображение все еще было приостановлено. Итак, я попробовал это:

video.play();
context.drawImage(video,0,0,canvas.width,canvas.height);
video.pause();

Но, как вы, вероятно, можете себе представить, видео останавливается до завершения рисования холста, в результате чего снимок экрана отсутствует. Так есть ли функция обратного вызова для drawImage? В моем случае процесс рисования занимает около 50 мс, но это не безопасно:

setTimeout(function() { video.pause(); }, 50);

Answer 1

Вместо приостановки вы можете попытаться установить очень низкую скорость воспроизведения видео (или ноль, если это работает?):

video.playbackRate = 0.0001; // or 0

Это эффективно приостановит видео для вас.

Вы также можете установить холст на черный, прозрачность 0,99, а затем отсканировать полученное изображение за время ожидания для не черного пикселя:

setTimeout(function() { 
  pixel = context.getImageData(image.width/2, image.height/2, 1, 1);
  // do something with the pixel, kick off another timeout if it is still has transparency
}, 50);

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

Answer 2

Хм ... кажется, что на самом деле можно нарисовать изображение из приостановленного видео.Просто продолжайте интервал с начала.

Answer 3

Я не уверен, что это то, что вам нужно, но вы пробовали сделать снимок экрана вручную, используя MWSnap ? Пока вы снимаете скриншот, он останавливает экран, поэтому я думаю, что он может сработать для вас.