How to capture binary data from a Webgl context?

Question

I created two HTML clients that communicate through a websocket server. One of the clients draws a 3D model on a canvas using the Three.js library and then sends the Webgl context binary file from the canvas to the other client via websocket. Virtually a canvas stream between multiple clients.

The basis of 3D rendering code

The problem is that the Webgl library is quite inefficient, to the point that the only way I was able to send the binary data was by using the method gl.readPixels() which is VERY slow (about 3 seconds). Being that I need to stay as fluid as possible.

Below is the way I capture the webGL context and send by websocket.

function animate() {

    requestAnimationFrame( animate );

    render();

    var ctx = renderer.getContext();        

    var byteArray = new Uint8Array(1280 * 720 * 4);

    ctx.readPixels(0,0,1280, 720, ctx.RGBA, ctx.UNSIGNED_BYTE, byteArray);

    socket.send(byteArray.buffer);

}