Develop Reference

Why does "WebRTC Screen sharing" is not streaming when using different computers?

I am developing a web application, like an online classroom in which I want to share the screen of a browser from a computer and view it in another. I am getting an error "Uncaught (in promise) DOMException: Error" in chrome when I tried to share the screen from a computer and view it on another computer.
I am using WebRTC for this and WebSocket for signaling. At the backend, java jersey would be doing the searching & forwarding of the request to the appropriate clients. I can share the screen from one browser window and view it in another on the same machine. But when I'm using different computers I get this error. When I debug the RTCPeerConnection object, it shows that the property connectionState as failed and iceConnectionState as disconnected.
Javascript: Request to share the screen
var urlS = [];
var config = {iceServers: urlS};
var $source = $('#monitor-src');
$scope.context.peerConnection = new RTCPeerConnection();
$scope.context.peerConnection.onicecandidate = function(event)
{
console.log(event)
if (event.candidate)
{
var json =
{
type:event.type,
label:event.candidate.sdpMLineIndex,
id:event.candidate.sdpMid,
candidate:event.candidate
}
WebSocket.send({desc:json,usrId:$scope.context.me.id},$scope)
}
else
{
console.error("Failed to create ice candidate")
}
};
try
{
$scope.context.peerConnection.createOffer({offerToReceiveAudio: true,offerToReceiveVideo: true}).then(function(offer)
{
return $scope.context.peerConnection.setLocalDescription(offer);
}).then(function()
{
WebSocket.send({desc:$scope.context.peerConnection.localDescription,callee:mentee.id,caller:$scope.context.me.id,usrId:$scope.context.me.id},$scope)
});
}
catch(error)
{
console.error("onnegotiationneeded-"+error)
}
$scope.context.peerConnection.onnegotiationneeded = function()
{
console.error("onnegotiationneeded")
};
try
{
console.log($scope.context.peerConnection);
$scope.context.peerConnection.ontrack = function(event)
{
console.log("ontrack:"+event.streams.length)
$source.parent()[0].srcObject= event.streams[0];
};
$scope.context.peerConnection.onaddstream = function(event)
{
console.log("onaddstream:"+event.stream)
$source.parent()[0].srcObject = event.stream;
};
}
catch(error)
{
console.error(error)
}
Javascript:WebSocket Handling of the request and sending response
$rootScope.socket.onMessage(function(message)
{
data = angular.fromJson(message.data);
if(data.type == 'offer')
{
var stream = null;
//var urlS = [{urls: 'stun:192.168.1.16:8443'}];
var urlS = [];
var config = {iceServers: urlS};
scope.context.peerConnection = new RTCPeerConnection();
scope.context.peerConnection.setRemoteDescription(data).then(function(){
return navigator.mediaDevices.getDisplayMedia({video:true,audio: true});
}).then(function(stream){
console.log(scope.context.peerConnection)
scope.context.peerConnection.addStream(stream);
stream.getTracks().forEach(function(track)
{
//var rtpSender =
});
scope.context.peerConnection.createAnswer().then(function(answer){
return scope.context.peerConnection.setLocalDescription(answer)
}).then(function()
{
send({desc:scope.context.peerConnection.localDescription,usrId:scope.context.me.id},scope)
}).catch(function(error){
console.error(error)});
})
}
else if(data.type == 'answer')
{
scope.context.peerConnection.setRemoteDescription(data);
}
else if(data.type == 'icecandidate')
{
console.log("icecandidate:"+angular.toJson(data))
var promise = scope.context.peerConnection.addIceCandidate(data.candidate).then(function success(){
console.log("ice success")
}).catch(function error(err)
{
console.log(err);
});
}
});
};
The ontrack and onaddstream events are triggered when a stream is added to the peer connection. But I get nothing on the requested peer.

I am not a JavaScript expert but your urlS array seems to be empty. Try to add both Turn and Stun servers in your urlS.
For more info take a look here

