title: Angular2: write cancellable http get function to retrieve MJPEG images (continuously streaming)
body: <p>I am working with a 3rd party backend provider that streams JPEG images over an HTTP connection.</p>
  
  <p>Basically, I do <code>&lt;img src="{{portal_url}}" /&gt;</code> and it keeps streaming images (from a camera)</p>
  
  <p>The problem, I've realized with this approach is that I have no control over the TCP channel that the browser opens and depending on how the view is cached or not, the TCP channel remains open for a long time even after I exit the view.</p>
  
  <p>Instead, I want to implement a function that uses <code>http subscribe</code> to the portal url and renders an image I can display on my browser. The advantage, I believe is I can cancel it anytime, so I don't have to rely on the browser terminating the connection.</p>
  
  <p>Any suggestions on how I go about writing a function? </p>
  
  <p>Note: I can't change the backend - it is what it is.</p>
  
  <p>So far I've got (by looking at other SO answers) but this does not keep streaming images.</p>
  
  <pre><code>getBlob(url) {
      this.http.get(url, {
        headers: new Headers({ 'Content-Type': 'image/jpg' }),
        responseType: ResponseContentType.Blob
      })
  
        .map(res =&gt; res.json())
        .map(blob =&gt; {
          var urlCreator = window.URL;
          return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
        })
  
    }
  </code></pre>