3

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.

Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
Jeevan Patil
  • 6,029
  • 3
  • 33
  • 50
  • 2
    Funny. The first result for the google search 'Capture screenshots using JQuery' is a StackOverflow posting. – mcfinnigan May 03 '12 at 11:40
  • @Funny Though totally unrelated, as the OP is talking about a video not a website. ;) – Yoshi May 03 '12 at 11:41
  • @Yoshi , it is relevant because all he is asking is to take a snapshot of browser , which is having the video played. and if it's played in flash, it IS going to difficult – NT_ May 03 '12 at 11:42
  • 2
    @Jeevan Stream the video through a canvas element. This will give you all the freedom you need. – Yoshi May 03 '12 at 11:42
  • possible duplicate of [Compile/Save/Export HTML as a PNG Image using Jquery](http://stackoverflow.com/questions/5941631/compile-save-export-html-as-a-png-image-using-jquery) – Rory McCrossan May 03 '12 at 11:44
  • @RoryMcCrossan thanks. But not all the browsers support HTML5. – Jeevan Patil May 03 '12 at 11:49
  • In that case it's not possible to do it. – Rory McCrossan May 03 '12 at 11:51
  • Suppose the video is in a div. What if I capture only that div area using jQuery? Is it doable ? – Jeevan Patil May 03 '12 at 11:53
  • It doesn't matter what the video is in, it matters what the video *is*. Do you have control over the object displaying the video, and what kind of video is it (flash, mp4, etc)? – Mike Robinson May 03 '12 at 14:43

1 Answers1

2

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.

Mario
  • 3,223
  • 3
  • 19
  • 21
  • 1
    Good solution to a hard problem. Two issues, though - make sure you sanitize the `time` value to keep it from being modified to invoke arbitrary commands, and I'd add the caveat that this is a potential DOS vector, though, since thumbnail extraction from a video file is a moderately expensive operation, so you'd want to make sure that it's not invokable by just anyone. – Chris Heald Sep 29 '12 at 21:49