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

  ngOnInit() {
  }
  constructor(private el: ElementRef, private renderer: Renderer2) {}
  async ngAfterViewInit() {
    this.player = await loadPlayer({
      url: 'ws://localhost:8081',
      canvas: this.videoPlayer!.nativeElement,

      onDisconnect: () => console.log('Connection lost!'),
    });

    console.log('Connected!', this.player);
  }


}