Looking for some expert opinions - handling long standing img src TCP connections

Ionic Framework ionic-v3
1

I’m quite new to Angular2, and its very likely that there are constructs, especially in the RxJS world that might help. I posted this question to Stackoverflow but haven’t received any response.

Here is is the problem:

  • I have to work with a back end server (3rd party) that streams images on a continuous basis from an IP camera. The server basically keeps sending continuous Content-Type:image/jpeg images that when rendered on an HTML page using <img src='server url'> renders a ‘live stream’ of the camera. I know modern systems directly re-stream/mux H264/HLS videos that you can use <video> elements for. This server doesn’t.

  • The problem of doing an <img src> in a WebView seems to be that the core browser engine initiates and completely takes control of the underlying TCP connection and the app has absolutely no way to control it. Even if you exit the view, the TCP object persists and over time if one end is sending data, as I monitor my server, I see a gradual build up of both old and new connections that eventually thrash the server. Given that the client doesn’t terminate the connection, the TCP connection continues

  • You’d think doing an <ngIf> on this connection and forcibly removing it from the DOM would do the trick, but it doesn’t. I’ve tested this several times. The <ngIf> removes it from the DOM, but the browser engine doesn’t release the TCP connection (as the server keeps transmitting data - this part I found odd. I though an ngif should equal to terminating a connection)

  • Enter HTTP observables in Angular. I thought instead of directly rendering the images in <img src> I could write a backend service that does http.get & subscribe to receive the streamed data and then render it on screen, with the advantage that since I have its handle, I can unsubscribe from it. However, that blew up in my face, because since this was HTTP and the server kept streaming image/jpeg continuously, my subscribe handler is never really called, as the data never stops.

  • In Angular1 I had to do a terrible hack, which involved calling window.stop() that force terminated all connections in the page. While this worked, it also had several side effects about interfering with concurrent route navigations as well (any URL operation was terminated) and I had to go through a lot of messy timings to get it right.

Is there any construct in Angular I can explore that can solve this predicament that doesn’t require server side modifications?