WebRTC ontrack on caller side not firing after answer received - webrtc

Question

In my multi peer webrtc client (testing on chrome) a stable connection is successfully established but after I receive the answer from the callee, the ontrack event is not firing and thus the stream sourceObj is not attached to my DOM. Why? The callee shows both videos (local and remote) but on the caller side the remote video is not added and it seems that this is due to the ontrack event not firing.
I create all the RTCPeerConnection before sending the Offer/Answer and add the local Tracks at creation time to it after I had bound the ontrack events to it. Then I send the offer/answer and follow the signaling proccess.
class WebRTC_Client {
private serversCfg = {
iceServers: [{
urls: ["stun:stun.l.google.com:19302"]
}]
};
...
private gotStream(stream) {
window.localStream = stream;
...
}
private stopLocalTracks(){
if (window.localStream) {
window.localStream.getTracks().forEach(function (track) {
track.stop();
});
var videoTracks = window.localStream.getVideoTracks();
for (var i = 0; i !== videoTracks.length; ++i) {
videoTracks[i].stop();
}
}
}
private start() {
var self = this;
...
this.stopLocalTracks();
...
navigator.mediaDevices.getUserMedia(this.getConstrains())
.then((stream) => {
self.gotStream(stream);
trace('Send signal to peers that I am ready to be called: onReadyForTeamspeak');
self.SignalingChannel.send(JSON.stringify({type: 'onReadyForTeamspeak'}));
})
.catch( self.errorHandler );
}
public addPeerId(peerId){
this.availablePeerIds[peerId] = peerId;
this.preparePeerConnection(peerId);
}
private preparePeerConnection(peerId){
var self = this;
if( this.peerConns[peerId] ){
return;
}
this.peerConns[peerId] = new RTCPeerConnection(this.serversCfg);
this.peerConns[peerId].ontrack = function (evt) { self.gotRemoteStream(evt, peerId); };
this.peerConns[peerId].onicecandidate = function (evt) { self.iceCallback(evt, peerId); };
this.addTracks(peerId);
}
private addTracks(peerId){
var self = this;
var localTracksCount = 0;
window.localStream.getTracks().forEach(
function (track) {
self.peerConns[peerId].addTrack(
track,
window.localStream
);
}
);
}
private call() {
var self = this;
for( let peerId in this.availablePeerIds ){
if( !this.availablePeerIds.hasOwnProperty(peerId) ){
continue;
}
if( this.isCaller(peerId) ) {
this.preparePeerConnection(peerId);
this.createOffer(peerId);
}
}
}
private createOffer(peerId){
var self = this;
this.peerConns[peerId].createOffer( this.offerOptions )
.then( function (offer) { return self.peerConns[peerId].setLocalDescription(offer); } )
.then( function () {
self.SignalingChannel.send(JSON.stringify({ "sdp": self.peerConns[peerId].localDescription, "remotePeerId": peerId, "type": "onWebRTCPeerConn" }));
})
.catch( this.errorHandler );
}
private answerCall(peerId){
var self = this;
this.peerConns[peerId].createAnswer()
.then( function (answer) { return self.peerConns[peerId].setLocalDescription(answer); } )
.then( function () {
self.SignalingChannel.send(JSON.stringify({ "sdp": self.peerConns[peerId].localDescription, "remotePeerId": peerId, "type": "onWebRTCPeerConn" }));
})
.catch( this.errorHandler );
}
...
private gotRemoteStream(e, peerId) {
if (!this.videoBillboards[peerId]) {
this.createMediaElements(peerId);
}
if (this.videoAssets[peerId].srcObject !== e.streams[0]) {
this.videoAssets[peerId].srcObject = e.streams[0];
}
}
private iceCallback(event, peerId) {
this.SignalingChannel.send(JSON.stringify({ "candidate": event.candidate, "remotePeerId": peerId, "type": "onWebRTCPeerConn" }));
}
private handleCandidate(candidate, peerId) {
this.peerConns[peerId].addIceCandidate(candidate)
.then(
this.onAddIceCandidateSuccess,
this.onAddIceCandidateError
);
}
...
private handleSignals(signal){
var self = this,
peerId = signal.connectionId;
this.addPeerId(peerId);
if( signal.sdp ) {
var desc = new RTCSessionDescription(signal.sdp);
this.peerConns[peerId].setRemoteDescription(desc)
.then(function () {
if (desc.type === 'offer') {
self.answerCall(peerId);
}
})
.catch( this.errorHandler );
} else if( signal.candidate ){
this.handleCandidate(new RTCIceCandidate(signal.candidate), peerId);
} else if( signal.closeConn ){
this.endCall(peerId,true);
}
}
}

Answer 1

Found a solution! Something was wrong with the options I put in to this.peerConns[peerId].createOffer( this.offerOptions ).
Actually in the code I provided one could not see it but the method that was dynamically creating my class member variable this.offerOptions had a bug. This was obviously telling the callee to NOT send any streams back to the caller.