How to convert video file to string using javascript?

Question

I am working in signalR, i want to send a video file from one client to another client by splitting video file in different parts. I had already sent images by splitting image src data and received that on another client.

    document.getElementById("fileUpload").addEventListener("change", readImage, false);
        function readImage() {
            if (this.files && this.files[0]) {
                var FR = new FileReader();
                FR.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        var imageString = img.src.toString()
                        var spliceStr = "";
                        var i = 0;
                        while (i < imageString.length)
                        {
                            spliceStr = imageString.substring(i, (i+50000));
                            ImageSpliceArray.push(spliceStr);
                            i = i + 50000;
                        }
                        $("#imageId").html('<img src="' + img.src + '"/>');
                        testR.server.hello("Start", imageString.length,"");
                        testR.server.hello("FragmentCount", ImageSpliceArray.length,"");
                        for(k=0;k<ImageSpliceArray.length;k++)
                        {
                            testR.server.hello("FragmentData", ImageSpliceArray[k], k);
                        }
                        testR.server.hello("Done", "", "");
                    };
                    img.src = e.target.result;

                };
                FR.readAsDataURL(this.files[0]);
            }
        }

Now I want the same thing for video. I read a video from input type ="file". Then I know to put that video in html video element, but I want the video all data in string format to send that video to another by splitting that string in different parts.

Note:SignalR is used to send text from one client to another client. Having data size approximately(50kb).

Answer 1

This is the second thing today I have found something to be true that I thought wasn't possible. I took a small MP4 video file (86KB) and then encoded it into a data URI base 64 on this site. I made a simple test page of a <video> element with it's src attribute set:

`src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZj....

So a string of text can be a video, although I couldn't find a 50KB video file readily on my drive, I believe 86KB file size is sufficient proof. You can see it on this Plunker

Found this from this article:

function getDataUri(url, callback) {
    var image = new Image();

image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

    canvas.getContext('2d').drawImage(this, 0, 0);

    // Get raw image data
                                                       callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

    // ... or get as Data URI
    callback(canvas.toDataURL('image/png'));
};

image.src = url;

}

// Usage
 getDataUri('/logo.png', function(dataUri) {
// Do whatever you'd like with the Data URI!
 });

You can modify this script to use videos instead of images.