Streaming MJPEG images and memory build up - Angular2 HTTP handling for images - is there a way?

Question

I have a problem related to how browsers handle persistence of <img src> connections for which I can't figure out a solution. I had posted a question here about an approach but the problem is actually wider, so I thought I'd post a more generic question that takes a step back. This problem is not unique to Angular2 (I faced the same problem in Angular1, and did some ugly hacks which I'll describe later, and want to know if there is a better way in Angular2+)

Problem Statement:

• 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 Angular seems to be that the browser 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, 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.

• 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 (which was the genesis of my question I asked earlier). 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.

• I use Ionic as the UI framework for my app development (if it matters).

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

Answer 1

I have a similar problem, but just do not know how to find a solution. I suggest to change the server implementation and to give the base64 from the server, but it seems very expensive... mu question