Quickly sending base64 strings over web sockets?

I'm attempting to create a video stream by capturing and converting jpeg images into a base64 string, and then sending it using websockets (Nodejs and socket.io) for drawing on a HTML5 canvas. This is the code in C# for capturing the screen and sending it using the SocketIO4Net library:

Client directSocket = new Client("http://IPHERE");
directSocket.Connect();

private void timer1_Tick(object sender, EventArgs e)
{
    Rectangle bounds = Screen.GetBounds(Point.Empty);
    Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height);

    using (Graphics g = Graphics.FromImage(bitmap))
    {
        g.CopyFromScreen(Point.Empty, Point.Empty, bounds.Size);
    }

    pictureBox1.Image = bitmap;

    // Convert the pictureBox into a byte[] array
    System.IO.MemoryStream stream = new System.IO.MemoryStream();
    pictureBox1.Image.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
    byte[] imageBytes = stream.ToArray();

    // Convert byte[] to Base64 string
    string base64String = Convert.ToBase64String(imageBytes);

    // Send using SocketIO4Net
    directSocket.Emit("send", new { message = base64String });
}

That works fine and the base64String is sent to the node server which emits it. This is the client-side javascript code:

var socket = io.connect('IPHERE');

socket.on('receive', function (data) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

    img.src = "data:image/jpeg;base64," + data.message.message;
});

My problem is that the base64String is large and isn't emitted fast enough for the client to receive it and display the image on the canvas. I'm not sure if it's my node server (it's a cheap VPS) or if the string is just too large. Is it possible to compress the base64String and then send it for decompressing when it's received? Or is there another way I can do it? Thanks for the help.

You could try saving the image as a jpg with a lower quality. You can use the Save override that accepts an encoder and encoder parameters.

If you only need to support modern browsers, use a canvas element and send that data over as raw bytes. Push the data into the canvas element using an ImageData object.

See the MDN article "Pixel manipulation with canvas" for more information on how to create an ImageData object.

lYesterday I test it with c# - to base64 - websocket - connection to gwt (java script) img object. I use it in a intranet the stream performance is nice. But if you test it you see a memory leak in Firefox. Because Firefox cache all images. In my case 10pics per second. One pic 200kb. This weak I test the canvas part.