title: How to render dynamic bitmap stream to canvas?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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 <a href="http://mrdoob.github.com/three.js/examples/materials_video.html" rel="nofollow">http://mrdoob.github.com/three.js/examples/materials_video.html</a>). </p>
  
  <p>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.</p>
  
  <p>Other ideas I've had:</p>
  
  <ul>
  <li>Trying to create an HTMLImageElement from the base64 frame</li>
  <li>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).</li>
  </ul>
  
  <p>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?</p>