Save Video.js recorder video on the server

Question

I am trying to save Video recorded through Video.js to save on server, below is my code

 <script>
    var player = videojs("myVideo",
    {
        controls: true,
        width: 320,
        height: 240,
        plugins: {
            record: {
                audio: true,
                video: true,
                maxLength: 41,
                debug: true
            }
        }
    });

    player.on('startRecord', function()
    {
        console.log('started recording!');
    });
    player.on('finishRecord', function()
    {
         console.log('finished recording: ', player.recordedData);


    });

function uploadFunction()
{
 **//WRITE CODE TO SAVE  player.recordedData.video in specified folder//**
}   
</script>

Live Implementation : https://www.propertybihar.com/neo/videxp1/index.html

I was going through one the previously asked question, dint worked for me How can javascript upload a blob?

score 1 · Answer 1 · answered Mar 05 '18 at 11:01

If you scroll down to the "Upload" section on the README, you'll see this code snipped that does what you want, except for a streaming application:

var segmentNumber = 0;

player.on('timestamp', function() {
    if (player.recordedData && player.recordedData.length > 0) {
        var binaryData = player.recordedData[player.recordedData.length - 1];

        segmentNumber++;

        var formData = new FormData();
        formData.append('SegmentNumber', segmentNumber);
        formData.append('Data', binaryData);

        $.ajax({
            url: '/api/Test',
            method: 'POST',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log("segment: " + segmentNumber);
            }
        });
    }
});

That is configured for continuously uploading the data but I've found I've had to make a few changes to it for my own setup:

On Chrome 64 with VideoJS 6.7.3 and VideoJS-Record 2.1.2 it seems that player.recordedData is not an array but just a blob.
I wanted to upload the video at a particular time, not streaming so I trigger the upload myself.

As a result, my upload code looks something like this:

if (player.recordedData) {
    var binaryData = player.recordedData.video;
    // ... Rest of that FormData and $.ajax snippet from previous snippet
}

If I don't do it this way, that check for existing data to upload always fails. I also trigger this code manually, rather than attaching it to the "timestamp" event of the player object. Of course, you'll need to have server side code that will accept this upload.

Save Video.js recorder video on the server

1 Answers1