title: Browser throws error on creating an ObjectURL of an Image Blob after consuming lot of memory
body: <p>Well, I'm running into a strange Error while programming a Web Application that receives Images from a Server via WebSockets. The Server sends about 8 images per second (.bmp) to the browser. Each image has a size of about 300KB. So that's around 2.4Mbps.</p>
  
  <p>The browser receives the images as binary blob:</p>
  
  <pre><code>//WebSocket
  var ws = new WebSocket("ws://192.168.0.10:1337");
  //Image
  var camImg = new Image();
  
  ws.onmessage = function(msg)
  {
      var data = msg.data;
      // handle binary messages from server
      if (data instanceof Blob) camImg.src = window.URL.createObjectURL(data);
  };
  
  camImg.onload = function()
  {
      //draw image to canvas
      canvasCont2D.drawImage(this,0,0);
      //request next frame
      ws.send("give me the next image!");
      //delete ObjectURL
      window.URL.revokeObjectURL(this.src);
  };
  </code></pre>
  
  <p>So until this point everything runs fine. Now I'm coming for the first problem:
  As I was testing this in Chrome I watched at the TaskManager to see how many resources this coding needs. I saw there one process of Chrome that started at about 90MB Memory. Each second there were add 2.4MB. So it looks like every image i receive stays in memory. Is there any possibility to prevent this? The received blobs seem to stay under resources in Chrome developer tools, btw.</p>
  
  <p>Anyway this problem leads me to the second one: The memory consumption of this process rises and rises and after some time at about 400-500MB its kind of flushed and starts again at 90MB, again rising. So long, its just a memory problem. But sometimes it could happen, that the memory is not flushed and rises up to about 600MB. At this point I don't receive any new image. The console shows an error that says:</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 404 (Not Found)</p>
  </blockquote>
  
  <p>This error occurs in this line:</p>
  
  <pre><code>camImg.src = window.URL.createObjectURL(data);
  </code></pre>
  
  <p>At the moment I work around this issue by catching the error event:</p>
  
  <pre><code>camImg.onerror = function()
  {
      //request next frame anyway and wait for memory flush
      ws.send("give me the next image!");
  };
  </code></pre>
  
  <p>So I'm just requesting new images because after some time the memory gets flushed again (after a few seconds) and I can receive new Images.</p>
  
  <p>The same problem(s) occure using Opera as well. I guess its mainly a problem with memory consumption. Maybe a bug in browsers? Or did I made a big programming error?</p>
  
  <p>I would be very thankful for any help as I have no idea left, what could be causing this problem...</p>