Develop Reference

WebRTC Peer ontrack called but video not playing

I have remote peer which send video to local peer. Where I am using my own signalling server.
The flow is like,
Remote peer send offer to local peer through signalling server.
Local peer accept offer and create answer, then send it to remote peer through signalling server.
Remote peer accept answer and start sending video, peer to peer.
I am having some issue in createAnswer section at local peer. If I manually send the answer to remote peer by clicking a button then the video play fine. But of send the answer from inside pc.onicecandidate it doesn't work.
Below is the code
var answer;
async function createAnswer(offer) {
if (pc.signalingState != "stable") return;
await pc.setRemoteDescription({type: "offer", sdp: offer});
await pc.setLocalDescription(await pc.createAnswer());
pc.onicecandidate = ({candidate}) => {
if (candidate) return;
answer = pc.localDescription.sdp;
sendAnswerToSignalingServer({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer", name: userLoggedIn, sdp:answer });
};
}
Using above code every thing works except playing video, even the event
pc.ontrack = function (event) {
remoteVideo.srcObject =event.streams[0];
//alert('new stream added! ' + event.streams[0]);
}
get called but the video not playing.
But if I comment sendAnswerToSignalingServer above and send the answer through button click then everything works fine,
function sendSignalButtonClick(){
sendAnswerToSignalingServer({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer", name: userLoggedIn, sdp:answer });
}
I think some coding problem in createAnswer section.
I am referring the code from here WebRTC datachannel with manual signaling, example please?.
Can anyone help me to resolve the problem.
Edit: full code
var userLoggedIn = "userWeb";
const config = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]};
const pc = new RTCPeerConnection(config);
const dc = pc.createDataChannel("chat", {negotiated: true, id: 0});
pc.ontrack = function (event) {
remoteVideo.srcObject = event.streams[0];
}
var SDP;
async function createAnswer(offer) {
if (pc.signalingState != "stable") return;
await pc.setRemoteDescription({type: "offer", sdp: offer});
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
pc.onicecandidate = async ({candidate}) => {
if (candidate) return;
SDP = await pc.localDescription.sdp;
sendToWebSocket({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer", name: userLoggedIn, sdp:SDP });
};
}
async function sendSignalButtonClick() {
SDP = await pc.localDescription.sdp;
sendToWebSocket({ peer_type: "web",remote_peer: "RPi_Dev", type: "answer", name: userLoggedIn, sdp:SDP });
}
function SendMessage(message) {
dc.send(message);
};
//********************************Signaling server part***************************/
var webSockConn = new WebSocket('wss://220.168.551.150:7000');
webSockConn.onopen = function () {
console.log("Connected to the signaling server");
sendToWebSocket({ peer_type: "web",remote_peer: "RPi_Dev", type: "login", name: userLoggedIn });
};
//when we got a message from a signaling server
webSockConn.onmessage = function (msg) {
console.log("Got message", msg.data);
var data = JSON.parse(msg.data);
switch(data.type) {
case "offer":
console.log(data);
createAnswer(data.offer, data.name);
break;
case "leave":
handleLeave();
break;
default:
break;
}
};
webSockConn.onerror = function (err) {
console.log("webSockConn----Got error", err);
};
function handleLeave(){
console.log("Leaving ......................");
}
//alias for sending JSON encoded messages
function sendToWebSocket(message) {
//attach the other peer username to our messages
if (userLoggedIn) {
message.name = userLoggedIn;
}
webSockConn.send(JSON.stringify(message));
};
/*********************************************************************************/

Try to create the answer with await:
answer = await pc.localDescription.sdp;
To change the function to async:
pc.onicecandidate = async ({candidate}) => {

How to get the socket id of a disconnected client on the disconnect event in socket.io

I have started working on a web application for othello.... in it I used node.js and socket.io for handling the server side code. It runs a server.js file in the cloud.
This file handles some of the main client events, one of them is the disconnect event.
Here's the code for disconnect event:
io.sockets.on('connection', function(socket) {
log('Client connection by '+socket.id);
function log(){
var array = ['*** Server log Message'];
for(var i=0; i< arguments.length; i++) {
array.push(arguments[i]);
console.log(arguments[i]);
}
socket.emit('log', array);
socket.broadcast.emit('log', array);
}
/* disconnect command */
socket.on('disconnect', function(socket) {
log(socket);
log('Client disconnected '+ JSON.stringify(players[socket.id]));
if('undefined' !== typeof players[socket.id] && players[socket.id]) {
var username = players[socket.id].username;
var room = players[socket.id].room;
var payload = {
username: username,
socket_id: socket.id
};
delete players[socket.id];
io.in(room).emit('player_disconnected', payload);
}
});
});
This disconnect command should notify all the other cleints about the disconnected player and delete the data about it.
Here's the code for holding the temporary data of the active players:
/* join_room command */
socket.on('join_room', function(payload) {
log('\'join_room\' command '+ JSON.stringify(payload));
if(('undefined' === typeof payload) || !payload) {
var error_message = 'join_room had no payload, command aborted';
log(error_message);
socket.emit('join_room_response', {
result: 'fail',
message: error_message
});
return;
}
var room = payload.room;
if(('undefined' === typeof room) || !room) {
var error_message = 'join_room didn\'t specify a room, command aborted';
log(error_message);
socket.emit('join_room_response', {
result: 'fail',
message: error_message
});
return;
}
var username = payload.username;
if(('undefined' === typeof username) || !username) {
var error_message = 'join_room didn\'t specify a username, command aborted';
log(error_message);
socket.emit('join_room_response', {
result: 'fail',
message: error_message
});
return;
}
/* store information about new player */
players[socket.id] = {};
players[socket.id].username = username;
players[socket.id].room = room;
log(players);
socket.join(room);
var roomObject = io.sockets.adapter.rooms[room];
/* notify others about new player */
var sumCleints = roomObject.length;
var data = {
result: 'success',
room: room,
username: username,
socket_id: socket.id,
membership: sumCleints
};
io.in(room).emit('join_room_response', data);
for(var socket_in_room in roomObject.sockets) {
var data = {
result: 'success',
room: room,
username: players[socket_in_room].username,
socket_id: socket_in_room,
membership: sumCleints
};
socket.emit('join_room_response', data);
}
log('join_room success');
log('Room: '+ room + ' was just joined by '+ username)
});
But the issue is it doesn't. When I logged the socket.id, it returns undefined, I don't know why ... when I log the socket itself, it says: transport closed.
My question is how to get the socket id of a player who just disconnected.
Here's the client side code for handling the player_disconnected event:
/* when someone leaves a room */
socket.on('player_disconnected', function(payload) {
if (payload.result == 'fail') {
alert(payload.message);
return;
}
if(payload.socket_id == socket_id) {
return;
}
/* Delete all rows for new players that leave */
var dom_elements = $('.socket_'+payload.socket_id);
if(dom_elements.length != 0) {
dom_elements.slideUp(1000);
}
var newHTML = '<p>'+payload.username+' has left the lobby</p>';
var newNode = $(newHTML);
newNode.hide();
$('#messages').append(newNode);
newNode.slideDown(1000);
});
If someone could figure out the problem than please tell me, and please tell me how the disconnect event, and the other events actually work and what are the parameters for them, because I couldn't find any useful information in the docs... Thanks in advance.

On disconnect, you are overriding the socket variable with a different callback parameter. Try this:
/* disconnect command */
socket.on('disconnect', function() {
console.log(socket.id);
});

Not enough arguments to RTCPeerConnection.setRemoteDescription [duplicate]

This question already has an answer here:
RTCPeerConnection.createAnswer callback returns undefined object in mozilla for WebRTC chat
(1 answer)
Closed 4 years ago.
Currently having the follow error in Firefox 64 where its giving this error which I have been searching online for a working fix but could not find one.
TypeError: "Not enough arguments to RTCPeerConnection.setRemoteDescription."
Been using a few of the links to fix but to no avail and also the latter is outdated.
https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription
WebRTC Firefox: Not enough arguments to RTCPeerConnection.setLocalDescription
Chrome triggers another error which is main.js:58 Uncaught TypeError: Cannot read property 'type' of undefined and this is when there's a if statement to check if the remotedescription.type matches offer
Would be grateful if anyone knows a fix.
'use strict';
var configuration = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
var pc = new RTCPeerConnection(configuration);
// Define action buttons.
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');
/////////////////////////////////////////////
window.room = prompt('Enter room name:');
var socket = io.connect();
if (room !== '') {
console.log('Message from client: Asking to join room ' + room);
socket.emit('create or join', room);
}
socket.on('created', function(room) {
console.log('Created room ' + room);
startVideo();
});
socket.on('full', function(room) {
console.log('Message from client: Room ' + room + ' is full :^(');
});
socket.on('joined', function(room) {
console.log('joined: ' + room);
startVideo();
callButton.disabled = true;
});
socket.on('log', function(array) {
console.log.apply(console, array);
});
////////////////////////////////////////////////
async function sendMessage(message) {
console.log('Client sending message: ', message);
await socket.emit('message', message);
}
// This client receives a message
socket.on('message', async message => {
if (message.sdp) {
await pc
.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
if (pc.remotedescription.type === 'offer') {
pc.setLocalDescription(pc.createAnswer())
.then(function() {
sendMessage({ sdp: pc.localDescription });
})
.catch(function(err) {
console.log(err.name + ': ' + err.message);
});
} else {
pc.addIceCandidate(new RTCIceCandidate(message.candidate)).catch(
error => console.error(error)
);
}
})
.catch(error => console.error(error));
}
});
pc.onicecandidate = event => {
if (event.candidate) {
sendMessage({ candidate: event.candidate });
}
};
pc.ontrack = event => {
if (remoteVideo.srcObject !== event.streams[0]) {
remoteVideo.srcObject = event.streams[0];
console.log('Got remote stream');
}
};
////////////////////////////////////////////////////
const localVideo = document.querySelector('#localVideo');
const remoteVideo = document.querySelector('#remoteVideo');
// Set up initial action buttons status: disable call and hangup.
callButton.disabled = true;
hangupButton.disabled = true;
// Add click event handlers for buttons.
callButton.addEventListener('click', callStart);
hangupButton.addEventListener('click', hangupCall);
function startVideo() {
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true
})
.then(function(stream) {
localVideo.srcObject = stream;
stream.getTracks().forEach(track => pc.addTrack(track, stream));
})
.catch(function(err) {
console.log('getUserMedia() error: ' + err.name);
});
callButton.disabled = false;
}
async function callStart() {
callButton.disabled = true;
hangupButton.disabled = false;
console.log('Sending offer to peer');
await pc
.setLocalDescription(await pc.createOffer())
.then(function() {
sendMessage(pc.localDescription);
})
.catch(err => {
console.log(err.name + ': ' + err.message);
});
}
/////////////////////////////////////////////////////////
function hangupCall() {
pc.close();
pc = null;
callButton.disabled = false;
hangupButton.disabled = true;
console.log('Call Ended');
}

You are calling pc.setRemoteDescription(desc, callback) but do not provide an error callback, using a .catch instead. Firefox does not like using a callback without providing an error callback as well which leads to the "Not enough arguments" error.
Don't mix the deprecated callbacks with promises but instead use pc.setRemoteDescription(desc).then(() => ...).catch(...)

Remote video on both sides won't show up

Currently using Chrome 70, Firefox 64 and Safari 12.
The remote video from the other user is not getting displayed on both sides and I am not quite sure what could be the issue.
There is no errors coming from any of the browsers which does not help in debugging the code.
I am using chrome's internal WebRTC debugging tool (chrome://webrtc-internals) and there is zero packets that have been sent or received.
There's a parameter in the tool which is googCandidatePair but this does not show up at all during a call.
ICEgatheringstatechange event triggers and state that it has completed but only when the host is the chrome user.
I have also tried using
pc.oniceconnectionstatechange = () => console.log(pc.iceConnectionState);
to check for the ICE state changes but this does not trigger at all.
One reason I think it might not be working correctly could be due to how RTCPeerconnection was configured as from this picture, the Ice candidate pool size is 0 but it was never stated in the code itself.
Below are 2 pictures where the first one is when the host is chrome and the other being the receiver
The code is as follows :
'use strict';
var configuration = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
var pc = new RTCPeerConnection(configuration);
// Define action buttons.
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');
/////////////////////////////////////////////
window.room = prompt('Enter room name:');
var socket = io.connect();
if (room !== '') {
console.log('Message from client: Asking to join room ' + room);
socket.emit('create or join', room);
}
socket.on('created', function(room) {
console.log('Created room ' + room);
startVideo();
});
socket.on('full', function(room) {
console.log('Message from client: Room ' + room + ' is full :^(');
});
socket.on('joined', function(room) {
console.log('joined: ' + room);
startVideo();
callButton.disabled = true;
});
socket.on('log', function(array) {
console.log.apply(console, array);
});
////////////////////////////////////////////////
async function sendMessage(message) {
console.log('Client sending message: ', message);
await socket.emit('message', message);
}
// This client receives a message
socket.on('message', message => {
if (message.sdp) {
pc.setRemoteDescription(new RTCSessionDescription(message.sdp))
.then(function() {
if (pc.setRemoteDescription.type === 'offer') {
pc.setLocalDescription(pc.createAnswer())
.then(function() {
sendMessage({ sdp: pc.localDescription });
})
.catch(function(err) {
console.log(err.name + ': ' + err.message);
});
}
})
.catch(error => console.error(error));
} else if (message.candidate) {
pc.addIceCandidate(new RTCIceCandidate(message.candidate))
.then(() => {
console.log('Candidates received');
})
.catch(error => console.error(error));
}
});
pc.onicecandidate = event => {
if (event.candidate) {
sendMessage({ candidate: event.candidate });
}
};
pc.ontrack = event => {
if (remoteVideo.srcObject !== event.streams[0]) {
remoteVideo.srcObject = event.streams[0];
console.log('Got remote stream');
}
};
////////////////////////////////////////////////////
const localVideo = document.querySelector('#localVideo');
const remoteVideo = document.querySelector('#remoteVideo');
// Set up initial action buttons status: disable call and hangup.
callButton.disabled = true;
hangupButton.disabled = true;
// Add click event handlers for buttons.
callButton.addEventListener('click', callStart);
hangupButton.addEventListener('click', hangupCall);
function startVideo() {
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true
})
.then(function(stream) {
localVideo.srcObject = stream;
stream.getTracks().forEach(track => pc.addTrack(track, stream));
})
.catch(function(err) {
console.log('getUserMedia() error: ' + err.name);
});
callButton.disabled = false;
}
async function callStart() {
callButton.disabled = true;
hangupButton.disabled = false;
console.log('Sending offer to peer');
await pc
.setLocalDescription(await pc.createOffer())
.then(() => {
sendMessage({ sdp: pc.localDescription });
})
.catch(err => {
console.log(err.name + ': ' + err.message);
});
}
/////////////////////////////////////////////////////////
function hangupCall() {
pc.close();
pc = null;
callButton.disabled = false;
hangupButton.disabled = true;
console.log('Call Ended');
}

