Hello,
I’m developing an Angular application but I’m stuck on an issue. When creating a stream everything goes as planned but when viewing the stream it sometimes doesn’t show the video but it does show it in the network tab of the browser (After a few page refreshes it stops showing the video). When the video is visible it downscales the quality automatically down after a few seconds again and again and finally blank.
See the files below for the code:
Stream.ts
export class Stream implements OnInit {
OV: OpenVidu;
session: Session;
subscribers: StreamManager[] = []; // Remotes
@Input() public stream: StreamWithTokenDto;
@HostListener('window:beforeunload')
beforeunloadHandler() {
// On window closed leave session
this.leaveSession();
}
ngOnDestroy() {
// On component destroyed leave session
this.leaveSession();
}
async ngOnInit(): Promise<void> {
console.log('Init!!');
this.OV = new OpenVidu();
this.session = this.OV.initSession();
this.session.on('streamCreated', (event: StreamEvent) => {
this.session.subscribe(event.stream, 'video-container');
});
// On every Stream destroyed...
this.session.on('streamDestroyed', (event: StreamEvent) => {
// Remove the stream from 'subscribers' array
this.deleteSubscriber(event.stream.streamManager);
});
await this.session.connect(this.stream.token);
}
leaveSession() {
// --- 7) Leave the session by calling 'disconnect' method over the Session object ---
if ( this.session ) {
this.session.disconnect();
}
// Empty all properties...
this.subscribers = [];
delete this.session;
delete this.OV;
}
private deleteSubscriber(streamManager: StreamManager): void {
let index = this.subscribers.indexOf(streamManager, 0);
if ( index > -1 ) {
this.subscribers.splice(index, 1);
}
}
}
Stream.html
<hh-video-stream
*ngFor="let stream of subscribers"
[streamManager]="stream">
</hh-video-stream>
<div id="video-container" class="video-container"></div>
VideoStream.ts
@Component({
selector: 'app-video-stream',
template: '<video #videoElement></video>',
styleUrls: [ './video-stream.component.scss' ]
})
export class VideoStreamComponent implements AfterViewInit {
@ViewChild('videoElement') elementRef: ElementRef;
_streamManager: StreamManager;
ngAfterViewInit() {
this._streamManager.addVideoElement(this.elementRef.nativeElement);
}
@Input()
set streamManager(streamManager: StreamManager) {
this._streamManager = streamManager;
if (!!this.elementRef) {
this._streamManager.addVideoElement(this.elementRef.nativeElement);
}
}
}