I need to take snapshot of video being played in browser

Question

Suppose a video is being played in a browser. Beneath the video, there is a button. Clicking on the button should capture a snapshot of playing video and show the snapshot in the slider below it.

I need something in jQuery or JavaScript.

Answer 1

If the video is not a live stream, you can find a suitable answer in this code snippet I wrote some time ago for a small media project. It is PHP but you can apply the same concept with other languages

public function actionAjaxSetThumbnailFromFrame()
{
    if(!isset($_POST['Video'], $_POST['Video']['id']) || !isset($_POST['time']))
        throw new CHttpException(400,'Invalid request.');

    $video = Video::model()->findByPk($_POST['Video']['id']);
    $path = Utils::generateUniquePath("thumbnail.jpg", Config::getParam('mediaPath'));

    $command = "ffmpeg  -itsoffset -{$_POST['time']}  -i \"$video->filePath\" -vframes 1 -an -f image2 \"$path\"";
    //generate thumbnail
    exec(
        $command,
        $out,
        $retval
    );

    $thumbnail = new Image();
    $thumbnail->name = basename($path);
    $thumbnail->serverUrl = '';
    $thumbnail->filePath = $path;
    $thumbnail->relativeServerUrl = Utils::relativeUrlPath($path);
    $thumbnail->save();

    [...]
}

The function takes as input the video id and the time of the frame you want to save. Then it uses the ffmpeg (http://ffmpeg.org/) utility to extract the screenshot.

The core line is:

$command = "ffmpeg  -itsoffset -{$_POST['time']}  -i \"$video->filePath\" -vframes 1 -an -f image2 \"$path\"";

In Java it would be something like:

String command = "ffmpeg  -itsoffset -"+time+"  -i \""+videoPath+"\" -vframes 1 -an -f image2 \""+screenshotPath+"\"";
Process child = Runtime.getRuntime().exec(command);

Then you need some javascript code to create an ajax call and invoke the above function.