You're mixing your promise styles, and you have a bug here:
pc.setLocalDescription(pc.createAnswer()) // bug!
.then(function() {
The above sets the local description to a promise object. Either pick async/await throughout:
await pc.setLocalDescription(await pc.createAnswer());
...or .then() chains:
pc.createAnswer()
.then(answer => pc.setLocalDescription(answer))
.then(function() {
If you pick the latter, don't forget to return all the promises.
Here's the message handler done solely with async/await:
// This client receives a message
socket.on('message', async message => {
try {
if (message.sdp) {
await pc.setRemoteDescription(message.sdp);
if (pc.setRemoteDescription.type === 'offer') {
await pc.setLocalDescription(await pc.createAnswer());
sendMessage({sdp: pc.localDescription});
}
} else if (message.candidate) {
await pc.addIceCandidate(message.candidate);
console.log('Candidates received');
}
} catch (err) {
console.log(err.name + ': ' + err.message);
}
}

If anyone might have problems with the remote video not showing up, I found out that it was because the message was not through the second IF statement that was checking if message.type === offer and since it could not create the answer thus it could not send its local description over to the other user. But by splitting the message up at the start to sdp and candidate, it somehow works.
socket.on('message', async ({ sdp, candidate }) => {
if (sdp) {
await pc.setRemoteDescription(new RTCSessionDescription(sdp));
if (sdp.type === 'offer') {
await pc
.setLocalDescription(await pc.createAnswer())
.then(function() {
sendMessage({ sdp: pc.localDescription });
})
.catch(function(err) {
console.log(err.name + ': ' + err.message);
});
}
} else if (candidate) {
await pc
.addIceCandidate(new RTCIceCandidate(candidate))
.then(() => {
console.log('Candidates received');
})
.catch(error => console.error(error));
}
});

WebRTC video chat

I am trying to build a 1-to-1 video chat with webrtc and the RTCPeerConnection API. A problem with my code is that after an initial user connects to the server, it doesn't receive messages from the server when other users emit messages via socket.io. The clients only receive their own emitted messages. Here is some of my code. The full project is on Github at: https://github.com/rashadrussell/webrtc_experiment
Client-Side
var isInitiator = false;
socket.on('initiatorFound', function(data) {
isInitiator = data.setInitiator;
console.log("Is Initiator? " + isInitiator);
});
navigator.getMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
);
navigator.getMedia(
{video: true, audio: false},
function(stream) {
var video = document.getElementById("localView");
video.src = window.URL.createObjectURL(stream);
console.log("Add Stream");
sendMessage('streamAdd', {streamAdded: 'stream-added'});
createPeerConnection();
pc.addStream(stream);
if(isInitiator)
{
callPeer();
}
},
function(err) {
console.log("The following error occured: ");
console.dir(err);
}
);
function sendMessage(type, message)
{
console.log("Sending Message");
socket.emit('message',{
"type": type,
"message": message
});
}
function createPeerConnection() {
pc = new rtcPeerConnection(servers, options);
console.dir(pc);
pc.onicecandidate = function(evt) {
if(evt.candidate == null) return;
pc.onicecandidate = null;
console.log("Send Ice Candidate");
sendMessage("iceCandidate", JSON.stringify(evt.candidate));
};
pc.onaddstream = function(evt) {
document.body.append("<video id='remoteVideo' autoplay></video>");
var remoteVid = document.getElementById("remoteVideo");
remoteVid.src = window.URL.createObjectURL(evt.stream);
};
}
function callPeer() {
pc.createOffer(function (offer) {
pc.setLocalDescription(offer, function() {
sendMessage("offer", JSON.stringify(offer));
});
console.log("Send Offer");
}, function(err) { console.log("Offer Error: " + err) },
videoConstraints
);
}
function answerPeer() {
pc.createAnswer(function(answer) {
pc.setLocalDescription(answer);
sendMessage("answer", JSON.stringify(answer))
}, function(err) { console.log("Sending Answer Error: " + err) },
videoConstraints
);
}
socket.on('message', function(message) {
console.log("CONSOLE MESSAGE:");
console.dir(message);
if(message.type == 'streamAdd') {
console.log('Stream was added');
createPeerConnection();
if(isInitiator) {
callPeer();
}
} else if(message.type == 'offer') {
pc.setRemoteDescription( new rtcSessionDescription(JSON.parse(message.message)));
if(!isInitiator)
{
console.log("Sending Answer");
answerPeer();
}
} else if(message.type == 'answer') {
pc.setRemoteDescription( new rtcSessionDescription(JSON.parse(message.message)));
} else if(message.type == 'iceCandidate') {
console.log("Get Ice Candidate");
pc.addIceCandidate(new rtcIceCandidate(JSON.parse(message.message)) );
}
});
Server-Side
var isInitiator = false;
io.sockets.on('connection', function(socket) {
if (!isInitiator) {
isInitiator = true;
socket.emit('initiatorFound', {setInitiator: isInitiator});
} else {
socket.emit('initiatorFound', {setInitiator: !isInitiator});
}
// Signaling Channel
socket.on('message', function(message) {
if (message.type == 'streamAdd') {
console.log('Got message: ' + message);
}
//socket.emit('message' ,message);
// Should be:
socket.broadcast.emit('message', message);
});
});

See if you want to send message to particular user you set unique ID(socket.id) but now you are try just testing correct so change your server side code
var isInitiator = false;
io.sockets.on('connection', function(socket) {
if (!isInitiator) {
isInitiator = true;
socket.emit('initiatorFound', {setInitiator: isInitiator});
} else {
socket.emit('initiatorFound', {setInitiator: !isInitiator});
}
// Signaling Channel
socket.on('message', function(message) {
if (message.type == 'streamAdd') {
console.log('Got message: ' + message);
}
socket.emit('message' ,message);
});
});
see here socket.emit('message',message); this socket object contain your id so its send a message to you if you want do send a message to particular user you know the unique.id any way send message to every connection expect this socket(mean current socket)
io.sockets.on('connection', function(socket) {
if (!isInitiator) {
isInitiator = true;
socket.emit('initiatorFound', {setInitiator: isInitiator});
} else {
socket.emit('initiatorFound', {setInitiator: !isInitiator});
}
// Signaling Channel
socket.on('message', function(message) {
if (message.type == 'streamAdd') {
console.log('Got message: ' + message);
}
socket.broadcast.emit('message' ,message);
});
});

I figured out why the other clients weren't being notified when a message is emitted. In my server-side code, under the signaling channel section, socket.emit is supposed to be socket.broadcast.emit or io.sockets.emit.
Socket.emit only relays the message back to the client who initiated the call the server. socket.broadcast.emit relays the message to all clients except for the client who initiated the call, and io.sockets.emit relays the message to all clients including the client who initiated the call.