HTML5捕获暂停视频流的图像并保存 [英] HTML5 Capture image of paused video stream and save it

问题描述

我有一个html5网页，在那里我想提供一个流。到目前为止，它使用以下HTML代码：

 < video id =vautoplay =autoplay> 
< source src =http：// localhost：8080 / stream.oggtype =video / ogg> 
< / video> 
  

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

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

function capture（）{var canvas =的document.getElementById（ C）; var video = document.getElementById（v）; if（video.paused）{canvas.getContext（'2d'）。drawImage（video，0,0）; }

< video id =vautoplay = 自动播放> < source src =http://html5doctor.com/demos/video-canvas-magic/video.webmtype =video / ogg>< / video>< input type =buttonvalue = Captureonclick =capture（）/>< canvas id =cwidth =500height =500>< / canvas>

在 http://html5doctor.com/video-canvas-magic/

将画布上的图像转换为图像文件，你可以使用 canvas.toDataUrl 或 canvas.toDataUrlHD （实验性的）。在此处查看API： https://developer.mozilla.org/en/docs/ Web / API / HTMLCanvasElement

I have a html5 webpage and on there I want to provide a stream. This works so far with the following HTML code:

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

But now I want to provide the option that the user can pause the video and save the current seen picture as jpeg file on the server.

But now I don't know how to get the image and save it a preferred location on the server. How can I save the current shown image as jpeg?

解决方案

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>

With the help from: http://html5doctor.com/video-canvas-magic/

To get the image on the canvas to an image file, you can use canvas.toDataUrl or canvas.toDataUrlHD (experimental). See the API here: https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

这篇关于HTML5捕获暂停视频流的图像并保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！