1

I have a big problem with simultaneous connections and browser limits.

In my page I have a button that open a Dialog with a camera preview. Preview is provided by ZoneMinder, a php open source software for camera management.

https://demo.zoneminder.com/
username: zmuser
password: zmpass

The URL provided by ZoneMinder must be used in an IMG tag (src attribute). Its like a jpg stream.

Unfortunally, when I close the Dialog, its seems that browser still keep the connection alive. So I can open up to 6 preview dialog because the 7th is not show due to browser http simultanious connection limit.

The link from ZM is something like this

http://zoneminder/cgi-bin/nph-zms?scale=100&width=640px&height=480px&mode=jpeg&maxfps=30&monitor=3&auth=44917393b19ba0da1331f87e33ea207e&connkey=837202&rand=1612281396

I tried every solution I found from angular:

  • Added an on destroy method in Dialog to override img src:
@HostListener('unloaded')
ngOnDestroy()
{
   this.data.url = null;
}
  • Added takeWhile and unsubscribe to http call (note: killSubscription is called as dialog close callback).
previewCamera(camera)
{
    this.isAlive = true;
    var connection = this.cameraService.buildStreamingLink(parameters);
    this.camera_preview_subscription = connection.pipe(timeout(5000)).pipe(takeWhile(() => this.isAlive)).pipe(map((response: any) => response)).subscribe(
      data => {

        var preview_img_src     = data["data"];

        var dialog_options                      = {};
        dialog_options["data"]["preview_url"]   = preview_img_src;
        
        this._interfaceService.openCustomDialog(CameraPreviewDialog , dialog_options , this.killSubscription.bind(this) );

      },
      err => {
        //some logging
      }
    );

}

killSubscription()
{
    this.isAlive = false;
    this.camera_preview_subscription.unsubscribe();
}

Unfortunally, none of these solution seems works.

How can I force browser to kill every connection still active?

Thanks.

EviSvil
  • 510
  • 3
  • 21
  • Please provide full code/working sample. What is `cameraService`? Seems like you need to dispose the `connection` plus ensure your subscription is unsubscribed. [1]: https://stackoverflow.com/questions/45993521/browser-close-event-in-angular4 – j4rey Feb 02 '21 at 16:56
  • Camera service method is very simple: return this.httpClient.post(this.getApiUrl() + this.url_params["preview_url"], params ); – EviSvil Feb 03 '21 at 08:21

0 Answers0