PHP - Extract frame during Video upload

frame, image, javascript, php

Solution

Fast forward almost five years since this question was posted, and the answer is now a yes!

Live demo

How to extract a frame during video upload using JavaScript

Before showing code, this is what we'll do:

- Set an event handler on the input element that will take the video to be uploaded

- When a file is selected from the file system, use the `URL` object to create a url to the local video file.

- Load that URL into a `video` element.

- When the video has loaded into memory, draw a frame on a `canvas` object.

- Now export the frame rendered on the canvas into an `image` element (or optionally send that image to your server as a data url).

<input type="file" id="upload"/>
<img id="thumbnail"/>

<script>
var input = document.getElementById('upload');
var img = document.getElementById('thumbnail');

input.addEventListener('change', function(event){
    var file = this.files[0];
    var url = URL.createObjectURL(file);

    var video = document.createElement('video');
    video.src = url;

    var snapshot = function(){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        img.src = canvas.toDataURL('image/png');

        video.removeEventListener('canplay', snapshot);
    };

    video.addEventListener('canplay', snapshot);
});
</script>

Problem

Original source