webRTC Ice Candidate not getting processed (How to get webRTC to work)

Question

I am trying to make a simple webRTC app with video and audio. I am using a simple PHP signaling server. Now whenever I try to call the remote client I am getting the errors as shown in pics.

Can anyone please explain what am I doing wring here. The code looks fine as was as I can say but for your reference I have added it here.

<!DOCTYPE html>
<!-- 
Demo Websocket: Client Code
-------------------------
    @Author: ANHVNSE02067
    @Website: www.nhatanh.net
    @Email: anhvnse@gmail.com
-->
<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>

UPDATE: I removed following code

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

And I am getting these states

signalingState: stable iceConnectionState: new iceGatheringState: new

also "remoteDescription" and "localDescription" are set

Answer 1

This error typically suggests that no remote description was set and this is not shown in the message from the server. See here on how to use chrome's webrtc-internals page for debugging.

webRTC Ice Candidate not getting processed (How to get webRTC to work)

Question

1 answers

solution1
1 2017-01-20 07:48:44

webRTC Ice Candidate not getting processed (How to get webRTC to work)

Question

1 answers

solution1 1 2017-01-20 07:48:44

solution1
1 2017-01-20 07:48:44