将 easyrtc 与 socket.io 一起使用时出现黑帧

Question

我们使用 EasyRTC 从 iPad 发送图像捕获（我们创建屏幕截图 "manually" 并通过 socket.io 发送）到网络浏览器。在服务器上，我们有 EasyRTC v.1.0.12 和 Socket.IO v.0.9.16。很难说发生了什么（我刚加入项目遇到这个问题。PM说前段时间没问题）但是最近我们开始注意到有些框架被黑了。我们正在调试此问题几天，但我们运行没有想法。我们不确定问题出在哪里。我们现在从设备发送正确的图像。我们注意到只有当图像与之前的图像不同时才会发生这种情况（但并不总是......在较弱的互联网连接上更容易观察到它）。当图像是 "repeated" 时（我的意思是它看起来一样，但从 iPad 的角度来看我们将其创建为新实例）一切都很好。

在附件中，您可以找到来自 Chrome 网络调试器的信息。正如您在缩略图或图像中看到的那样，没问题。这些来自缓存的 Size/Content 没问题，但是当我们想在 canvas.

上绘制它们时，大小为 0 且内容 > 0 的那些会出现黑屏

知道我们做错了什么吗？如何调试呢？似乎以某种方式下载图像比我们尝试绘制图像晚？

我们的服务器在 AWS 上。

Answer 1

您正在尝试以 base 64 编码的 jpeg 格式发送图像。基本上是大文本字符串。您应该问自己的第一件事是：我发送的文本字符串是到达服务器，还是被截断了？检查正在发送的字符串的长度与正在发送的字符串的长度，然后检查字符串的开头和结尾。

Answer 2

最终我们找到了非常简单的解决方案。事实证明，我们试图在图像完全加载之前绘制图像。所以我们所做的是将绘图代码移动到 image.onLoad 方法，现在它按预期工作了。

img.src = "data:image/png;base64, <img content>";
img.onload = function(){ 
   canvas.drawImage(img);
}

将 easyrtc 与 socket.io 一起使用时出现黑帧

Black frames when using easyrtc with socket.io

amazon-web-services

websocket

socket.io

webrtc

easyrtc