HTML5 Capture image of paused video stream and save it

Question

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?

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>

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