通过WebRTC听不到MediaStream

Question

我正在尝试使用WebRTC和WebSocket进行语音聊天，以便交换报价。

首先，我创建了RTCPeerConection

const pc = new RTCPeerConnection(configuration);

然后，我将此函数作为navigator.getUserMedia的成功回调

let localStream: MediaStream;
export function setupRtc(stream: MediaStream) {
    localStream = stream;
    // add local media stream tracks to the connection
    console.log("adding tracks");
    console.log("localStream.getTracks()", localStream.getTracks());
    localStream.getTracks().forEach((track: MediaStreamTrack) => {
        pc.addTrack(track, localStream);
        console.log("added track ", track);
    });
    console.log("done adding tracks");

    // handle pcs tracks
    let remoteStream = new MediaStream();
    pc.ontrack = function(event: RTCTrackEvent) {
        console.log("ontrack", event);
        //add audio Tag
        event.streams[0].getTracks().forEach((track) => {
            remoteStream.addTrack(track);
        });
    }
    let remoteAudio = <HTMLMediaElement> document.getElementById('remoteAudio');
    remoteAudio.srcObject = remoteStream;
}

呼叫者发送他的提议如下：

async function sendOffer(connectionId: string) {
    console.log("SENDING OFFER...");
    //create offer desc
    let sessionDesc: RTCSessionDescriptionInit = await pc.createOffer();
    await pc.setLocalDescription(sessionDesc);
    //send offer
    socket.send(JSON.stringify(
        {
            type: "signaling_offer",
            desc: {
                sdp: sessionDesc.sdp,
                type: sessionDesc.type
            },
            connectionId: connectionId
        }
    ));
    console.log("SEND OFFER");
}

connectionId是呼叫者和被呼叫者都拥有的id。

在WebSocket服务器将报价转发给被叫方后，他使用以下函数进行应答：

function sendAnswer(connectionId: string, offer: RTCSessionDescriptionInit) {
    console.log("SENDING ANSWER...");
    pc.setRemoteDescription(new RTCSessionDescription(offer)).then(async () => {
        const answerDesc = await pc.createAnswer();
        await pc.setLocalDescription(answerDesc);
        //send answer
        socket.send(JSON.stringify(
            {
                type: "signaling_answer",
                desc: {
                    sdp: answerDesc.sdp,
                    type: answerDesc.type
                },
                connectionId: connectionId
            }
        ));
        console.log("SEND ANSWER!");
    });
}

在WebSocket服务器再次转发之后，主叫方使用以下命令处理应答：

function handleAnswered(connectionId: string, answer: RTCSessionDescriptionInit) {
    console.log("HANDLING ANSWER...");
    pc.setRemoteDescription(new RTCSessionDescription(answer));
    console.log("HANDLED ANSWER!");
}

在教程和说明中，我遵循了音频元素，然后似乎播放了音频，我的音频看起来仍然是一个没有来源的音频元素：audio element that's not playing

呼叫者和被呼叫者都添加了曲目和流，并收到了一些。我还附上了他们的控制台输出：

呼叫者：caller console

被呼叫者：callee console

Answer 1

所以事实证明我完全漏掉了一步。呼叫者和被呼叫者都需要交换他们的ice候选人。所以我添加了以下代码：

    pc.onicecandidate = event => {
        if(event.candidate != undefined) {
            let candidateInit: RTCIceCandidateInit = event.candidate.toJSON();
            //send candidate
            socket.send(JSON.stringify(
                {
                    type: "signaling_add_candidate",
                    candidate: candidateInit,
                    connectionId: connectionId
                }
            ));
            console.log("send candidate from caller", event.candidate);
        }
    };

服务器将该候选者转发给另一方。所以从呼叫者到被呼叫者，从被呼叫者到呼叫者。然后，为了将另一端转发的候选人添加到PeerConnection，我添加了以下代码：

function handleNewCandidate(connectionId: string, candidateInit: RTCIceCandidateInit) {
    pc.addIceCandidate(new RTCIceCandidate(candidateInit));
}