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

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

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

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

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

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

Ответ 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');

Имейте в виду, что для всего этого для работы видео должно быть от того же источника, что и страница.

Ответ 2

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