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.toDataUrl或canvas.toDataUrlHD（实验性）。请在此处查看API：https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

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

1 个答案: