title: Streaming images with Nodejs on embedded device
body: <p>I'm trying to stream images from a Node.js server to a client site. I've started with <code>socket.io</code>, but my implementation is fairly memory intensive (and possibly leaking as I'm not fluent in JavaScript). I'm just prototyping at this point with 10 sample images:</p>
  
  <h3>Server Side</h3>
  
  <p>Responds to a <code>socket.io</code> trigger with the following function that "streams" 10 images to the client at roughly 100ms intervals.</p>
  
  <pre><code>socket.on('img_trigger', function(data) {
      var img_num = 0;           
      var timeoutHandle = null;
  
      function startTimeout() {
          stopTimeout();
          if (img_num &lt; 10) {
              timeoutHandle = setTimeout(updateStream, 100);
          }
      }
  
      function stopTimeout() {
          clearTimeout(timeoutHandle);
      }
  
      function updateStream() {
          var file = './sampleframes/sample-' + img_num + '.png';
          fs.readFile(file , function(err, file_buff) {
              if (err !== null) {
                  console.log('readFile error: ' + err);
              } else {
                  socket.emit('img_stream', { buffer: file_buff });
              }
              file_buff = null;
              ++img_num;
          });
          startTimeout();
      }
      // kicks off first image
      startTimeout();
  });
  </code></pre>
  
  <h3>Client Side</h3>
  
  <p>Capture the raw buffer data and generate a PNG with an <code>&lt;img&gt;</code> element. </p>
  
  <pre><code>socket.on('img_stream', function(data) {
      var img_data =  arrayBufferToBase64(data.buffer);
      var panel = $('#frame-panel');
      $('#frame').html('&lt;img src="data:image/png;base64,' + 
          img_data + '" width="' + panel.width() + '" height="' +
          panel.height() + '" /&gt;');
  });
  </code></pre>
  
  <p>If I trigger the server once, it works fine but not great. I notice the memory usage go up significantly, and it crashes after several triggers. Can I improve my code here to be efficient or should I try a new approach?</p>
  
  <p>I've looked into using <a href="https://nodejs.org/api/fs.html#fs_fs_createreadstream_path_options" rel="nofollow">Node's File Streams</a>, <a href="https://www.npmjs.com/package/socket.io-stream" rel="nofollow">socket.io-streams</a>, and even <a href="http://binaryjs.com/" rel="nofollow">Binary.js</a> (though I hesitate to require our clients to have too-modern of browsers) and they look promising, but I don't quite know which would be best for my use-case. Any help or guidance would be greatly appreciated.</p>
  
  <p>The web interface I'm developing is for an FPGA (Zynq-7000) based camera running PetaLinux with Node.js cross-compiled for the ARM processor, so I don't have a lot of server-side resources to work with. As such, I'd like to have the client-side do as much of the processing as possible. Eventually, streaming video would be incredible, but I'd be satisfied with reading and displaying successive frames at a reasonable rate.</p>