webRTC未經處理的Ice Candidate（如何讓webRTC正常工作）

我正在嘗試製作一個帶有視頻和音頻的簡單webRTC應用程序。我正在使用一個簡單的PHP信令服務器。現在，無論何時我嘗試調用遠程客戶端，我都會收到如圖所示的錯誤。webRTC未經處理的Ice Candidate（如何讓webRTC正常工作）

任何人都可以請解釋我在這裏擰什麼。代碼看起來很好，就像我可以說的，但爲了您的參考，我在這裏添加了它。

<!DOCTYPE html> 
<!-- 
Demo Websocket: Client Code 
------------------------- 
    @Author: ANHVNSE02067 
    @Website: www.nhatanh.net 
    @Email: [email protected] 
--> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Echo server - Websocket Demo</title> 
    <style type="text/css"> 
    *{margin: 0; padding: 0;} 
    body{ 
     color: black; 
     font-family: monospace; 
     font-size: 16px; 
    } 
    #screen, #input{ 
     padding: 10px; 
     border: 1px solid #666; 
     width: 650px; 
     margin: 0 auto; 
    } 
    #screen{ 
     margin-top: 10px; 
     height: 1000px; 
     scroll: auto; 
    } 
    #screen p{ 
     margin: 2px; 
    } 
    input, button{ 
     font-size: 20px; 
     padding: 3px; 
    } 
    .client{ 
     color: green; 
     font-weight: bold; 
    } 
    .server{ 
     color: red; 
     font-weight: bold; 
    } 
    </style> 
    <script src="jquery-3.1.1.js"></script> 
    <script> 

$(document).ready(function() { 



     // Client here 
     var socket = null; 
     var uri = "ws://192.168.0.2:81"; 
     function connect(){ 
      socket = new WebSocket(uri); 
      if(!socket || socket == undefined) return false; 
      socket.onopen = function(){ 
       writeToScreen('Connected to server '+uri); 
      } 
      socket.onerror = function(){ 
       writeToScreen('Error!!!'); 
      } 
      socket.onclose = function(){ 
       $('#send').prop('disabled', true); 
       $('#close').prop('disabled', true); 
       $('#connect').prop('disabled', false); 
       writeToScreen('Socket closed!'); 
      } 
      socket.onmessage = function(e){ 
      console.log("Message from signaling server"); 
       writeToScreen('<span class="server">Server: </span>'+e.data); 
       var data = JSON.parse(e.data); 
    switch(data.type) { 
    case "login": 
    onLogin(data.success); 
    break; 
    case "offer": 
    onOffer(data.offer, data.name); 
    break; 
    case "answer": 
    onAnswer(data.answer); 
    break; 
    case "candidate": 
    onCandidate(data.candidate); 
    break; 
    default: 
    break; 
} 


      } 
      // Enable send and close button 
      $('#send').prop('disabled', false); 
      $('#close').prop('disabled', false); 
      $('#connect').prop('disabled', true); 
     } 
     function close(){ 
      socket.close(); 
     } 
     function writeToScreen(msg){ 
      var screen = $('#screen'); 
      screen.append('<p>'+msg+'</p>'); 
      screen.animate({scrollTop: screen.height()}, 10); 
     } 
     function clearScreen(){ 
      $('#screen').html(''); 
     } 
     function sendMessage(){ 
      if(!socket || socket == undefined) return false; 
      var mess = $.trim($('#message').val()); 
      if(mess == '') return; 
      writeToScreen('<span class="client">Client: </span>'+mess); 
      socket.send(mess); 
      // Clear input 
      $('#message').val(''); 
     } 
     $(document).ready(function(){ 
      $('#message').focus(); 
      $('#frmInput').submit(function(){ 
       sendMessage(); 
      }); 
      $('#connect').click(function(){ 
       connect(); 
      }); 
      $('#close').click(function(){ 
       close(); 
      }); 
      $('#clear').click(function(){ 
       clearScreen(); 
      }); 
     }); 

     if (!window.RTCPeerConnection) { 
    window.RTCPeerConnection = window.webkitRTCPeerConnection; 
} 

var configuration = { 
    "iceServers": [ 
    { 
    "urls": "stun:mmt-stun.verkstad.net" 
    }, 
    { 
    "urls": "turn:mmt-turn.verkstad.net", 
    "username": "webrtc", 
    "credential": "secret" 
    } 
    ] 
}; 


myConnection = new RTCPeerConnection(configuration); 
       console.log("RTCPeerConnection object was created"); 
       console.log(myConnection); 



       myConnection.onicecandidate = function (event) { 
       console.log("ice candidate from this browser"); 
       console.log(event.candidate); 
       if (event.candidate) { 
        send({ 
        type: "candidate", 
        candidate: event.candidate 
        }); 
        } 
       }; 

    var mediaConstraints = { 
     'offerToReceiveAudio': 1, 
     'offerToReceiveVideo': 1 
    }; 


    var connectToOtherUsernameBtn = document.getElementById("connectToOtherUsernameBtn"); 
     console.log(connectToOtherUsernameBtn); 

     connectToOtherUsernameBtn.addEventListener("click", function() { 
     console.log("ice state : "+myConnection.iceGatheringState); 
var otherUsername = connectToOtherUsernameBtn.value; 
connectedUser = otherUsername; 
     if (otherUsername.length > 0) { 
     //make an offer 
     console.log("Function"); 
     console.log(myConnection); 
     console.log("offer"); 
     myConnection.createOffer(function (offer) { 
     send({ 
     type: "offer", 
     offer: offer 
     }); 
     myConnection.setLocalDescription(offer); 
     }, function (error) { 
     alert("An error has occurred."); 
     console.log(error); 
     },mediaConstraints); 
     } 
     }); 


function send(message) { 
if (connectedUser) { 
message.name = connectedUser; 
} 
socket.send(JSON.stringify(message)); 
}; 

function onOffer(offer, name) { 
console.log("ice state : "+myConnection.iceGatheringState); 
console.log("offer recieved"); 
if(myConnection.iceGatheringState=="complete"){ 
connectedUser = name; 
myConnection.setRemoteDescription(new RTCSessionDescription(offer)); 
myConnection.createAnswer(function (answer) { 
myConnection.setLocalDescription(answer); 
send({ 
type: "answer", 
answer: answer 
}); 
}, function (error) { 
alert("oops...error"); 
console.log(error); 
}); 
    console.log("Answer sent"); 
} 
} 

//when another user answers to our offer 
function onAnswer(answer) { 
console.log("ice state : "+myConnection.iceGatheringState); 
console.log("answer recieved"); 
myConnection.setRemoteDescription(new RTCSessionDescription(answer)); 
} 
//when we got ice candidate from another user 
function onCandidate(candidate) { 
console.log("we got ice candidate from another user"); 
console.log(candidate); 
myConnection.addIceCandidate(new RTCIceCandidate(candidate)); 
} 

myConnection.onsignalingstatechange=function (event){ 
console.log(myConnection.signalingState); 
console.log("Connection Status: "+myConnection.iceConnectionState); 
console.log("ice state : "+myConnection.iceGatheringState); 
}; 

}); 
    </script> 
