使用带有socket.io的easyrtc时的黑框

Question

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

在附件中，您可以从Chrome网络调试程序中找到相关信息。正如您在缩略图或图像中看到的那样。这些具有来自缓存的大小/内容是可以的，但是具有大小0和内容＆gt; 0是当我们想在画布上绘制它们时给出黑屏的。

知道我们做错了什么吗？怎么调试呢？似乎图像以某种方式下载的时间比我们试图绘制的要晚一些？

我们的服务器在AWS上。

Answer 1

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

Answer 2

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

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