advanced code snippet search

Posted By

weilawei on 05/07/12


Tagged

ajax streaming client canvas svg


Versions (?)

Simple SVG Streaming Client

 / Published in: HTML
 

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/.

Expand | Embed | Plain Text 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>SVG Streaming Client</title>
  5.  
  6.         <script src="http://code.jquery.com/jquery-git.js"></script>
  7.         <script>
  8.             function start_stream() {
  9.                 stream_sink             = $("#stream_sink")[0].getContext("2d");
  10.                 stream_source           = new Image();
  11.                 stream_source.onload    = function() {
  12.                     clear_sink();
  13.                     stream_sink.drawImage(stream_source, 0, 0, stream_source.width, stream_source.height);
  14.                 };
  15.  
  16.             	return setInterval(update_stream, (1000 / $("#fps").val()));
  17.             }
  18.  
  19.             function clear_sink() {
  20.                 stream_sink.fillStyle = "#454A41";
  21.                 stream_sink.fillRect(0, 0, 640, 480);
  22.             }
  23.  
  24.             function update_sink(data, text_status, jqXHR) {
  25.                 stream_source.src = data;
  26.             }
  27.  
  28.             function update_stream() {
  29.                 $.ajax({
  30.                     url:        $("#stream").val(),
  31.                     success:    update_sink,
  32.                     dataType:   "text"});
  33.             }
  34.  
  35.             $(function(){
  36.                 interval_id = start_stream();
  37.                 $("#fps").change(function() {
  38.                     clearInterval(interval_id)
  39.                     interval_id = setInterval(update_stream, (1000 / $("#fps").val()));
  40.                 });
  41.             });
  42.         </script>
  43.     </head>
  44. <body>
  45.     <section>
  46.         <canvas id="stream_sink" width="640" height="480"></canvas>
  47.         <form>
  48.             <label for="stream">Stream</label>: <input id="stream" type="text" value="clock.svg">
  49.             <label for="stream">FPS</label>: <input id="fps" type="range" min="0" max="1000" step="5" value="1">
  50.         </form>
  51.     </section>
  52. </body>
  53. </html>

Report this snippet  

You need to login to post a comment.