Black frames when using easyrtc with socket.io

Question

we use EasyRTC for sending image captures from iPad (we create screenshots "manually" and send them via socket.io) to web browser. On the server we have EasyRTC v.1.0.12 and Socket.IO v.0.9.16. It's hard to say what happened (i've just joined the project and encountered this issue. PM says that it was ok some time ago) but recently we started to notice that some frames are blacked-out. We are debugging this issue for few days and we're running out of ideas. We are not sure where the problem is. We now that we send correct images from the device. We noticed that it happens only when the image is different from previous one (but not always... it's easier to observe it on the weaker internet connection). When the image is "repeated" (i mean it looks the same but from iPad perspective we create it as new instance) everything is fine.

In attachment you can find info from Chrome network debugger. As you can see in thumbnails or images are ok. These with Size/Content from cache are ok but there with Size 0 and Content > 0 are ones which gives black screens when we want to draw them on the canvas.

Any idea what we're doing wrong? How to debug it? It seems that images are somehow downloaded later than we try to draw them?

Our server is on AWS.

Answer 1

You are trying to send the images up as base 64 encoded jpegs. Basically big text strings. The first thing you should be asking yourself is: is the text string I'm sending up getting to the server, or is it getting truncated? Check the length of the string being sent versus the length of the string being sent, and then check the start and ends of the string.

Answer 2

Finally we found the solution which is pretty easy. It turned out that we was trying to draw an image before it was fully loaded. So what we did was to move drawing code to image.onLoad method and now it works as expected.

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