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

请注意，要使所有这一切工作the video has to be from the same origin as the page。

Answer 2

但请参阅此Flash示例，其中作者在Flash中编码网络摄像头帧并将其传递给Javascript。 http://code.google.com/p/flashcam

捕获视频帧，然后在HTML5中导出为位图

2 个答案: