Capturing HTML 5 Video To An Image

Friday, January 4, 2013

A quick example to showing how to capture a still image from a video.

Assume you have the following HTML setup:

<video id="video" controls="controls">
    <source src=".mp4" />
</video>

<button id="capture">Capture</button>

<div id="output"></div>

Then when the user clicks the capture button, we'll write the current video contents into a canvas, and use the canvas to generate a data URL for an image to display.

(function() {
    "use strict";

    var video, $output;
    var scale = 0.25;

    var initialize = function() {
        $output = $("#output");
        video = $("#video").get(0);
        $("#capture").click(captureImage);                
    };

    var captureImage = function() {
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
              .drawImage(video, 0, 0, canvas.width, canvas.height);

        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);
    };

    $(initialize);            

}());

Comments
gravatar Chris Brandsma Friday, January 4, 2013
ok, now upload that image to the server. (not to sound demanding, but that would be a good next step)
gravatar Scott Friday, January 4, 2013
@Chris: Sure - will add a post for this next week.
gravatar Mikko Ohtamaa Friday, January 4, 2013
Using $video variable for raw HTML DOM element is bad practice as usually this kind of "variable name mangling" is only used for jQuery objects.
Rex Sunday, January 6, 2013
Shouldn't it be "use strict" instead of "using strict"?
gravatar Scott Sunday, January 6, 2013
@Rex: updated, thanks!
gravatar Scott Sunday, January 6, 2013
@Mikko: updated, thanks!
gravatar Mohammad M. Ramezanpour Monday, January 7, 2013
Greate post! Thank you :-)
Peter Tuesday, January 8, 2013
very good
gravatar xiaohong Thursday, January 10, 2013
cool stuff! Wished everyone use browsers support video tag, but in reality it is not.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!