How to stop the stream when the timer ends

    <h1 id="div3">{{ pageTitle }}</h1>
    <div class="container">
        <button (click)="startVideo()" id="div4">Show Me</button>
        <div
            class="small-box-container"
            *ngIf="showVideo"
            [@fadeInOut]="fadeInOutState"
        >
            <div class="overlay">
                <div class="text">
                    <h2>Capturing emotion</h2>
                    <h4>Don't move, Stay still !!</h4>
                </div>
                <div class="countdown-container">
                    <mat-progress-spinner
                        [value]="progressValue"
                        color="warn"
                        mode="determinate"
                        diameter="50"
                        class="center-spinner"
                    ></mat-progress-spinner>
                </div>
                <img
                    id="video"
                    [src]="videoUrl"
                    alt="Video Stream"
                    class="small-box"
                />
            </div>
        </div>
    </div>

This is my html page

import { Component, OnInit, OnDestroy, ViewChild } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";
import { CancelrequestService } from './cancelrequest.service';
import { ChangeDetectorRef } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from "@angular/animations";
import { Router } from "@angular/router";

@Component({
  selector: "app-home-page",
  templateUrl: "./home-page.component.html",
  styleUrls: ["./home-page.component.css"],
  animations: [
    trigger("fadeInOut", [
      state(
        "in",
        style({
          opacity: 1,
        }),
      ),
      transition(":enter", [style({ opacity: 0 }), animate(300)]),
      transition(":leave", [animate(300, style({ opacity: 0 }))]),
    ]),
  ],
})
export class HomePageComponent implements OnInit, OnDestroy {
  lastPrediction: string[] | null = null;
  lastPredictionValue: string | null = null;
  pageTitle: string = "How are you feeling today?";

  showVideo = false;
  videoUrl = "http://127.0.0.1:5000/video_feed";
  fadeInOutState = "out";
  countdown = 5;
  progressValue = 100; // Initial value for mat-progress-spinner
  progressInterval: any; // Interval reference
  videoComponentActive = false;
  loadingTimeout: any; // Added boolean flag
  httpSubscription: any;

  constructor(
    private router: Router,
    private cdRef: ChangeDetectorRef
  ) {
    
  }
  @ViewChild('video', { static: false }) videoElementRef: any;
  

  ngOnInit() {
    //this.startProgressInterval();
  }

  ngOnDestroy() {
    //this.clearProgressInterval();
  }

  private startProgressInterval() {
    if (!this.progressInterval) {
      const totalTime = 10; // Total time in seconds
      const intervalTime = 100; // Interval time in milliseconds
      const steps = (totalTime * 1000) / intervalTime; // Number of steps

      let currentStep = 0;

      this.progressInterval = setInterval(() => {
        currentStep += 1;
        this.progressValue = 100 - (currentStep / steps) * 100;

        if (currentStep === steps) {
          this.clearProgressInterval();
          this.closeStream();
        }
      }, intervalTime);
    }
  }

  

  private clearProgressInterval() {
    clearInterval(this.progressInterval);
    this.progressInterval = null;
    
  }

  startVideo() {

    // Reset countdown and progress values
    this.countdown = 5;
    this.progressValue = 100;

    //this.clearProgressInterval(); // Clear any existing interval



    this.startProgressInterval();

    this.videoUrl = "http://127.0.0.1:5000/video_feed";
    this.showVideo = true;
    this.fadeInOutState = "in";
    this.videoComponentActive = true; 
    
    
  }

  
  

  closeStream() {
    this.showVideo = false;
    console.log("reached here");
    this.videoUrl = "invalid"
    console.log(this.videoUrl);
    this.clearProgressInterval();
    this.cdRef.detectChanges();
  }

  onHistory() {
    this.router.navigate(["/history"]);
  }

  onLogout() {
    this.router.navigate(["/"]);
  }
}

And this is my component.ts file

I have a backend that uses flask running a facial recognition model to capture emotions, basically when the user clicks the button a pop up is created the facial recognition model gets called and a live video feed is shown and a small timer starts and then after the timer ends the pop up and the video feed close but the api continues to get called and therefore my webcam stays on and everything resets when i refresh the page. How do I stop the api from getting called after the timer ends?