WebRTC使用承諾 - 兩端都沒有看到遠程視頻

Question

我以前發佈過關於這個問題的一些問題。那時我有兩個獨立的來電和接聽程序。我也使用老式的回調API。感謝@jib在那篇文章上的幫助，我能夠理解需要進行一些根本性的改變。我重寫了該程序，使其成爲呼叫者和接收者的集成程序，並使用了WebRTC承諾API。我的問題是，我沒有從任何一端獲得遠程視頻。我理解的一部分，但不知道解決方案：接收器首先不爲視頻創建SDP，僅針對音頻。調用者部分確實爲視頻和音頻創建了SDPS，但在接收端沒有爲遠程流生成事件。

我已通過控制檯日誌檢查覈心功能是否正常工作。提供SDP創建，發送，接收，回答SDP創建，發送，接收等。候選人也交換和添加。但.onaddstream事件處理程序永遠不會被觸發。顯示本地視頻，但這是微不足道的。

我在這花了很多時間。我只需要得到那種令我激動的感受，即在兩端看到遠程視頻，這一直讓我不知所措。任何幫助都會得到真正的讚賞。

<script> 
$(document).ready(function() { 

    var iceCandidates = [], countIceCandidates=0; 
    var socket = io.connect(); 
    socket.on('connect',function() { console.log("Socket connected"); }); 

    var pc = new RTCPeerConnection({"iceServers":[{"url":"stun:stun.l.google.com:19302"}]}); 

    //If remote video stream comes in, display it in DIV vid2 
    pc.onaddStream = function (event) { 
    stream = event.stream; 
    var video = $('#vid2'); 
    video.attr('src', URL.createObjectURL(stream)); 
    video.onloadedmetadata = function(e) { video.play(); } 
    } 

    //Display media in both Caller and Receiver 
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 
    .then(function(stream) { 
     var video = $('#vid1'); 
     video.attr('src', URL.createObjectURL(stream)); 
     video.onloadedmetadata = function(e) { video.play(); }; 
     pc.addStream(stream); 
    }) 
    .catch(function(err) { console.log(err);}); 


//INITIATE CALL 
$('#call').click(function() { 
    pc.createOffer({ offerToReceiveVideo: true, offerToReceiveAudio: true }) 
    .then(function(offer) { 
    localSessionDescription = new RTCSessionDescription(offer); 
    pc.setLocalDescription(localSessionDescription) 
    .then (function() { socket.emit('sdpOffer',localSessionDescription); }) 
    .catch(function(err) { console.log("Error in setLocalDescription"); console.log(err); }) 
    .catch(function(err) { console.log("Error in createOffer"); console.log(err); }) 
    }); 
}) 

    pc.onicecandidate = function (event) { 
    socket.emit('candidate',event.candidate); 
    }; 

    socket.on('candidate',function (data) { 
    if (data != null) { 
    pc.addIceCandidate(new RTCIceCandidate(data)) 
    .then(function() { console.log("peer candidate added");}) 
    .catch(function(err) {console.log(err); console.log("Error during peer candidate addition");}); 
    } 
    }); 

    socket.on('disconnect',function() { alert("Disconnected"); }); 

    function error(err) { 
    console.log("The following error occurred: " + err.name); 
    } 

    socket.on('sdpAnswer',function(data) { 
    sdpAnswer = new RTCSessionDescription(data.sdpAnswer); 
    pc.setRemoteDescription(sdpAnswer) 
    .then(function() { console.log("Answer SDP Set:"); console.log(sdpAnswer); }) 
    .catch(function(err) { console.log("Error enountered when setting remote SDP Answer"); console.log(err)}); 
    }); 

    socket.on('sdpOffer', function(data) { 
    sdpOffer = new RTCSessionDescription(data.sdpOffer); 
    pc.setRemoteDescription(sdpOffer) 
    .then(function() { console.log("Remote SDP set in receiver"); 
     pc.createAnswer() 
     .then(function(sdpAnswer) { 
      localSessionDescription = new RTCSessionDescription(sdpAnswer); 
     socket.emit('sdpAnswer',localSessionDescription); 
     pc.setLocalDescription(localSessionDescription) 
     .then(function(){ 
       console.log("Local SDP Description set in receiver:"); 
       }) 
      .catch(function(err) { console.log("Error enountered when setting local SDP in receiver"); console.log(err)}); 
    }) 
     .catch(function(err) { console.log("Error enountered when creating answer SDP in receiver"); console.log(err)}); 
    }); 
    }); 
}); //End of document.ready function 

</script> 

在服務器端（僅限相關代碼）。我已經在這裏包含了以防萬一有任何數據類型相關的問題 - 對象類型等通過服務器發送時發生變化。

io.sockets.on('connection', function(socket) { 
    socket.on('sdpOffer', function(data) { 
    sdpOffer = data.sdp; 
    socket.broadcast.emit('sdpOffer',{"sdpOffer":data}); 
    }); 
    socket.on('sdpAnswer', function(data) { 
    sdpAnswer = data.sdp; 
    socket.broadcast.emit('sdpAnswer',{"sdpAnswer":data}); 
    }); 
    socket.on('candidate', function(data) { 
    socket.broadcast.emit('candidate',data); 
    }); 
}); 

Answer 1

將名稱pc.onaddStream重命名爲pc.onaddstream。