Create Thumbnail from Video Without Ffmpeg in PHP

Create thumbnail from video without ffmpeg in PHP

If the video can be played back in the browser you could try using the Canvas feature of html5 to playback the video in a canvas and then post a still from that video to your server using javascript... Maybe you could even automate it, or if you only have a few dozen videos do it by hand...

The following is some jquery flavored javascript to upload a base64-encoded jpg in order to get you started. (Mashed up from several different projects, so untested and probably a security nightmare.)

<script>
    var vidDOM = $('article').children('video');
    var vid = vidDOM.get(2);
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    vidDOM.bind({
        'paused':function () {
            vid.width = canvas.width = vid.offsetWidth;
            vid.height = canvas.height = vid.offsetHeight;
            var $this = this; 
            ctx.drawImage($this, 0, 0, vid.width, vid.height);
            uploadbase64();
        }
    })

    function uploadbase64(){
        canvasData = canvas.toDataURL("image/jpeg"); 
        var ajax = new XMLHttpRequest();
        ajax.open("POST",'ImageUpload.php?filename='+vidDOM.id,false);
        ajax.setRequestHeader('Content-Type', 'application/upload');
        ajax.send(canvasData);
    }
</script>

And here is a bit of php to accept the upload.

<?php
    $filename =$_GET['filename'];

    if (file_get_contents('php://input')){
        // Remove the headers (data:,) part.
        $filteredData=substr(file_get_contents('php://input'), strpos(file_get_contents('php://input'), ",")+1);

        // Need to decode before saving since the data we received is already base64 encoded
        $decodedData=base64_decode($filteredData);

        //create the file
        if($fp = fopen( $filename, 'wb' )){
            fwrite( $fp, $decodedData);
            fclose( $fp );
        } else {
            echo "Could not create file.";
        }
}

echo "Created image ".$filename;

?>

How to take a thumbnail from video by using PHP without ffmpeg?

On the client-side you can do it with a HTML5 canvas.

HTML:

<video>
        <source src="..." type="video/mp4">
</video>
<canvas>
</canvas>
<img id="screenshot" />

JavaScript:

// draw the image
var context = canvas.getContext('2d');
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);

// set it as img
var dataURL = canvas.toDataURL();
document.getElementById('screenshot').src = dataURL;

Working example on: HTML5 Canvas Video Screenshot

Save canvas as image

how to create a thumbnail of uploaded video file in php without ffmpeg?

Most server side scripts rely on ffmpeg, so if you can't use that you can either upload the video to an external service but that would mean sending the whole file OR you could try creating them client-side in the browser -- Generate thumbnails from video files using HTML5's video tag and canvas

If however you can't use ffmpeg for installtion reasons you could look at a wrapper -- It currently provides FFmpeg-PHP emulation in pure PHP so you wouldn't need to compile and install the module.

Generate thumbnail from video using ffmpeg and add to mysql database

Concerning the FFMpeg part, I think a good way to start is to actually use the PHP-FFMpeg library. The Basic Usage section in the documentation contains an example on how to generate a frame for a given video:

require 'vendor/autoload.php';

$ffmpeg = FFMpeg\FFMpeg::create();
$video = $ffmpeg->open('video.mpg');

$video->frame(FFMpeg\Coordinate\TimeCode::fromSeconds(10))
      ->save('frame.jpg');

A simplified process would be as follows:

1. The user uploads a video, after which the video gets moved to a different
   directory.
2. Now you can use the snippet above, with the frame method to get a thumbnail for your video.
3. After the image saving is done, you just need to add it to your database.
   
   • If the thumbnails refer to the image column in your table, you can get away with just inserting the filename, frame.jpg (or even the complete filepath, /public/path/to/frame.jpg).
   • If the thumbnails refer to the screenshots column in your table, and you want to have multiple thumbnails for your video, then you should consider creating a new table with a one-to-many relationship (from your video/application to a new table, e.g. thumbnails)
4. Then when the user gets to a page where the image should be displayed, just select it from the table and display it with an <img> tag (with the public filepath).

I would also strongly recommend not to save the complete <video> tag into your database, but instead add it to the page where you actually want to show your video.

Example:

<?php
$result = $conn->query('SELECT ...');
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        ?>
        <video src="<?php echo $row['video-column-path']; ?>"</video>
        <?php
    }
} else {
    ?>
    No videos here
    <?php
}
$conn->close();
?>

---

Related Topics