</head> 
<body> 
    <form id="frmInput" action="" onsubmit="return false;"> 
     <div id="screen"> 
      <p>Demo echo server</p> 
      <p>----------------</p> 
     </div> 
     <div id="input"> 
      <input type="text" id="message" placeholder="Message here.."> 
      <button type="submit" id="send" disabled>Send</button> 
      <button type="button" id="connect">Connect</button> 
      <button type="button" id="close" disabled>Close</button> 
      <button type="button" id="clear">Clear</button> 
      <button id="connectToOtherUsernameBtn" value="arjun">Arjun</button> 
      <input type="text" id="msgInput" /> 
      <button id="sendMsgBtn">send</button> 

     </div> 
    </form> 
</body> 
</html>

更新：我刪除下面的代碼

var mediaConstraints = { 
     'offerToReceiveAudio': 1, 
     'offerToReceiveVideo': 1 
    };

而且我得到這些國家

signalingState：穩定 iceConnectionState：新 iceGatheringState：新

也設置了「remoteDescription」和「localDescription」

來源

2017-01-20 user2288650

您可以嘗試縮小代碼，或者至少指出問題發生的位置？這裏的人幫助免費，所以幫助他們也是第一位的。 –

我認爲當提供報價時，遠程描述沒有設置。我不知道爲什麼。 – user2288650

此錯誤通常表明沒有設置遠程描述，並且這不會顯示在來自服務器的消息中。有關如何使用chrome的webrtc-internals頁面進行調試，請參見here。

來源

2017-01-20 07:48:44

這是我在我的RTCSessionDescriptionsdp RTCSessionDescriptionsdp中找到的：「」type：「」__proto__：RTCSessionDescription – user2288650

是的，我檢查了我認爲remoteDescription沒有被設置時提供。 – user2288650

感謝您的建議。我做了一些與遠程描述搞亂，我得到它的工作。我不知道爲什麼我的代碼，但它的工作。謝謝你的幫助。 – user2288650

webRTC未經處理的Ice Candidate（如何讓webRTC正常工作）

回答

相關問題