Img Tag loading livestream after change of Component

Viewed 36

I am using HTML img Tag to show a livestream which comes from an IP-Camera. This works perfectly until you change to another component. Since I set the src to an empty string in OnDestroy I thought it would just stop the download. Just yesterday we found out that this is not the case and Chrome (and Edge) seem to still load the img/livestream after the change of components, which after some time heavily decreases the performance.

HTML:

<img class="livestream" src="{{livestreamUrl}}" />

TS:

public livestreamUrl: string;


  @Input() configuration: LivestreamConfig = undefined;

  constructor(
    private optionEventService: OptionEventService,
  ) { }

  ngOnInit(): void {
    this.livestreamUrl = this.configuration.options.livestreamURL; //00.00.00.00/mjpg/1/video.mjpg
    this.select();
  }

  ngOnDestroy(): void {
    console.log("destroy");
    
    this.livestreamUrl = "";
 }

Now I am curious if there is a way to just stop this "Download" or if this might be a bug in the network console.

A Screenshot of the Network Tab: Network Tab

FYI: I have changed to an other component and back to the Livestream Component multible times which opens another download/request every time but doesn't end the old one (in Chorme at least). Chorme Network Tab The weird thing is that MS Edge seems to just use the old request again and doesnt open anotherone. Edge Network Tab

EDIT: Enabeling Cache seems to change behaviour: with Cache enabled it does not open another request!

0 Answers
Related