2016-02-29 230 views
1

我在signalR工作,我想通过分割不同部分的视频文件将视频文件从一个客户端发送到另一个客户端。 我已经通过分割图像src数据发送了图像,并在另一个客户机上接收了图像。如何使用JavaScript将视频文件转换为字符串?

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)。

+0

那么,为什么不读取源视频文件只是50 000个字节,发送字节值的文本(例如:“FF-A0-17-AF-BC”等),读取下一个50kb发送。直到所有字节被读取。接收端可以将这些字节值组合成整个文件(您可以编写这样一个应用程序,或者将它们粘贴到某个十六进制编辑器中)。 –

回答

3

这是今天的第二件事,我发现某些事情是真的,我认为是不可能的。我拍下了一个小型MP4视频文件(86KB),然后将其编码到site的数据URI库64中。我与它<video>元素的一个简单的测试页面的src属性设置:

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

所以文本字符串可以是视频,但我不能我的驱动器上找到一个50KB的视频文件很容易,我相信86KB的文件大小足以证明。你可以看到它在这个Plunker

从这个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. 
+0

感谢您的rply Zer00ne。但我已经将图像转换为字符串,因为我提供了代码。实际上,我不知道如何为视频做同样的事情。我希望将完整的视频转换为字符串格式(无需播放/画布元素)。 – vimalraturi

+0

Hi @vimalraturi,我将视频转换为一个字符串,但它是一个不是JavaScript的在线工具。我很确定这可以用像Python这样的服务器端语言来完成。用JS找到解决方案并不奇怪,也许Node? – zer00ne

相关问题