Question

我正在尝试构建一个单页的webRTC应用程序，以便了解此主题。我有2个音频标签：

<audio id="local"></audio>
<audio id="remote"></audio>

一个代表本地对等，另一个代表远程对等。我已经成功地将本地视频“发送”到远程对等体 - 描述被设置为2个对等体的本地和远程描述，并且流已成功“到达”远程对等体 - 我可以检查2个音频元素并看到他们都有流的blob网址。但是，只有当我播放本地视频时，我才能听到音频 - 当我将其关闭并播放远程音频时，我什么也听不到。

为什么会这样？这是JS代码：

var local = document.querySelector("#local"); //The local audio tag
var remote = document.querySelector("#remote"); //The remote audio tag
var pc1; //The local peer
var pc2; //The remote peer

//Autoplay
//local.play();
remote.play();

navigator.webkitGetUserMedia({audio:true},function(stream){ //Get the audio
    local.src = window.URL.createObjectURL(stream);
    pc1 = new webkitRTCPeerConnection(null); //Initialize the local peer
    pc2 = new webkitRTCPeerConnection(null); //Initialize the remote peer
    pc1.addStream(stream); //Add the local stream to the connection => pass it to the remote peer

    pc1.createOffer(gotDescription1); //Create an offer and when you get the description call gotDescription1
    pc2.createAnswer(gotDescription2); //Create an answer acoording to the description you get from the local peer
    pc1.onicecandidate = gotLocalIceCandidate;
    pc2.onicecandidate = gotRemoteIceCandidate;
    pc2.onaddstream = gotRemoteStream; //When you get stream, call gotRemoteStream

},function(e){ //If there is an error
    console.error("ERROR: "+e);
});

function gotDescription1(desc){
    console.log("Offer from pc1 \n" + desc.sdp);
    pc1.setLocalDescription(desc); //set the description as the local description of the local peer
    //(Send the description to the remote peer)
    pc2.setRemoteDescription(desc); //set the description as the remote description of the remote peer
}

function gotDescription2(desc){
    console.log("Set the description in pc2");
    pc2.setLocalDescription(desc); //Set the description as the local description of the remote peer
    //(Send the description to the local peer)
    pc1.setRemoteDescription(desc); //set the description as the remote description of the local peer
}

function gotRemoteStream(e){
    remote.src = window.URL.createObjectURL(e.stream); //Play the stream you get
}

function gotLocalIceCandidate(event) {
    if (event.candidate) {
        pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
}

function gotRemoteIceCandidate(event) {
    if (event.candidate) {
        pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
}

Answer 1

您在javascript中的执行顺序稍微关闭

在获取远程流之前，您尚未设置onaddstream事件处理程序（获取远程流的时间可能早于设置远程描述）。

在gotDescription1回调中处理创建答案也是更好的，因为回调是异步的，可以不按顺序调用。我还将音频html5元素设置为自动播放，而不是将它们设置为播放（您可能也希望这样做）

获取用户媒体更改：

 navigator.webkitGetUserMedia({ audio: true }, function (stream) { //Get the audio
        local.src = window.URL.createObjectURL(stream);
        pc1 = new webkitRTCPeerConnection(null); //Initialize the local peer
        pc2 = new webkitRTCPeerConnection(null); //Initialize the remote peer
        pc1.addStream(stream); //Add the local stream to the connection => pass it to the remote peer
        pc1.onicecandidate = gotLocalIceCandidate;
        pc2.onicecandidate = gotRemoteIceCandidate;
        pc2.onaddstream = gotRemoteStream; //When you get stream, call gotRemoteStream
        pc1.createOffer(gotDescription1); //Create an offer and when you get the description call gotDescription1
    }, function (e) { //If there is an error
        console.error("ERROR: " + e);
    });

gotDescription1回调：

function gotDescription1(desc) {
    console.log("Offer from pc1 \n" + desc.sdp);
    pc1.setLocalDescription(desc); //set the description as the local description of the local peer
    //(Send the description to the remote peer)
    pc2.setRemoteDescription(desc); //set the description as the remote description of the remote peer
    pc2.createAnswer(gotDescription2); //Create an answer acoording to the description you get from the local peer
}

1页WebRTC - 未在远程对等端获取任何音频

1 个答案: