How to capture binary data from a WebGL context? [closed]

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

The Basis of 3D Rendering Code

The problem is that the WebGL library is very inefficient, so the only way I was able to send the binary data was by using the gl.readPixels() method that is VERY slow (approximately 3 seconds). Being that I need to stay as smooth as possible.

Below is the form that captures the webGL context and submits via the 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);

}