2012-06-05 36 views
1

我試圖創建一個視頻流,通過捕獲和jpeg圖像轉換成base64字符串,然後發送它使用websockets(Nodejs和socket.io)在HTML5畫布上繪圖。這是捕獲屏幕,並使用SocketIO4Net庫發送它在C#代碼:通過Web套接字快速發送base64字符串?

Client directSocket = new Client("http://IPHERE"); 
directSocket.Connect(); 

private void timer1_Tick(object sender, EventArgs e) 
{ 
    Rectangle bounds = Screen.GetBounds(Point.Empty); 
    Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height); 

    using (Graphics g = Graphics.FromImage(bitmap)) 
    { 
     g.CopyFromScreen(Point.Empty, Point.Empty, bounds.Size); 
    } 

    pictureBox1.Image = bitmap; 

    // Convert the pictureBox into a byte[] array 
    System.IO.MemoryStream stream = new System.IO.MemoryStream(); 
    pictureBox1.Image.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg); 
    byte[] imageBytes = stream.ToArray(); 

    // Convert byte[] to Base64 string 
    string base64String = Convert.ToBase64String(imageBytes); 

    // Send using SocketIO4Net 
    directSocket.Emit("send", new { message = base64String }); 
} 

這工作正常和base64String發送到發射它的節點服務器。這是客戶端JavaScript代碼:

var socket = io.connect('IPHERE'); 

socket.on('receive', function (data) { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 

    var img = new Image(); 
    img.onload = function() { 
     context.drawImage(img, 0, 0, canvas.width, canvas.height); 
    }; 

    img.src = "data:image/jpeg;base64," + data.message.message; 
}); 

我的問題是,base64String大,沒有發出足夠快的客戶接受它,並在畫布上顯示圖像。我不確定它是否是我的節點服務器(這是一個便宜的VPS),或者如果字符串太大。是否可以壓縮base64String,然後在收到它時將其發送給解壓縮對象?或者有另一種方法可以做到這一點?謝謝您的幫助。

回答

1

您可以嘗試將圖像保存爲質量較低的jpg圖像。您可以使用Save覆蓋,該覆蓋接受編碼器和編碼器參數。

+0

謝謝。這有效,但我希望保持圖像的質量。有沒有辦法做到這一點,併發送速度? –

+0

你將不得不平衡速度和質量。如果連接速度夠快,您可以實施一些措施來計算是否從服務器獲得足夠的FPS,然後提高質量。 –

+0

非常有用!今天要試試這個! –

0

如果您只需要支持現代瀏覽器,請使用畫布元素並通過原始字節發送該數據。使用ImageData對象將數據推送到canvas元素。

有關如何創建ImageData對象的更多信息,請參閱MDN文章"Pixel manipulation with canvas"

0

lyesterday我用c#測試它 - base64 - websocket - 連接到gwt(java腳本)img對象。我在內聯網中使用它,流的性能很好。但是如果你測試它,你會在Firefox中看到內存泄漏。因爲Firefox緩存所有圖像。在我的情況下每秒10張圖片。一張圖片200kb。 這個弱我測試畫布部分。