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

Question

我正在嘗試使用從C＃應用程序捕獲的圖像創建HTML5“遠程桌面”。 圖像將轉換為base64字符串，並通過socket.io發送到頁面並顯示在畫布上。 它在我的電腦上工作得很好，但在任何較慢的電腦上它都沒有。 它似乎無法足夠快地更新並導致頁面崩潰。 這是'接收'動作代碼：

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

數據每34毫秒發送一次，因此畫布以29 fps的速度更新，並且看起來像是一個實時視頻。 有沒有辦法可以接收數據並在另一個“線程”中繪制圖像？ 或者任何人都可以建議如何解決這個問題？ 謝謝您的幫助。

Answer 1

Browserling完全符合您要完成的任務 - 它使用<canvas>顯示遠程桌面界面。 方便的是，他們的代碼沒有被貶低。 你可以看看他們是怎么做的。

如果您可以將C＃設置為VNC服務器，我將使用noVNC ，一個使用WebSockets和<canvas>的瀏覽器VNC客戶端。 （值得一讀的是noVNC的性能說明 。）

Answer 2

當你使用socket.io允許進行交叉通信並在服務器到客戶端的任何時間從客戶端發送數據時，你應該讓機制不只是垃圾郵件客戶端有數據，而是要更加小心。

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

您的FPS將被刪除，但這是通常的做法，使實時視頻在任何類型的連接和任何類型的分辨率下都能高效工作。
這不是播放已經存在的視頻 - 因此沒有緩沖或預緩存過程的地方。
為了略微提高性能，您可以根據ping和反應速度計算接收和處理圖像以便稍早發送下一幀，它可能會在良好連接時將FPS提高5-10，在慢連接時提高0-3。

與此同時，您可能希望了解更好的流式實時圖像流，如MJPEG（Motiona JPEG），它允許流式傳輸實時圖像，但是要遠離websockets，因為使用WebSockets進行圖像流傳輸會創建額外的圖層。處理以滿足協議細節。 雖然MJPEG旨在用於圖像流。

Answer 3

這個帖子有點舊，你可能已經找到了解決方案。

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

幾年前，HTML5瀏覽器無法應對大量的websocket流量，因此我嘗試設置2個websockets：一個用於上行鏈路，另一個用於下行鏈路。 它有點幫助，但不是很令人滿意。 我嘗試限制websocket，在發送下一個之前讓客戶端數據包接收確認。 在某些瀏覽器上它更好，但導致其他瀏覽器減速。

現在瀏覽器不需要這樣的限制; Myrtille只是將圖像推送到瀏覽器。

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

Answer 4

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

現在你想要做的幾乎是不可能的，而且我沒有說不可能的唯一原因是因為你現在不知道幾天;）。

我也是＃開發人員，我對於明年這次將要為我們提供的更改感到非常滿意。

你大約一年到早......