iot-web-ui/src/app/modules/overview/camera-stream/camera-stream.component.ts

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

@Component({
  selector: 'app-camera-stream',
  templateUrl: './camera-stream.component.html',
  styleUrls: ['./camera-stream.component.scss']
})
export class CameraStreamComponent implements OnInit, AfterViewInit{
  player?: Player;

  @ViewChild('videoPlayer')
  videoPlayer?: ElementRef<HTMLCanvasElement>;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
  }

  async ngAfterViewInit() {
    const connect = async () => {
      this.player = await loadPlayer({
        url: 'ws://localhost:8080/stream',
        canvas: this.videoPlayer!.nativeElement,
        onDisconnect: () => {
          setTimeout(connect, 5000); // reconnect after 5 seconds
        },
      });
    };
    connect();
  }


}