Remote Video is blank in WebRTC using adapter library

Question

I am new to WebRTC and currently trying to implement a Peer to Peer Video chat in my Angular2 project. I am using webrtc-adapter.js npm for setting up the connection. The remote video remains blank, and only the local webcam video is working.

I have referred the link":

Remote VideoStream not working with WebRTC

And I have checked in chrome://webrtc-internals/ to trace the connectivity, but not been able to find the exact cause.

Below is my code:

setupRTC() {
    var log = msg => "<p>" + msg + "</p>";
    var failed = e => log(e + ", line " + e.lineNumber);
    this.pc = new RTCPeerConnection(SERVERS, DEFAULT_CONSTRAINTS);
    this.remotepc = new RTCPeerConnection(SERVERS, DEFAULT_CONSTRAINTS);
    var add = (pc, ca) => ca && pc.addIceCandidate(ca).catch(failed);

    this.pc.onicecandidate = e => add(this.remotepc, e.candidate);
    this.remotepc.onicecandidate = e => add(this.pc, e.candidate);
    this.pc.ontrack = e => (this.remoteVideo.nativeElement.srcObject = e.streams[0]);
    this.pc.oniceconnectionstatechange = e => log(this.pc.iceConnectionState);
}

The Video chat is initiated on click of a button event as below:

startVideo() {
    debugger;
    let nav = <any>navigator;
    var log = msg => "<p>" + msg + "</p>";
    var failed = e => log(e + ", line " + e.lineNumber);
    nav.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => this.pc.addStream(this.localVideo.nativeElement.srcObject = stream))
        .then(() => this.pc.createOffer())
        .then(offer => this.pc.setLocalDescription(offer))
        .then(() => this.remotepc.setRemoteDescription(this.pc.localDescription))
        .then(() => this.remotepc.createAnswer())
        .then(answer => this.remotepc.setLocalDescription(answer))
        .then(() => this.pc.setRemoteDescription(this.remotepc.localDescription))
        .catch(failed);

}

In the HTML, I have a popup :

                       <modal #myModal3 cancelButtonLabel="Close" (onClose)="showCam()">
                            <modal-header>
                                <h4>Video Chat</h4>
                            </modal-header>

                            <modal-content>
                                <div id="callPage" class="call-page">
                                    <video id = "localVideo" [src]="localVideo" autoplay></video>
                                    <video id = "remoteVideo" [src]="remoteVideo" autoplay></video>

                                    <div class="row text-center">
                                        <div class="col-md-12">
                                            <button id="callBtn" (click)="startVideo()">Call</button>
                                            <button id="hangUpBtn">Hang Up</button><div id="div"></div>
                                        </div>
                                    </div>

                                </div>
                            </modal-content>
                        </modal>

Any Suggestions?

1) Use debugger 2) did you choose right camera source - Sometimes you will need to check other solutions . In most case choose device with "usb" prefix or suffix (name of device). Any message logs ? — Nikola Lukic
In the debugger, the src for the remote is showing as null. Did I miss something? do you mean the local camera source should be set correctly? what is the recommended setting here? — user3573851
Yes , try other device . If you have webcam with mic and one more mic on headphones it is a possible to have (for example) only audio with black screen... — Nikola Lukic
Also! Sometimes you will need too put some timeout (max 1 or 2 sec) between createAnswer/setRemoteDescription . Look at webrtc logs There a must be some warnings... — Nikola Lukic

jib jib · Accepted Answer · 2017-08-27T00:05:53

You're only sending one way, and listening to the wrong end. Change:

this.pc.ontrack = e => this.remoteVideo.srcObject = e.streams[0];

to

this.remotepc.ontrack = e => this.remoteVideo.srcObject = e.streams[0];

then it works for me.

Remote Video is blank in WebRTC using adapter library

1 Answers