Захват видеокадра, а затем экспорт в виде растрового изображения в HTML5

Question

У меня есть веб-приложение для воспроизведения видео.

Я рассматриваю возможность использования элемента HTML5 <video> и решил, что он позволит мне выполнить все мои требования, кроме одного: , разрешающегопользователь может сделать снимок текущего видеокадра и сохранить его в формате растрового изображения (например, JPG).

Для этого требования я не нашел решения, и любое руководство по этому вопросус благодарностью.

Чтобы помочь ответить на вопрос, здесь более подробно.Я скачаю видеофайлы с сервера по HTTP, а затем воспроизведу их в браузере.Это будет не видеопоток, а загрузка с воспроизведением, начинающимся после получения файла.Видео будет в формате MP4 .

Решение должно работать только в IE 9. (Хотя, естественно, я бы хотел, чтобы решение было как можно более кросс-браузерным / платформенным.)

Answer 1

Захват изображения в элемент canvas:

var video  = document.getElementById(videoId);
var canvas = document.createElement('canvas');
canvas.width  = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);

Затем используйте метод toDataURL() для получения изображения:

canvas.toDataURL('image/jpeg');

Beпомните, что для того, чтобы все это работало , видео должно быть того же происхождения, что и страница .

Answer 2

, но посмотрите этот пример Flash, где автор кодирует кадр веб-камеры во Flash и передает его в Javascript.http://code.google.com/p/flashcam