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

请注意，要使所有这些都有效视频必须与页面来源相同.

Answer 2

但是请看这个 Flash 示例，其中作者在 Flash 中对网络摄像头帧进行编码并将其传递给 Javascript。 http://code.google.com/p/flashcam