iot-web-ui/src/app/shared/component/camera-dialog/camera-dialog.component.ts

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {MatDialogRef} from "@angular/material/dialog";
import {loadPlayer, Player} from "rtsp-relay/browser";

@Component({
  selector: 'app-camera-dialog',
  templateUrl: './camera-dialog.component.html',
  styleUrls: ['./camera-dialog.component.scss']
})
export class CameraDialogComponent implements AfterViewInit{

  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);
        },
      });
      this.videoLoaded = true;
    };
    connect();
  }

  onClose(): void {
    this.dialogRef.close();
  }

}