Как разобрать видео на кадры с помощью JavaScript / Canvas?

Question

[sergof]

Собственно сабж.
Нужно развалить (и обработать покадрово) видеопоток и не потерять ни кадра. Обязательно в браузере. В разных браузерах.
Не представляю в какую сторону копать, кадры проскакивают, requestAnimationFrame не всеми браузерами поддерживается.
Спасибо заранее.

Answer 1

[Mikhail Davydov]

Можно попробовать сделать «высокочастотный» таймер используя вот это gist.github.com/2802407 а еще лучше сделать таймер в воркере на основе setInterval, который будет слать в окно postMessage без лагов таймера.

Можно еще попробовать сделать хак с play() pause(): play(), таймаут 20мс и pause(), чтение кадра.

Однако ни один из способов не застрахован от долгих циклов дольше 1000/FPS. Самый надежный способ — декодировать видео в воркере бинарно :(

Количество проигранных кадров можно узнать только у FF developer.mozilla.org/en-US/docs/DOM/HTMLVideoElement

Comments

[sergof]

Спаибо. Значит буду копать воркеры.

Answer 2

[Vitaliy Petrychuk]

Рендерим видео в канвасе:
html5doctor.com/video-canvas-magic/

Дальше на каждом кадре вставляем картинку (toDataURL) в DOM и отпаравляем формой на страницу, которая сохранит ее локально (если вы захотите поиграться с этими картинками в VirtualDub, то передавайте какой-то counter, названия картинок должны быть имя+1, иначе они не импортируются корректно):
maran-emil.de/nodes/how-to-convert-canvas-animation-in-hd-avi-video-file

Comments

[sergof]

Такой способ к сожалению пропускает кадры. Уже опробовано, пользователи машин послабее будут останутся с пропусками.