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

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

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

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

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

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

Ответы

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);

canvas.toDataURL('image/jpeg');