2016-02-29 225 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

相關問題