StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to render dynamic bitmap stream to canvas?
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload