How to render dynamic bitmap stream to canvas?

I have written an OpenGL game and I want to allow remote playing of the game through a canvas element. Input is easy, but video is hard.

What I am doing right now is launching the game via node.js 开发者_运维问答and in my rendering loop I am sending to stdout a base64 encoded stream of bitmap data representing the current frame. The base64 frame is sent via websocket to the client page, and rendered (painstakingly slowly) pixel by pixel. Obviously this can't stand.

I've been kicking around the idea of trying to generate a video stream and then I can easily render it onto a canvas through a tag (ala http://mrdoob.github.com/three.js/examples/materials_video.html).

The problem I'm having with this idea is I don't know enough about codecs/streaming to determine at a high level if this is actually possible? I'm not sure if even the codec is the part that I need to worry about being able to have the content dynamically changed, and possibly on rendered a few frames ahead.

Other ideas I've had:

• Trying to create an HTMLImageElement from the base64 frame
• Attempting to optimize compression / redraw regions so that the pixel bandwidth is much lower (seems unrealistic to achieve the kind of performance I'd need to get 20+fps).

Then there's always the option of going flash...but I'd really prefer to avoid it. I'm looking for some opinions on technologies to pursue, ideas?

Try transforming RGB in YCbCr color space and stream pixel values as:

Y1 Y2 Y3 Y4 Y5 .... Cb1 Cb2 Cb3 Cb4 Cb5 .... Cr1 Cr2 Cr3 Cr4 Cr5 ...

There would be many repeating patterns, so any compressing algorithm will compress it better then RGBRGBRBG sequence.

http://en.wikipedia.org/wiki/YCbCr

1. Why base64 encode the data? I think you can push raw bytes over a WebSocket

2. If you've got a linear array of RGBA values in the right format you can dump those straight into an ImageData object for subsequent use with a single ctx.putImageData() call.