I am a beginner in WebRTC and currently working on developing a video call application with features like recording, screen sharing, and one-to-many communication. To implement this, I am using Node.js, WebSocket, and Kurento Media Server. I have encountered an issue where I am unable to see the remote stream of the second user when they join the room. There are no errors logged in either the browser console or the Node.js console. My Kurento Media Server is running on a remote machine using the Docker image(any special treatment when its run in remote machine?)
"kurento/kurento-media-server:7.0.0".
I have gone through multiple tutorials and blogs, but I haven't been able to find a solution. I'm providing the relevant code below. I would greatly appreciate any guidance on what I might have missed.
Thank you in advance for your assistance.
`
My package.json
{
"name": "kurento-groupcall",
"version": "6.1.1-dev",
"private": true,
"scripts": {
"postinstall": "cd static && bower install"
},
"dependencies": {
"express": "^4.12.4",
"kurento-client": "^7.0.0",
"kurento-utils": "^7.0.0",
"socket.io": "^1.3.6",
"ws": "^0.7.2"
}
}
My server.js
var UserRegistry = require("./user-registry.js");
var UserSession = require("./user-session.js");
// store global variables
var userRegistry = new UserRegistry();
var rooms = {};
var express = require("express");
// kurento required
var path = require("path");
var url = require("url");
var http = require("http");
var kurento = require("kurento-client");
// Constants
var settings = {
WEBSOCKETURL: "http://localhost:8080/",
KURENTOURL: "ws://40.68.138.182:8888/kurento",
};
var app = express();
var asUrl = url.parse(settings.WEBSOCKETURL);
var port = asUrl.port;
var server;
var server = app.listen(port, function () {
console.log("Kurento Tutorial started");
console.log("Open " + url.format(asUrl) + " with a WebRTC capable browser");
});
var io = require("socket.io")(server);
var fs = require('fs');
var options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
var httpsPort = 8081;
var https = require('https');
var httpsServer;
httpsServer = https.createServer(options, app).listen(httpsPort);
var io = require('socket.io')(httpsServer)'
io.on("connection", function (socket) {
var userList = "";
for (var userId in userRegistry.usersById) {
userList += " " + userId + ",";
}
console.log(
"receive new client : " + socket.id + " currently have : " + userList
);
socket.emit("id", socket.id);
socket.on("error", function (data) {
console.log("Connection: " + socket.id + " error : " + data);
leaveRoom(socket.id, function () {});
});
socket.on("disconnect", function (data) {
console.log("Connection: " + socket.id + " disconnect : " + data);
leaveRoom(socket.id, function () {
var userSession = userRegistry.getById(socket.id);
stop(userSession.id);
});
});
socket.on("message", function (message) {
console.log("Connection: " + socket.id + " receive message: " + message.id);
switch (message.id) {
case "register":
console.log("registering " + socket.id);
register(socket, message.name, function () {});
break;
case "joinRoom":
console.log(socket.id + " joinRoom : " + message.roomName);
joinRoom(socket, message.roomName, function () {});
break;
case "receiveVideoFrom":
console.log(socket.id + " receiveVideoFrom : " + message.sender);
receiveVideoFrom(
socket,
message.sender,
message.sdpOffer,
function () {}
);
break;
case "leaveRoom":
console.log(socket.id + " leaveRoom");
leaveRoom(socket.id);
break;
case "call":
console.log("Calling");
call(socket.id, message.to, message.from);
break;
case "startRecording":
console.log("Starting recording");
startRecord(socket);
break;
case "stopRecording":
console.log("Stopped recording");
stopRecord(socket);
break;
case "onIceCandidate":
addIceCandidate(socket, message);
break;
default:
socket.emit({ id: "error", message: "Invalid message " + message });
}
});
});
function register(socket, name, callback) {
var userSession = new UserSession(socket.id, socket);
userSession.name = name;
userRegistry.register(userSession);
userSession.sendMessage({
id: "registered",
data: "Successfully registered " + socket.id,
});
console.log(userRegistry);
}
function joinRoom(socket, roomName, callback) {
getRoom(roomName, function (error, room) {
if (error) {
callback(error);
}
join(socket, room, function (error, user) {
console.log("join success : " + user.id);
});
});
}
function getRoom(roomName, callback) {
var room = rooms[roomName];
if (room == null) {
console.log("create new room : " + roomName);
getKurentoClient(function (error, kurentoClient) {
if (error) {
return callback(error);
}
// create pipeline for room
kurentoClient.create("MediaPipeline", function (error, pipeline) {
if (error) {
return callback(error);
}
room = {
name: roomName,
pipeline: pipeline,
participants: {},
kurentoClient: kurentoClient,
};
rooms[roomName] = room;
callback(null, room);
});
});
} else {
console.log("get existing room : " + roomName);
callback(null, room);
}
}
function join(socket, room, callback) {
// create user session
var userSession = userRegistry.getById(socket.id);
userSession.setRoomName(room.name);
room.pipeline.create("WebRtcEndpoint", function (error, outgoingMedia) {
if (error) {
console.error("no participant in room");
// no participants in room yet release pipeline
if (Object.keys(room.participants).length == 0) {
room.pipeline.release();
}
return callback(error);
}
outgoingMedia.setMaxVideoRecvBandwidth(100);
outgoingMedia.setMinVideoRecvBandwidth(20);
userSession.outgoingMedia = outgoingMedia;
// add ice candidate the get sent before endpoint is established
var iceCandidateQueue = userSession.iceCandidateQueue[socket.id];
if (iceCandidateQueue) {
while (iceCandidateQueue.length) {
var message = iceCandidateQueue.shift();
console.error(
"user : " + userSession.id + " collect candidate for outgoing media"
);
userSession.outgoingMedia.addIceCandidate(message.candidate);
}
}
userSession.outgoingMedia.on("IceCandidateFound", function (event) {
console.log("generate outgoing candidate : " + userSession.id);
var candidate = kurento.register.complexTypes.IceCandidate(
event.candidate
);
userSession.sendMessage({
id: "iceCandidate",
sessionId: userSession.id,
candidate: candidate,
});
});
// notify other user that new user is joining
var usersInRoom = room.participants;
var data = {
id: "newParticipantArrived",
new_user_id: userSession.id,
};
// notify existing user
for (var i in usersInRoom) {
usersInRoom[i].sendMessage(data);
}
var existingUserIds = [];
for (var i in room.participants) {
existingUserIds.push(usersInRoom[i].id);
}
// send list of current user in the room to current participant
userSession.sendMessage({
id: "existingParticipants",
data: existingUserIds,
roomName: room.name,
});
// register user to room
room.participants[userSession.id] = userSession;
//MP4 has working sound in VLC, not in windows media player,
//default mediaProfile is .webm which does have sound but lacks IE support
var recorderParams = {
mediaProfile: "MP4",
uri: "file:///tmp/file" + userSession.id + ".mp4",
};
room.pipeline.create(
"RecorderEndpoint",
recorderParams,
function (error, recorderEndpoint) {
userSession.outgoingMedia.recorderEndpoint = recorderEndpoint;
outgoingMedia.connect(recorderEndpoint);
}
);
callback(null, userSession);
});
}
function leaveRoom(sessionId, callback) {
var userSession = userRegistry.getById(sessionId);
if (!userSession) {
return;
}
var room = rooms[userSession.roomName];
if (!room) {
return;
}
console.log(
"notify all user that " +
userSession.id +
" is leaving the room " +
room.name
);
var usersInRoom = room.participants;
delete usersInRoom[userSession.id];
userSession.outgoingMedia.release();
// release incoming media for the leaving user
for (var i in userSession.incomingMedia) {
userSession.incomingMedia[i].release();
delete userSession.incomingMedia[i];
}
var data = {
id: "participantLeft",
sessionId: userSession.id,
};
for (var i in usersInRoom) {
var user = usersInRoom[i];
// release viewer from this
user.incomingMedia[userSession.id].release();
delete user.incomingMedia[userSession.id];
// notify all user in the room
user.sendMessage(data);
}
// Release pipeline and delete room when room is empty
if (Object.keys(room.participants).length == 0) {
room.pipeline.release();
delete rooms[userSession.roomName];
}
delete userSession.roomName;
}
function stop(sessionId) {
userRegistry.unregister(sessionId);
}
function call(callerId, to, from) {
if (to === from) {
return;
}
var roomName;
var caller = userRegistry.getById(callerId);
var rejectCause = "User " + to + " is not registered";
if (userRegistry.getByName(to)) {
var callee = userRegistry.getByName(to);
if (!caller.roomName) {
roomName = generateUUID();
joinRoom(caller.socket, roomName);
} else {
roomName = caller.roomName;
}
callee.peer = from;
caller.peer = to;
var message = {
id: "incomingCall",
from: from,
roomName: roomName,
};
try {
return callee.sendMessage(message);
} catch (exception) {
rejectCause = "Error " + exception;
}
}
var message = {
id: "callResponse",
response: "rejected: ",
message: rejectCause,
};
caller.sendMessage(message);
}
function receiveVideoFrom(socket, senderId, sdpOffer, callback) {
var userSession = userRegistry.getById(socket.id);
var sender = userRegistry.getById(senderId);
getEndpointForUser(userSession, sender, function (error, endpoint) {
if (error) {
callback(error);
}
endpoint.processOffer(sdpOffer, function (error, sdpAnswer) {
console.log("process offer from : " + senderId + " to " + userSession.id);
if (error) {
return callback(error);
}
var data = {
id: "receiveVideoAnswer",
sessionId: sender.id,
sdpAnswer: sdpAnswer,
};
userSession.sendMessage(data);
endpoint.gatherCandidates(function (error) {
if (error) {
return callback(error);
}
});
return callback(null, sdpAnswer);
});
});
}
function getEndpointForUser(userSession, sender, callback) {
// request for self media
if (userSession.id === sender.id) {
callback(null, userSession.outgoingMedia);
return;
}
var incoming = userSession.incomingMedia[sender.id];
if (incoming == null) {
console.log(
"user : " +
userSession.id +
" create endpoint to receive video from : " +
sender.id
);
getRoom(userSession.roomName, function (error, room) {
if (error) {
return callback(error);
}
room.pipeline.create("WebRtcEndpoint", function (error, incomingMedia) {
if (error) {
// no participants in room yet release pipeline
if (Object.keys(room.participants).length == 0) {
room.pipeline.release();
}
return callback(error);
}
console.log(
"user : " + userSession.id + " successfully created pipeline"
);
incomingMedia.setMaxVideoSendBandwidth(100);
incomingMedia.setMinVideoSendBandwidth(20);
userSession.incomingMedia[sender.id] = incomingMedia;
// add ice candidate the get sent before endpoint is established
var iceCandidateQueue = userSession.iceCandidateQueue[sender.id];
if (iceCandidateQueue) {
while (iceCandidateQueue.length) {
var message = iceCandidateQueue.shift();
console.log(
"user : " +
userSession.id +
" collect candidate for : " +
message.data.sender
);
incomingMedia.addIceCandidate(message.candidate);
}
}
incomingMedia.on("IceCandidateFound", function (event) {
console.log(
"generate incoming media candidate : " +
userSession.id +
" from " +
sender.id
);
var candidate = kurento.register.complexTypes.IceCandidate(
event.candidate
);
userSession.sendMessage({
id: "iceCandidate",
sessionId: sender.id,
candidate: candidate,
});
});
sender.outgoingMedia.connect(incomingMedia, function (error) {
if (error) {
callback(error);
}
callback(null, incomingMedia);
});
});
});
} else {
console.log(
"user : " +
userSession.id +
" get existing endpoint to receive video from : " +
sender.id
);
sender.outgoingMedia.connect(incoming, function (error) {
if (error) {
callback(error);
}
callback(null, incoming);
});
}
}
/**
* Add ICE candidate, required for WebRTC calls
* @param socket
* @param message
*/
function addIceCandidate(socket, message) {
var user = userRegistry.getById(socket.id);
if (user != null) {
// assign type to IceCandidate
var candidate = kurento.register.complexTypes.IceCandidate(
message.candidate
);
user.addIceCandidate(message, candidate);
} else {
console.error("ice candidate with no user receive : " + socket.id);
}
}
function getKurentoClient(callback) {
kurento(settings.KURENTOURL, function (error, kurentoClient) {
if (error) {
var message =
"Coult not find media server at address " + settings.KURENTOURL;
return callback(message + ". Exiting with error " + error);
}
console.log("kurento server connected successfully!");
callback(null, kurentoClient);
});
}
/**
* Start recording room
*/
function startRecord(socket) {
var userSession = userRegistry.getById(socket.id);
if (!userSession) {
return;
}
var room = rooms[userSession.roomName];
if (!room) {
return;
}
var usersInRoom = room.participants;
var data = {
id: "startRecording",
};
for (var i in usersInRoom) {
var user = usersInRoom[i];
// release viewer from this
user.outgoingMedia.recorderEndpoint.record();
// notify all user in the room
user.sendMessage(data);
console.log(user.id);
}
}
/**
* Stop recording room
*/
function stopRecord(socket) {
var userSession = userRegistry.getById(socket.id);
if (!userSession) {
return;
}
var room = rooms[userSession.roomName];
if (!room) {
return;
}
var usersInRoom = room.participants;
var data = {
id: "stopRecording",
};
for (var i in usersInRoom) {
var user = usersInRoom[i];
// release viewer from this
user.outgoingMedia.recorderEndpoint.stop();
// notify all user in the room
user.sendMessage(data);
console.log(user.id);
}
}
/**
* Generate unique ID, used for generating new rooms
* @returns {string}
*/
function generateUUID() {
var d = new Date().getTime();
var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
/[xy]/g,
function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
}
);
return uuid;
}
app.use(express.static(path.join(__dirname, "static")));
My index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="css/kurento.css" />
<!-- Standard adapter/kurento-utils -->
<!-- Temasys adapter/kurento-utils -->
<!--<script src="lib/adapterjs/publish/adapter.debug.js"></script>
<script src="bower_components/kurento-utils-temasys/dist/kurento-utils.js"></script>-->
<script src="/socket.io/socket.io.js"></script>
<script src="js/kurento-utils.js"></script>
<script src="js/index.js"></script>
<script src="js/participants.js"></script>
<title>Kurento Groupcall</title>
</head>
<body>
<h1>Kurento Groupcall</h1>
<div class="container" id="container">
<video
id="local_video"
autoplay
style="width: 320px; height: 320px"
poster="img/webrtc.png"
></video>
<input
type="text"
name="userName"
value=""
id="userName"
placeholder="Username"
/>
<button id="register" onClick="register()">Register</button> <br />
<input
type="text"
disabled="disabled"
name="room"
value=""
id="roomName"
placeholder="Room"
/>
<button id="joinRoom" disabled="disabled" onClick="joinRoom()">
Join Room</button
><br />
<input
type="text"
disabled="disabled"
name="otherUserName"
value=""
id="otherUserName"
placeholder="Other registered username"
/>
<button id="sendInvite" disabled="disabled" onClick="call()">
Send invite</button
><br />
<button
id="startRecording"
disabled="disabled"
onClick="startRecording()"
>
Start recording
</button>
<button id="stopRecording" disabled="disabled" onClick="stopRecording()">
Stop recording</button
><br />
<button id="leaveRoom" disabled="disabled" onClick="leaveRoom()">
Leave room
</button>
<div id="video_list"></div>
</div>
</body>
</html>
My index.js
var socket = io.connect();
var localVideoCurrentId;
var localVideo;
var sessionId;
var participants = {};
window.onbeforeunload = function () {
socket.disconnect();
};
socket.on("id", function (id) {
console.log("receive id : " + id);
sessionId = id;
});
// message handler
socket.on("message", function (message) {
switch (message.id) {
case "registered":
disableElements("register");
console.log(message.data);
break;
case "incomingCall":
incomingCall(message);
break;
case "callResponse":
console.log(message);
console.log(message.message);
break;
case "existingParticipants":
console.log("existingParticipants : " + message.data);
onExistingParticipants(message);
break;
case "newParticipantArrived":
console.log("newParticipantArrived : " + message.new_user_id);
onNewParticipant(message);
break;
case "participantLeft":
console.log("participantLeft : " + message.sessionId);
onParticipantLeft(message);
break;
case "receiveVideoAnswer":
console.log("receiveVideoAnswer from : " + message.sessionId);
onReceiveVideoAnswer(message);
break;
case "startRecording":
console.log("Starting recording");
break;
case "stopRecording":
console.log("Stopped recording");
break;
case "iceCandidate":
console.log("iceCandidate from : " + message.sessionId);
var participant = participants[message.sessionId];
if (participant != null) {
console.log(message.candidate);
participant.rtcPeer.addIceCandidate(message.candidate, function (error) {
if (error) {
if (message.sessionId === sessionId) {
console.error("Error adding candidate to self : " + error);
} else {
console.error("Error adding candidate : " + error);
}
}
});
} else {
console.error('still does not establish rtc peer for : ' + message.sessionId);
}
break;
default:
console.error("Unrecognized message: ", message);
}
});
/**
* Send message to server
* @param data
*/
function sendMessage(data) {
socket.emit("message", data);
}
/**
* Register to server
*/
function register() {
var data = {
id: "register",
name: document.getElementById('userName').value
};
sendMessage(data);
}
function joinRoom(roomName) {
disableElements('joinRoom');
// Check if roomName was given or if it's joining via roomName input field
if(typeof roomName == 'undefined'){
roomName = document.getElementById('roomName').value;
}
document.getElementById('roomName').value = roomName;
var data = {
id: "joinRoom",
roomName: roomName
};
sendMessage(data);
}
`
/**
* Invite other user to a conference call
*/
function call() {
// Not currently in a room
disableElements("call");
var message = {
id : 'call',
from : document.getElementById('userName').value,
to : document.getElementById('otherUserName').value
};
sendMessage(message);
}
/**
* Tell room you're leaving and remove all video elements
*/
function leaveRoom(){
disableElements("leaveRoom");
var message = {
id: "leaveRoom"
};
participants[sessionId].rtcPeer.dispose();
sendMessage(message);
participants = {};
var myNode = document.getElementById("video_list");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
/**
* Javascript Confirm to see if user accepts invite
* @param message
*/
function incomingCall(message) {
var joinRoomMessage = message;
if (confirm('User ' + message.from
+ ' is calling you. Do you accept the call?')) {
if(Object.keys(participants).length > 0){
leaveRoom();
}
console.log('message');
console.log(message);
joinRoom(joinRoomMessage.roomName);
} else {
var response = {
id : 'incomingCallResponse',
from : message.from,
callResponse : 'reject',
message : 'user declined'
};
sendMessage(response);
}
}
/**
* Request video from all existing participants
* @param message
*/
function onExistingParticipants(message) {
// Standard constraints
var constraints = {
audio: true,
video: {
frameRate: {
min: 1, ideal: 15, max: 30
},
width: {
min: 32, ideal: 50, max: 320
},
height: {
min: 32, ideal: 50, max: 320
}
}
};
// Temasys constraints
/*var constraints = {
audio: true,
video: {
mandatory: {
minWidth: 32,
maxWidth: 320,
minHeight: 32,
maxHeight: 320,
maxFrameRate: 30,
minFrameRate: 1
}
}
};*/
console.log(sessionId + " register in room " + message.roomName);
// create video for current user to send to server
var localParticipant = new Participant(sessionId);
participants[sessionId] = localParticipant;
localVideo = document.getElementById("local_video");
var video = localVideo;
// bind function so that calling 'this' in that function will receive the current instance
var options = {
localVideo: video,
mediaConstraints: constraints,
onicecandidate: localParticipant.onIceCandidate.bind(localParticipant)
};
localParticipant.rtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, function (error) {
if (error) {
return console.error(error);
}`
// Set localVideo to new object if on IE/Safari
localVideo = document.getElementById("local_video");
// initial main video to local first
localVideoCurrentId = sessionId;
localVideo.src = localParticipant.rtcPeer.localVideo.src;
localVideo.muted = true;
console.log("local participant id : " + sessionId);
this.generateOffer(localParticipant.offerToReceiveVideo.bind(localParticipant));
});
// get access to video from all the participants
console.log(message.data);
for (var i in message.data) {
receiveVideoFrom(message.data[i]);
}
}
function receiveVideoFrom(sender) {
console.log(sessionId + " receive video from " + sender);
var participant = new Participant(sender);
participants[sender] = participant;
var video = createVideoForParticipant(participant);
// bind function so that calling 'this' in that function will receive the current instance
var options = {
remoteVideo: video,
onicecandidate: participant.onIceCandidate.bind(participant)
};
participant.rtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, function (error) {
if (error) {
return console.error(error);
}
this.generateOffer(participant.offerToReceiveVideo.bind(participant));
});
}
function onNewParticipant(message) {
receiveVideoFrom(message.new_user_id)
}
function onParticipantLeft(message) {
var participant = participants[message.sessionId];
participant.dispose();
delete participants[message.sessionId];
console.log("video-" + participant.id);
// remove video tag
//document.getElementById("video-" + participant.id).remove();
var video = document.getElementById("video-" + participant.id);
// Internet Explorer doesn't know element.remove(), does know this
video.parentNode.removeChild(video);
}
function onReceiveVideoAnswer(message) {
var participant = participants[message.sessionId];
participant.rtcPeer.processAnswer(message.sdpAnswer, function (error) {
if (error) {
console.error(error);
} else {
participant.isAnswer = true;
while (participant.iceCandidateQueue.length) {
console.error("collected : " + participant.id + " ice candidate");
var candidate = participant.iceCandidateQueue.shift();
participant.rtcPeer.addIceCandidate(candidate);
}
}
});
}
function startRecording(){
var data = {
id: "startRecording"
};
sendMessage(data);
}
/**
* Stop recording video
*/
function stopRecording(){
var data = {
id: "stopRecording"
};
sendMessage(data);
}`
function createVideoForParticipant(participant) {
var videoId = "video-" + participant.id;
var video = document.createElement('video');
video.autoplay = true;
video.id = videoId;
video.poster = "img/webrtc.png";
document.getElementById("video_list").appendChild(video);
// return video element
return document.getElementById(videoId);
}
function disableElements(functionName){
if(functionName === "register"){
document.getElementById('userName').disabled = true;
document.getElementById('register').disabled = true;
document.getElementById('joinRoom').disabled = false;
document.getElementById('roomName').disabled = false;
document.getElementById('sendInvite').disabled = false;
document.getElementById('otherUserName').disabled = false;
}
if(functionName === "joinRoom"){
document.getElementById('roomName').disabled = true;
document.getElementById('joinRoom').disabled = true;
document.getElementById('sendInvite').disabled = false;
document.getElementById('otherUserName').disabled = false;
document.getElementById('leaveRoom').disabled = false;
document.getElementById('startRecording').disabled = false;
document.getElementById('stopRecording').disabled = false;
}
if(functionName === "leaveRoom"){
document.getElementById('leaveRoom').disabled = true;
document.getElementById('roomName').disabled = false;
document.getElementById('joinRoom').disabled = false;
document.getElementById('sendInvite').disabled = false;
document.getElementById('otherUserName').disabled = false;
document.getElementById('startRecording').disabled = true;
document.getElementById('stopRecording').disabled = true;
}
if(functionName === "call"){
document.getElementById('roomName').disabled = true;
document.getElementById('joinRoom').disabled = true;
document.getElementById('leaveRoom').disabled = false;
}
}