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: [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>
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