WebSocket connection established, onopen never runs

I'm trying to learn WebSockets and I've created a websocket server in Node and am now working on the browser implementation. I have tested that the server works and responds how I want using a chrome extension called Smart WebSocket Client.
The console in the browser says Button pressed! when you press the button and Connection lost! (1000) when I end the Node process but never has it said Connection Established!.
Edit: The client code is running on a site secured with HTTPS and that serves the HSTS header while the server code (currently, but won't continue to be) is running on localhost over normal HTTP, if it's any concern.
Server Code:
const websock = require('./node_modules/ws');
const HashMap = require('./node_modules/hashmap');
const jsonparse = require('./node_modules/jsonparse');
const randomstring = require('./node_modules/randomstring');
class Session {
constructor(server) {
this.server = server;
this.clients = [];
}
}
var connections = new HashMap();
const json = new jsonparse();
const wss = new websock.Server({ port: 36245 });
process.on('SIGINT',function () {
console.log("Recieved SIGINT, stopping gracefully...");
wss.clients.forEach(function (ws) {
console.log("-Ended connection with "+ws.upgradeReq.socket.remoteAddress+" (1001)");
ws.closeReasonCode = 1001;
ws.close();
});
process.exit(1);
});
wss.on('connection',function connection(ws,conn) {
console.log("+Recieved connection from "+ws._socket.remoteAddress);
ws.upgradeReq = conn;
ws.hasHandshook = false;
ws.onmessage = function message(msg) {
var message;
try {
message = JSON.parse(msg.data);
} catch (ex) {
ws.send("{\"e\":\"Invalid json.\"}");
return;
}
if (!ws.hasHandshook) {
ws.hasHandshook = true;
if (message.type === "client") {
//ensure code was provided and has a room
if (typeof message.code === 'undefined' || !connections.has(message.code)) {
ws.send("{\"e\":\"Invalid game code.\"}");
ws.closeReasonCode = 4001;
ws.closeDescription = "Invalid game code.";
console.log("-Ended connection with "+ws._socket.remoteAddress+ " (4001)");
ws.close();
}
if (typeof message.name === 'undefined') {
//TODO error out, no player name provided
}
//attach client to game session
ws.clientType = "client";
ws.gameCode = message.code;
ws.playerName =
connections.get(message.code).clients.add(ws);
ws.send("{\"joingame\":\"true\"}");
} else {
ws.send("{\"e\":\"Invalid type provided on handshake message.\"}");
ws.closeReasonCode = 4000;
ws.closeDescription = "Invalid type provided on handshake message.";
console.log("-Ended connection with "+ws._socket.remoteAddress+" (4000)");
ws.close();
}
}
};
ws.onclose = function close() {
console.log("-Ended connection with "+ws.upgradeReq.socket.remoteAddress+" (Client Closed)");
}
});
Client Code, which is successfully run on the press of a button on the page:
function DoJoinGame () {
console.log("Button pressed!");
gameCode = document.getElementById('base-gameCode').value.toUpperCase();
playerName = document.getElementById('base-playerName').value;
var ws = new WebSocket("ws://localhost:36245");
ws.onopen = function (event) {
console.log("Connection Established!");
ws.send("{\"type\":\"client\",\"code\":\""+gameCode+"\",\"name\":\""+playerName+"\"");
};
ws.onmessage = function (msg) {
let message = JSON.parse(msg.data);
if (message.joingame) { //if this is a "client added to session" message, set display: none; on the codeEntry div
document.getElementById('codeEntry').style.display = "none";
}
//TODO handle message
};
ws.onclose = function (evt) {
console.log("Connection lost! ("+evt.code+":"+evt.reason+")");
};
}
Thank you for your help!

Problem fixed. I was attempting to connect to a non secure websocket server from a secure origin and chrome & co. wasn't a fan.

How to load a specific session using express-session in node.js?

I need to create a websocket where I can connect to it from a different domain (websocket runs on 10.0.4.18:8020 and the client will establish connection from 10.0.4.160:443.)
Each user must have a unique session to be able to reuse his/her user data after authentication takes place.
Since the client "aka user's browser" is on a different host, I am having hard time keeping the session tied with with the client that creates it on page reloaded event!
I thought of this workaround to solve this problem
Create session using XMLHttpRequest() function from the client, then return a sessionID to the client
Save the sessionId in the user's browser using localStorage
Pass the sessionId to socket.io every time a user connects to the websocket.
Websocket then takes the sessionId and reloads it to make it available all over again.
To eliminate session fixation attack, I am going to add few more validation step to make sure the sessionId is not hijacked by using the client's IP and agent data.
Additionally, I need to fire a setInterval() method which will make external API call every second and updates the session variable.
Question
How can I properly reload a session data where I can auto save the variables without having to directly use store.get() to load the session data and save them?
Here is what I have done
I created the session using a file system. On every request I have to load the session store using store.get() method, update the session data, and then save it. But the problem that I have is every time I want to update the session as you can see my below code.
Here is what I have done!
var app = require('express')(),
https = require('https'),
fs = require('fs'),
session = require('express-session'),
fileStore = require('session-file-store')(session),
base64url = require('base64url'),
bodyParser = require("body-parser");
cookieParser = require("cookie-parser"),
env = require('./modules/config');
var server = https.createServer(
{
key: fs.readFileSync('certs/key.pem'),
cert: fs.readFileSync('certs/cert.pem')
}, app).listen(env.socket.port, env.socket.host, function () {
console.log('\033[2J');
console.log('Websocket is running at https://%s:%s', server.address().address, server.address().port);
});
var io = require('socket.io')(server);
var icwsReq = require('./modules/icws/request.js'),
icwsConn = require('./modules/icws/connection.js'),
icwsInter = require('./modules/icws/interactions.js'),
sessionValidator = require('./modules/validator.js');
var icwsRequest = new icwsReq();
var sessionChecker = new sessionValidator();
var sessionStoreFile = new fileStore({path: './tmp/sessions'});
var sessionOptions = {
store: sessionStoreFile,
secret: env.session.secret,
saveUninitialized: true,
resave: false,
cookie: {
path: '/',
httpOnly: true,
maxAge: 60 * 60 * 1000,
secure: true
}
};
app.use(session(sessionOptions)); // session support for the app
app.use(bodyParser.urlencoded({ extended: false })); //allows to pupulate req.body in the REST/PUT post requests!
// Set access control headers on every express route.
app.use(function (req, res, next){
res.setHeader('x-powered-by', 'Express');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
next();
});
//Middleware for authorizing a user before establishing a connection
io.use(function(req, next) {
var sessionID = req.handshake.query.token || '';
var token = req.handshake.query.auth || '';
var origin = req.handshake.headers.origin;
var ip = req.request.socket.remoteAddress;
var userAgent = req.handshake.headers['user-agent'];
if(!sessionID || !token){
console.log('No Session found with this token! ' + sessionID);
return next(new Error('No Session found with this token!'));
}
sessionStoreFile.get(sessionID, function(err, session){
// session updated
if(err){
console.log(err);
return next(new Error(err));
}
if(!session){
console.log('Session Could not be loaded');
return next(new Error('Session Could not be loaded'));
}
if( session.token != token
|| session.ip != ip
|| session.agent != userAgent
|| session.origin != origin
){
session.token = null;
session.ip = null;
session.agent = null;
session.origin = null;
sessionStoreFile.set(sessionID, session);
console.log('This session is invalid! Please sign in');
return next(new Error('This session is invalid! Please sign in'));
}
next();
});
});
io.on('connection', function (socket) {
var sessionID = socket.handshake.query.token;
//load the session with the ID sessionID
sessionStoreFile.get(sessionID, function(err, session){
//add the socket.id to the queue
session.clients.push(socket.id);
//Save the session data after adding the connection to the queue
sessionStoreFile.set(sessionID, session, function(){
//Get the current session data "including current socket.id"
sessionStoreFile.get(sessionID, function(err, session){
//get an instance of icws connector
icwsRequest.setConnection(session.icwsHost, session.icwsPort);
var interactions = new icwsInter(icwsRequest);
//Call the API everysecond, update the session then save the session
setInterval(function(){
sessionStoreFile.get(sessionID, function(err, session){
//call the API and return the new data
session.queue = interactions.updateQueue();
//save the new data every second
sessionStoreFile.set(sessionID, session);
}
}, 1000);
//handle ICWS interactions
socket.on('interaction', function(data){
var task = data.task || '',
phone = data.phone || '',
interactionId = data.interactionId || '',
queueName = data.queueName || '';
//Place a phone call
if(task == 'call'){
interactions.call(phone);
}
//External transfer
if(task == 'eBlindTransfer'){
interactions.blindTransferCallExternal(interactionId, phone);
}
//Internal Transfer
if(task == 'iBlindTransfer'){
interactions.blindTransferCallInternal(interactionId, queueName);
}
});
//send a chat message to all browser's tabs associated with the currect session
socket.on('chat', function(msg){
var clients = session.clients;
console.log(clients);
for (var i in clients) {
var socketId = clients[i];
console.log('Client Said: ' + msg + ' socket Id: ' + socketId);
io.to(socketId).emit('chat', {message: 'Server Said: ' + msg});
}
});
//handle disconnect
socket.on('disconnect', function(msg){
var index = session.clients.indexOf(socket.id);
if(index > -1){
session.clients.splice(index, 1);
//save session after removing a client
sessionStoreFile.set(sessionID, session, function(error){
if(!error){
console.log('Closing tabs: ' + socket.id);
console.log(session);
}
});
}
});
//handle errors
socket.on('error', function(msg){
console.log('Error Message: ' + msg);
});
});
});
});
});
app.get('/', function (req, res) {
res.send('welcome: ' + req.sessionID);
});
app.get('/handshake/:token', function (req, res) {
var origin = req.headers.origin;
var ip = req.connection.remoteAddress;
var userAgent = req.headers['user-agent'];
if(!req.params || !req.params.token || !ip || !origin || !userAgent){
console.log('Missing Request!');
return false;
}
if(!originIsAllowed(origin)){
console.log('This is a cross-domain attack!');
return false;
}
req.session.token = req.params.token;
req.session.ip = ip;
req.session.origin = origin;
req.session.agent = userAgent;
req.session.clients = [];
req.session.save(function(err){
if (err) {
connectionError(res, session);
} else {
res.json({
token: req.sessionID
});
}
});
});
function originIsAllowed(origin) {
// put logic here to detect whether the specified origin is allowed.
var allowed = env.session.allowedOrigins || []
if(allowed.indexOf(origin) >= 0){
return true;
}
return false;
};

How do I close a sockjs connection on the server side?

So, every time I refresh the page, it seems like sockjs is creating a new connection.
I am saving every message to my mongodb on every channel.onmessage, so if I refresh my page 7 times and send a message, I would save 7 messages of the same content into my mongodb.
This is very problematic because when I retrieve those messages when I go into the chat room, to see the log, I would see bunch of duplicate messages.
I want to keep track of all connections that are 'active', and if a user tries to make another connections, I want to be able to force close on the old one from the server side, so there is only 1 connection listening to each message at a time
How do I do this ?
var connections = {};
//creating the sockjs server
var chat = sockjs.createServer();
//installing handlers for sockjs server instance, with the same url as client
chat.installHandlers(server, {prefix:'/chat/private'});
var multiplexer = new multiplexServer.MultiplexServer(chat);
var configChannel = function (channelId, userId, userName){
var channel = multiplexer.registerChannel(channelId);
channel.on('connection', function (conn) {
// console.log('connection');
console.log(connections);
connections[channelId] = connections[channelId] || {};
if (connections[channelId][userId]) {
//want to close the extra connection
} else {
connections[channelId][userId] = conn;
}
// }
// if (channels[channelId][userId]) {
// conn = channels[channelId][userId];
// } else {
// channels[channelId][userId] = conn;
// }
// console.log('accessing channel! ', channels[channelId]);
conn.on('new user', function (data, message) {
console.log('new user! ', data, message);
});
// var number = connections.length;
conn.on('data', function(message) {
var messageObj = JSON.parse(message);
handler.saveMessage(messageObj.channelId, messageObj.user, messageObj.message);
console.log('received the message, ', messageObj.message);
conn.write(JSON.stringify({channelId: messageObj.channelId, user: messageObj.user, message: messageObj.message }));
});
conn.on('close', function() {
conn.write(userName + ' has disconnected');
});
});
return channel;
};

Simply use .close:
if (connections[channelId][userId]) {
// want to close the extra connection
connections[channelId][userId].close();
} else {
connections[channelId][userId] = conn;
}

Remote webcam stream using webkitPeerConnection00 isn't displayed

I am trying out the sample code for peer-to-peer webcam communication in http://www.html5rocks.com/en/tutorials/webrtc/basics/ where both clients are implemented in the same page.
The 'local' webcam stream is displayed correctly. However, nothing shows up on the 'remote' stream and I'm not sure why.
Below is my code. I am currently testing it out on a hosted server. Thanks!
var localStream;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({'audio':true, 'video':true}, onMediaSuccess, onMediaFail);
function onMediaSuccess(stream) {
var localVideo = document.getElementById("localVideo");
var url = window.URL.createObjectURL(stream);
localVideo.autoplay = true;
localVideo.src = url;
localStream = stream;
console.log('Local stream established: ' + url);
}
function onMediaFail() {
alert('Could not connect stream');
}
function iceCallback1(){}
function iceCallback2(){}
function gotRemoteStream(e) {
var remoteVideo = document.getElementById("remoteVideo");
var stream = e.stream;
var url = window.URL.createObjectURL(stream);
remoteVideo.autoplay = true;
remoteVideo.src = url;
console.log('Remote stream received: ' + url);
}
function call(){
pc1 = new webkitPeerConnection00(null, iceCallback1); // create the 'sending' PeerConnection
pc2 = new webkitPeerConnection00(null, iceCallback2); // create the 'receiving' PeerConnection
pc2.onaddstream = gotRemoteStream; // set the callback for the receiving PeerConnection to display video
console.log("Adding local stream to pc1");
pc1.addStream(localStream); // add the local stream for the sending PeerConnection
console.log("Creating offer");
var offer = pc1.createOffer({audio:true, video:true}); // create an offer, with the local stream
console.log("Setting local description for pc1");
pc1.setLocalDescription(pc1.SDP_OFFER, offer); // set the offer for the sending and receiving PeerConnection
console.log("Start pc1 ICE");
pc1.startIce();
console.log("Setting remote description for pc2");
pc2.setRemoteDescription(pc2.SDP_OFFER, offer);
// gotRemoteStream Triggers here
console.log("Creating answer"); // create an answer
var answer = pc2.createAnswer(offer.toSdp(), {has_audio:true, has_video:true});
console.log("Setting local description for pc2");
pc2.setLocalDescription(pc2.SDP_ANSWER, answer); // set it on the sending and receiving PeerConnection
console.log("Setting remote description for pc1");
pc1.setRemoteDescription(pc1.SDP_ANSWER, answer);
console.log("Start pc2 ICE");
pc2.startIce(); // start the connection process
console.log("script done");
}

Try this:
simpl.info RTCPeerConnectionby Vikas Marwaha and Justin Uberti
http://www.simpl.info/rtcpeerconnection/
It's working well for me and it's very clean and simple.