<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?