I'm trying to capture a frame with gl.readPixels and send the data to my server. For testing purposes, I tried rendering a texture with the same Uint8Array I used with gl.readPixels, but unfortunately can't get the texture to show an image.   Let me share the steps I'm taking.

I made sure to allocate memory outside of the game loop:

const width     = Game.Renderer.width;
const height    = Game.Renderer.height;

let pixels = new Uint8Array(4 * width *  height);

And before i unbind the frame buffer in the drawing function, I pick up the pixels:

    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    if (stream) {
        if (stream.ready) 
                stream.socket.send(pixels);
    }

This is also where I send the pixels to the server.

In my render function I have a function updating the texture I use for displaying video, or in this case: a different image every frame:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._video)

This works perfectly with a video or an image element, but if I pass in my uint8array no image is rendered. 

The plan is to have the server send that same array to the other clients so they can use it to update their textures. Hopefully this makes sense. Thanks!

BTW: Not sure why my thread appeared two times, my connection timed out and I guess I pressed it two times. My apologies mods, I hid the duplicate thread.

Do you have tested that you are really having data in your buffer like flushing the buffer before capturing the image? If you dont then the render buffer might be in initial state (black I guess) and you will get just that black image instead of what is floating arround in the background. What you do is transfering data to the GPU but that dosent mean that data is rendered immediatly for some performance reasons the GPU awaits a frame rerender to lock and store data into the back buffer