javascript - HTML5 捕获暂停视频流的图像并保存

Question

我有一个 html5 网页，我想在上面提供流。到目前为止，这适用于以下 HTML 代码:

<video id="v" autoplay="autoplay">
    <source src="http://localhost:8080/stream.ogg" type="video/ogg">
</video>

但现在我想提供一个选项，让用户可以暂停视频并将当前看到的图片保存为服务器上的 jpeg 文件。

但现在我不知道如何获取图像并将其保存在服务器上的首选位置。如何将当前显示的图像保存为 jpeg？

Answer 1

function capture() {
  var canvas = document.getElementById("c");
  var video = document.getElementById("v");
  
  if (video.paused) {
      canvas.getContext('2d').drawImage(video, 0, 0);
  }
}

<video id="v" autoplay="autoplay" >
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" type="video/ogg">
</video>
<input type="button" value="Capture" onclick="capture()"/>
<canvas id="c" width="500" height="500"></canvas>

借助于:http://html5doctor.com/video-canvas-magic/

要将 Canvas 上的图像获取到图像文件，您可以使用 canvas.toDataUrl 或 canvas.toDataUrlHD(实验性)。请在此处查看 API:https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement