Extract picture from video blob recorded with VideoJS

Question

I have used VideoJS to record video on my website and send it to server where it will chop up the video into different images based on frame. But now I want to reduce server load, so I'm trying to modify my code to extract images directly after the video has been recorded but I have no idea how to do that.

Here's my videojs source code:

$(document).ready(function(){
    var player = videojs("myVideo", {
        controls: true,
        fluid: true,
        width:250,
        loop: false,
        controlBar: {
            volumePanel: false,
            fullscreenToggle: true
        },
        plugins: {
            record: {
                audio: false,
                video: true,
                timeSlice: 2000,
                maxLength: 1.5,
                debug: true,
                mandatory: {
                  minWidth: 1280,
                  minHeight: 720,
                },
                video: {

                },
                // dimensions of captured video frames
                frameWidth: 1280,
                frameHeight: 720
            }
        }
}, function() {
    // print version information at startup
    var msg = 'Using video.js ' + videojs.VERSION +
        ' with videojs-record ' + videojs.getPluginVersion('record') +
        ' and recordrtc ' + RecordRTC.version;
    videojs.log(msg);
});
// user completed recording and stream is available
player.on('finishRecord', function() {
    // document.getElementById("fileupload").value = player.recordedData;
    formData.delete("video-blob")
    formData.set("video-blob",player.recordedData)
    $("#video_rec").rules('remove')
    $("#video_rec-error").remove()
    $('.submit_btn').removeAttr("disabled")
});

Answer 1

See documentation at https://github.com/collab-project/videojs-record#options

You can add image: true to your record plugin object.

Then on finishRecord event you can get it through player.recordedData .