捕获视频帧,然后在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');

请注意,要使所有这些工作,视频必须与页面的来源相同.