Socket.io - 每34毫秒接收一次數據

我正嘗試使用從C＃應用捕獲的圖像創建HTML5'遠程桌面'。圖像被轉換成base64字符串並通過socket.io發送到頁面並顯示在畫布上。它在我的電腦上工作得很好，但是在任何速度較慢的電腦上它都沒有。它似乎無法更新得足夠快並導致頁面崩潰。這裏的「接收」行動代號：Socket.io - 每34毫秒接收一次數據

socket.of('/1').on('receive', function (data) { 
    var img = new Image(); 
    img.onload = function() { 
     context.drawImage(img, 0, 0, example.width, example.height); 
    }; 

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

的數據在約29 fps的每34毫秒，從而在畫布更新中發送的，似乎是一個實時視頻。有沒有一種方法可以接收數據並在另一個「線程」中繪製圖像？或者任何人都可以建議如何解決這個問題？謝謝您的幫助。

來源

2012-06-06 Joey Morani

也許瀏覽器崩潰了，因爲下一個數據包在完成第一個數據包渲染之前已經進入。嘗試跳過收到數據包的時間和drawImage調用完成時間之間的數據包。 –

爲什麼它是每幀新圖像？另外：有一個原因，大多數視頻編解碼器不會發送每幀全幀... –

嘿。 @JonBenedicto我不認爲這是因爲即使註釋掉上面的內容但離開事件，它仍然會滯後和崩潰。不過謝謝。 –

Browserling做了你要完成–它顯示使用<canvas>遠程桌面界面到底是什麼。方便的是，他們已經離開their code未分配。你可以看看他們是怎麼做的。

如果您可以將您的C＃設置爲VNC服務器，我會使用noVNC，這是一個瀏覽器VNC客戶端，它使用WebSockets和<canvas>。（值得一讀的是noVNC的performance notes。）

來源

2012-06-06 18:07:26 josh3736

謝謝喬希。我會看看代碼，看看我能從中得到什麼。 –

-1

只要UI/DOM正在更新，更改，更改或與更改視口有關的任何操作，在此期間瀏覽器將鎖定視口。

現在你想要做的事情幾乎是不可能的，而我沒有說不可能的唯一原因是因爲你永遠不知道現在的日子;）。

我也是c＃開發人員，而且我非常bit at這次在明年將會在這裏爲我們所做的更改。

找你每年大約要早...

來源

2012-06-06 17:55:20

這並沒有真正有建設性地回答這個問題。 – josh3736

不，您無法實現此類操作。從服務器中檢索數據並更新速度足以模擬照片電影或純粹使用今天的瀏覽器和JavaScript作爲客戶端來移動圖片。 –

[False。]（http://www.browserling.com/） - *「我們在我們的服務器上運行瀏覽器，完全交互式會話，而不是靜態截圖，沒有flash，沒有小程序，沒有任何安裝。 '

雖然你使用的socket.io允許跨服務器進行交互通信並在服務器之間發送數據到客戶端，你應該使機制不僅僅是垃圾郵件客戶端與數據，但要小心一點。

當您向客戶端發送圖像數據時，請勿立即發送另一個圖像數據。首先ping可以是一件事，但帶寬可能很低 - 是另一回事。
當您將圖像數據從服務器發送到客戶端時，客戶端會接收數據，使客戶端自動發送到您接收到數據並處理它的服務器信息，使服務器知道客戶端已準備好接收下一個圖像。

您的FPS將被丟棄，但這是常見的做法，可以使實時視頻在任何類型的連接和任何類型的分辨率下都能高效地工作。
這不是在播放已存在的視頻 - 因此沒有緩衝或預緩存過程的地方。爲了稍微提高性能，可以根據ping和反應速度來計算接收和處理圖像以便稍後發送下一幀，這可能會使FPS在正常連接時增加5-10倍，在慢速時增加0-3倍。與此同時，您可能希望看一下更好的流式傳輸實時圖像的方式，例如MJPEG（Motiona JPEG），它允許流式傳輸實時圖像，但要離開websockets，因爲使用WebSockets進行圖像傳輸創建額外的處理層以滿足協議細節。而MJPEG旨在用於圖像流。

來源

2012-06-07 09:16:03 moka

此線程有點舊，您可能已找到解決方案。

如果沒有，您可以看看Myrtille，一個基於HTML4/5瀏覽器的遠程桌面客戶端。它使用C＃，websockets，canvas和base64編碼圖像（PNG，JPEG或WEBP，取決於配置和帶寬）。

幾年前，HTML5瀏覽器無法應對大型websocket流量，所以我試圖設置2個websocket：一個用於上行鏈路和另一個下行鏈路。它有點幫助，但不是很滿意。我試圖扼殺websocket，在發送下一個包之前讓客戶端數據包接收到ack。在某些瀏覽器上更好，但導致其他瀏覽器放緩。

如今的瀏覽器不需要這樣的限制; Myrtille只需將圖像在瀏覽器中彈出即可。

也就是說，RDP協議足夠智能，可以像大多數視頻編解碼器一樣處理和發送兩個幀（區域）之間的差異，而不是整個顯示器。

來源

2016-04-11 16:51:44 cedrozor

Socket.io - 每34毫秒接收一次數據

回答

相關問題