Angular 6 not showing remote video stream WebRTC

1
votes

I'm implementing video conferencing using native WebRTC.

I have tried to implement video conferencing on plain javascript and it works well. As signalling server I'm using ASP .NET Core with SignalR. Front-end part consists of Angular 6 with CLI.

On the first step I'm receiving my local video stream and attach it to video tag.

This is my ts file

    private getMedia(): void {

    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: true
      })
      .then((stream: MediaStream) => {
        this.localVideo.nativeElement.srcObject = stream;
        // this.localVideo.nativeElement.play();
        this.localStream = stream;

        this.callButton = false;

        this.pc1 = new RTCPeerConnection({
          iceServers: this.iceServers
        });

        this.pc1.onicecandidate = e => this.onIceCandidate(e);
        this.pc1.oniceconnectionstatechange = e => this.onIceStateChange(e);
        this.pc1.onaddstream = e => this.gotRemoteStream(e);

        this.pc1.addStream(stream);

      })
      .catch(e => alert(`getUserMedia() error: ${e.name}`));
  }

This is my component template:

<div class="col-md-8">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Invite to conversation</h2>
          <div class="form-group text-center">
            <input type="text" class="form-control" readonly/>
            <button type="button" class="btn">Copy a link</button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <video autoplay="autoplay" id="remoteVideo" #remoteVideo></video>
        </div>
      </div>
      <div class="row">
        <button (click)="call()" type="button" class="btn btn-info" [disabled]="callButton">Call</button>
        <button type="button" class="btn btn-success">Answer</button>
        <button type="button" class="btn">Hangup</button>

      </div>
      <div class="row">
        <div class="col-md-12">
          <video autoplay="autoplay" style="width: 300px; height: 300px;" #localVideo></video>
        </div>
      </div>
    </div>

Then I have exchange with descriptors and candidates. Finally, I receive remote stream and attach it to srcObject property of video tag.

private gotRemoteStream(e: any): void {
    this.remoteVideo.nativeElement.srcObject = e.stream;
    this.remoteVideo.nativeElement.play();
  }

gotRemoteStream is firing, but video is not showing. Maybe somebody had the same problem? Many thanks!

2
asp.netangularwebrtcangular6
are you getting any error? – Chellappan வ
@Chellappan no, everything is ok – podhornyi96
so the problem is you are not able to stream the video on your video tag right? – Chellappan வ
@Chellappan you're right – podhornyi96

2 Answers

1
votes

The problem was that I missed step when moving code to Angular. I missed step of sending answer after setting remote descriptor. Double check all the steps :)

0
votes

Use SetAttribute to set width and height of video element

Html

 <div class="col-md-12">
      <video autoplay="autoplay" #localVideo></video>
    </div>

ts

Its becoz the new data still pushed into the element but it does not have reference try this to use ChangedDetectorRef 

import {ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'video',
  changeDetection: ChangeDetectionStrategy.OnPush
})


constructor(private cd: ChangeDetectorRef) {}




 navigator.mediaDevices.getUserMedia({video:true}).
                then((stream)=>{
                  this.localVideo.nativeElement.setAttribute('width',500);
                  this.localVideo.nativeElement.setAttribute('height',500);
                  this.localVideo.nativeElement.srcObject=stream;
                  // this.localVideo.nativeElement.play();

                }).
                catch((e)=>console.error(e))


private gotRemoteStream(e: any): void {
    this.remoteVideo.nativeElement.srcObject = e.stream;
    this.cd.detectChanges();
    this.remoteVideo.nativeElement.play();
  }