Question

I’m attempting to create a HTML5 ‘remote desktop’ using images captured from a C# app. The images are are converted into base64 strings and sent via socket.io to the page and displayed on the canvas. It works pretty well on my PC, but on any slower computer it doesn’t. It can’t seem to update fast enough and causes the page to crash. Here’s the ‘receive’ action code:

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;
});

The data is sent every 34 milliseconds so the canvas updates at around 29 fps and appears to be a live video. Is there a way I can receive the data and draw the image in another “thread”? Or can anyone suggest how to fix this issue? Thanks for the help.

Answer 1

Browserling does exactly what you’re trying to accomplish – it displays a remote desktop interface using <canvas>. Conveniently, they’ve left their code unminified. You you could take a look at how they’re doing it.

If you can set your C# end up as a VNC server, I’d use noVNC, a browser VNC client that uses WebSockets and <canvas>. (Worth reading are noVNC’s performance notes.)