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>显示远程桌面界面。他们方便地离开了their code。你可以看看他们是怎么做的。

如果您可以将C＃设置为VNC服务器，我将使用noVNC，一个使用WebSockets和<canvas>的浏览器VNC客户端。（值得一读的是noVNC的performance notes。）

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正在更新，更改，更改或与更改视口有关，浏览器将在此期间锁定。

现在你要做的事几乎是不可能的，而且我没有说不可能的唯一原因是因为你现在不知道几天;）。

我也是一名c＃开发人员，而且我对于明年这次将要为我们提供的更改非常感兴趣。

你大约一年到早......

Socket.io - 每34毫秒接收一次数据

4 个答案: