3

我正在尝试使用从 C# 应用程序捕获的图像创建 HTML5“远程桌面”。图像被转换成 base64 字符串并通过 socket.io 发送到页面并显示在画布上。它在我的 PC 上运行良好，但在任何速度较慢的计算机上都不能。它似乎无法足够快地更新并导致页面崩溃。这是“接收”操作代码：

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 的速度更新，并且看起来像是实时视频。有没有办法可以接收数据并在另一个“线程”中绘制图像？或者任何人都可以建议如何解决这个问题？谢谢您的帮助。

4

4 回答 4

1

Browserling完全符合您的要求 - 它使用<canvas>. 方便的是，他们的代码未缩小。你可以看看他们是怎么做的。

如果您可以将您的 C# 设置为VNC服务器，我会使用noVNC，一个使用 WebSockets 和<canvas>. （值得一读的是 noVNC 的性能说明。）

于 2012-06-06T18:07:26.620 回答
0

当您使用 socket.io 时，它允许进行交叉通信并将数据从客户端发送到服务器，就像服务器到客户端一样，您应该使机制不仅仅是向客户端发送垃圾邮件数据，而是要更加小心。

当您向客户端发送图像数据时，不要立即发送另一个。首先，ping 可以低是一回事，但带宽可以低 - 是另一回事。
当您将图像数据从服务器发送到客户端时，客户端接收数据，使客户端自动将您收到数据并处理它的信息发送到服务器，使服务器知道客户端已准备好接收下一个图像。

您的 FPS 将被丢弃，但这是使实时视频在任何类型的连接和任何类型的分辨率下高效工作的常见做法。
这不是播放已经存在的视频 - 因此没有缓冲或预缓存过程的地方。
为了稍微提高性能，您可以根据 ping 和反应速度计算接收和处理图像以提前发送下一帧，它可能会在连接良好时增加 5-10 帧，在慢速连接时增加 0-3 帧。

与此同时，您可能希望了解更好的实时图像流式传输方式，例如 MJPEG (Motiona JPEG)，它允许流式传输实时图像，但要远离 websocket，因为使用 WebSockets 进行图像流式传输会创建额外的处理以满足协议细节。而 MJPEG 旨在用于图像流。

于 2012-06-07T09:16:03.150 回答
0

这个线程有点旧，你可能已经找到了解决方案。

如果没有，你可以看看Myrtille，一个基于 HTML4/5 浏览器的远程桌面客户端。它使用 C#、websockets、canvas 和 base64 编码图像（PNG、JPEG 或 WEBP，取决于配置和带宽）。

几年前，HTML5 浏览器无法应对大的 websocket 流量，所以我尝试设置 2 个 websocket：一个用于上行链路，另一个用于下行链路。它有一点帮助，但不是很令人满意。我试图限制 websocket，让客户端数据包在发送下一个数据包之前收到确认。在某些浏览器上效果更好，但在其他浏览器上却导致速度变慢。

现在的浏览器不需要这样的限制。Myrtille 只需将图像推送到浏览器即可。

也就是说，RDP 协议足够智能，可以只处理和发送两个帧（区域）之间的差异，就像大多数视频编解码器一样，而不是整个显示。

于 2016-04-11T16:51:44.240 回答
-1

只要 UI / DOM 正在更新、更改、更改或与更改视口有关的任何事情，浏览器就会在此期间锁定。

现在你想做的事情几乎是不可能的，我没有说不可能的唯一原因是因为你现在永远不知道;)。

我也是 ac# 开发人员，我非常渴望明年这个时候将为我们带来的变化。

你还早一年...

于 2012-06-06T17:55:20.763 回答