收到应答后呼叫方的 WebRTC ontrack 未触发

Question

在我的多对等 webrtc 客户端（在 chrome 上测试）成功建立了稳定的连接，但是在我收到被叫方的答复后，ontrack 事件是未触发，因此流 sourceObj 未附加到我的 DOM。为什么？被调用方显示两个视频（本地和远程），但在调用方未添加远程视频，这似乎是由于 ontrack 事件 未触发。

我在发送 Offer/Answer 之前创建了所有 RTCPeerConnection，并在我将 ontrack 事件绑定到它之后在创建时将本地轨道添加到它。然后我发送 offer/answer 并遵循信令过程。

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

找到解决办法了！我在 this.peerConns[peerId].createOffer( this.offerOptions ).

中输入的选项有问题

实际上在我提供的代码中看不到它，但是动态创建我的 class 成员变量 this.offerOptions 的方法有一个错误。这显然是在告诉被调用者不要将任何流发送回调用者。

收到应答后呼叫方的 WebRTC ontrack 未触发

WebRTC ontrack on caller side not firing after answer received

webrtc

signaling