title: Send Canvas images as a file stream HTML5
body: <p>I am developing a system where the mobile device camera is accessed in the browser and the camera stream frames are send to the other side synchronously. The sent  frames are processed further on the other side .I have drawn the frames to the canvas with a time interval as of the below code. How do i send the accessed frames to the other side for the further processing of frames to happen synchronously?  each frame drawn on the canvas is to be sent to the other side for the further process to happen on each image frame. The other side code is in native language. </p>
  
  <pre><code>$&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;h1&gt;Simple web camera display demo&lt;/h1&gt;
  &lt;body&gt;
  &lt;video autoplay  width="480" height="480" src=""&gt;&lt;/video&gt;
  
  &lt;canvas width="600" height="480" style="" &gt;&lt;/canvas&gt;
  &lt;img src="" width="100" height="100" &gt;&lt;/img&gt;
  
  &lt;script type="text/javascript"&gt;
  var video = document.getElementsByTagName('video')[0], 
  heading = document.getElementsByTagName('h1')[0];
  
  if(navigator.getUserMedia) {
  navigator.getUserMedia('video', successCallback, errorCallback);
  function successCallback( stream ) {
  video.src = stream;
  }
  function errorCallback( error ) {
  heading.textContent = 
  "An error occurred: [CODE " + error.code + "]";
  }
  } else {
  heading.textContent = 
  "Native web camera streaming is not supported in this browser!";
  }
  draw_interval = setInterval(function() 
  {
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var frames = document.getElementById('frames');
  ctx.drawImage(document.querySelector("video"), 0, 0);
  }, 33)
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>