如何使用JavaScript将视频文件转换为字符串？

Question

如何使用JavaScript将视频文件转换为字符串？

javascripthtmlvideosignalrvideo-processing

3

我正在使用SignalR技术，希望能将视频文件从一个客户端分割成不同部分并发送到另一个客户端。我已经通过拆分图像的src数据并在另一个客户端接收来发送了图像。

    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]);
            }
        }

现在我希望对于视频也能实现同样的功能。我从 input type ="file" 中读取视频。然后，我知道如何将该视频放入HTML视频元素中，但我想将视频所有数据以字符串格式发送到另一个客户端，并通过将该字符串分成不同部分来实现。

注意：SignalR 用于从一个客户端向另一个客户端发送文本。数据大小大约为50kb。

- user3928524

为什么不从源视频文件中读取只有50,000字节，并发送字节值的文本（例如：“FF-A0-17-AF-BC”等），然后读取下一个50kb以进行发送，直到读取所有字节。接收方可以将这些字节值组合成整个文件（您可以编写这样的应用程序，或者他们可以将其粘贴到某个十六进制编辑器中）。 - VC.One

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

今天我发现了第二件我原本认为不可能的事情。我将一个小的MP4视频文件（86KB）编码成了base64数据URI格式，使用了这个网站。我创建了一个简单的测试页面，其中包含一个<video>元素，并设置了它的src属性：

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

因此，一串文本可以是一个视频，尽管我在我的驱动器上找不到一个50KB的视频文件，但我相信86KB的文件大小足以证明。您可以在此Plunker上查看。

从这篇文章中发现了这个方法：

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.