A Simple SVG Streaming Client

NOTE: I originally posted this on Snipplr.

This is a simple SVG streaming client, which displays the output on an HTML5 canvas element. The server can be (almost) transparently restarted (output freezes). The client allows for adjusting the FPS and changing the input stream.

The server is at http://snipplr.com/view/64802/simple-svg-streaming-server/. (NOTE: Now mirrored locally.)

<!doctype html>
<html>
    <head>
        <title>SVG Streaming Client</title>

        <script src="http://code.jquery.com/jquery-git.js"></script>
        <script>
            function start_stream() {
                stream_sink             = $("#stream_sink")[0].getContext("2d");
                stream_source           = new Image();
                stream_source.onload    = function() {
                    clear_sink();
                    stream_sink.drawImage(stream_source, 0, 0, stream_source.width, stream_source.height);
                };

                return setInterval(update_stream, (1000 / $("#fps").val()));
            }

            function clear_sink() {
                stream_sink.fillStyle = "#454A41";
                stream_sink.fillRect(0, 0, 640, 480);
            }

            function update_sink(data, text_status, jqXHR) {
                stream_source.src = data;
            }

            function update_stream() {
                $.ajax({
                    url:        $("#stream").val(),
                    success:    update_sink,
                    dataType:   "text"});
            }

            $(function(){
                interval_id = start_stream();
                $("#fps").change(function() {
                    clearInterval(interval_id)
                    interval_id = setInterval(update_stream, (1000 / $("#fps").val()));
                });
            });
        </script>
    </head>
<body>
    <section>
        <canvas id="stream_sink" width="640" height="480"></canvas>
        <form>
            <label for="stream">Stream</label>: <input id="stream" type="text" value="clock.svg">
            <label for="stream">FPS</label>: <input id="fps" type="range" min="0" max="1000" step="5" value="1">
        </form>
    </section>
</body>
</html>

Sections