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

Posted 2023-05-07

【中文标题】捕获视频帧，然后在 HTML5 中导出为位图

【英文标题】：Capturing Video Frame and then Exporting as Bitmap in HTML5

【发布时间】：2011-07-19 08:29:23

【问题描述】：

我有一个可以播放视频的网络应用程序。

我正在考虑使用 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');

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

【讨论】：

有趣。如果视频是由 Silverlight 之类的插件渲染的，您认为使用 canvas 是否也可以工作？请参阅***.com/questions/5372521/… 上的相关问题。

这太棒了！它确实开辟了很多超出我想象的可能性。谢谢。

@RickRoth 规范明确指出drawImage 的参数必须是 HTMLImageElement、HTMLCanvasElement 或 HTMLVideoElement - 所以我不认为 Silverlight 会起作用。

我也是这么想的。再次感谢您提供的出色解决方案。

“视频必须与页面来自同一来源”。那么this 是如何工作的呢？

【参考方案2】：

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