refactor camera

src/app/shared/component/camera-dialog/camera-dialog.component.html

 <div mat-dialog-content>
   <div fxLayout="row" fxLayoutAlign="center center"  fxLayoutGap="10px"
        style="height: 50%;"
-       *ngIf="!videoLoaded">
+       *ngIf="!player">
     <div class="circle-loader"></div>
     <div class="loader"></div>
   </div>
-  <canvas class="video" #videoPlayer [hidden]="!videoLoaded"></canvas>
+  <canvas class="video" #videoPlayer [hidden]="!player"></canvas>
 </div>

src/app/shared/component/camera-dialog/camera-dialog.component.ts

-import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {MatDialogRef} from "@angular/material/dialog";
 import {loadPlayer, Player} from "rtsp-relay/browser";
 
   templateUrl: './camera-dialog.component.html',
   styleUrls: ['./camera-dialog.component.scss']
 })
-export class CameraDialogComponent implements AfterViewInit{
+export class CameraDialogComponent implements AfterViewInit, OnDestroy{
 
   player?: Player;
-  videoLoaded: boolean = false;
   @ViewChild('videoPlayer') videoPlayer?: ElementRef<HTMLCanvasElement>;
 
   constructor(public dialogRef: MatDialogRef<CameraDialogComponent>) { }
 
   async ngAfterViewInit() {
-    const connect = async () => {
       this.player = await loadPlayer({
         url: 'wss://wss.aztrace.vn/stream',
         canvas: this.videoPlayer!.nativeElement,
-        onDisconnect: () => {
-          setTimeout(connect, 5000);
-        },
+        onDisconnect(): void{
+          console.log('disconnect camera, please wait');
+        }
       });
-      this.videoLoaded = true;
-    };
-    connect();
   }
 
   onClose(): void {
     this.dialogRef.close();
   }
 
+  ngOnDestroy(): void {
+    if (this.player){
+      this.player?.destroy();
+    }
+  }
 }