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

【问题标题】：Socket.io - Receiving data every 34 millisecondsSocket.io - 每 34 毫秒接收一次数据
【发布时间】：2012-06-06 17:45:28
【问题描述】：

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

【问题讨论】：

也许浏览器崩溃了，因为下一个数据包在它完成第一个渲染之前就进来了。尝试跳过从您收到数据包到 drawImage 调用完成之间的数据包。
为什么每帧都是一个新图片？另外：大多数视频编解码器不会每帧发送完整帧是有原因的......
嘿。 @JonBenedicto 我不认为是这样，因为即使注释掉上面的行但离开事件，它仍然会滞后和崩溃。不过还是谢谢。
@MarcGravell 视频编解码器是如何做到的？每次发送半帧并合并它们？你有什么建议？
@Joey 视频编码通常根据现有帧的巧妙增量来工作。

标签： c# javascript canvas live-streaming

【解决方案1】：

Browserling 完全符合您的要求——它使用<canvas> 显示远程桌面界面。方便的是，他们没有缩小their code。你可以看看他们是怎么做的。

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

【讨论】：

谢谢乔希。我会看看代码，看看我能不能从中得到什么。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

这个帖子有点老了，你可能已经找到了解决办法。

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

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

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

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

【讨论】：

【解决方案4】：

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

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

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

你还有一年左右的时间……

【讨论】：

这并没有真正建设性地回答问题。
不，你不能实现这种类型的操作。从服务器检索数据并以足够快的速度对其进行更新，以便完全使用当今的浏览器和 JavaScript 作为客户端来模拟图片电影或运动图片。
False. -- “我们在我们的服务器上运行浏览器。完全交互式会话，而不是静态屏幕截图。没有 Flash，没有小程序，无需安装。完全由 <canvas> 和javascript。”
我现在很好奇看到这样的事情在起作用。你有链接吗？使用新的 html5 画布从服务器流式传输数据并将其显示到某些客户端浏览器上（无需插件），并将客户端上的查看视为远程桌面听起来很有吸引力。有链接吗？
正如我 mentioned, Browserling 所做的那样。到那边去plug in a URL to give it a try。