easyrtc demo could not connect to different network when up in heroku

[C# Gaming]

Hi guys could you help me out . i downloaded the easyrtc demo and it works fine in my localhost . but the problem is that when i uploaded it up to heroku at first i didn't anticipate the problem because what i was doing is that i open the uploaded easyrtc in my browser and ctrl + shift + n to open a new incognito app and browse again the uploaded easyrtc (it is in the same network - it works fine) . Now when i tried it with different network it doesn't connect. Help me please

[Eric Davies]

Bear in mind that when you post a question, it is essential to be very clear about what you are asking. Nobody can read your mind to get further details.

Common cases:

1) Your clients aren't able to access their cameras/microphones - you need to use https.

2) Your clients can access their cameras/microphones but they can't establish a websocket connection to the server - this is usually caused by somebody thinking they could just copy the client files into their http server

 and expect it work.

3) Your clients can't connect to each other when they are in different networks - the clients are probably behind a firewall or symmetric NAT router that requires you have a TURN server. See the getting started guide.

See the getting started guide https://easyrtc.com/docs/easyrtc_gettingStarted.php if you haven't already read it.

[C# Gaming]

http://imgur.com/64Txv8x

on the first link see there's a floating circle on the upper left corner of the video.

http://imgur.com/a/YWb2n

and in this 2nd link I'm trying to feed the image to the first picture. but the problem is that it doesn't work here is what in my

server.js

// Load required modules

var http    = require("http");              // http server core module

var express = require("express");           // web framework external module

var serveStatic = require('serve-static');  // serve static files

var socketIo = require("socket.io");        // web socket external module

var easyrtc = require("../");               // EasyRTC external module

// Set process name

process.title = "node-easyrtc";

// Setup and configure Express http server. Expect a subfolder called "static" to be the web root.

var app = express();

app.use(serveStatic('static', {'index': ['index.html']}));

var port = process.env.PORT || 8080;

// Start Express http server on port 8080

var webServer = http.createServer(app).listen(port);

// Start Socket.io so it attaches itself to Express server

var socketServer = socketIo.listen(webServer, {"log level":3});

// Overriding the default easyrtcAuth listener, only so we can directly access its callback

easyrtc.events.on("easyrtcAuth", function(socket, easyrtcid, msg, socketCallback, callback) {

easyrtc.events.defaultListeners.easyrtcAuth(socket, easyrtcid, msg, socketCallback, function(err, connectionObj){

    if (err || !msg.msgData || !msg.msgData.credential || !connectionObj)     {

        callback(err, connectionObj);

        return;

    }

    connectionObj.setField("credential", msg.msgData.credential, {"isShared":false});

    console.log("["+easyrtcid+"] Credential saved!", connectionObj.getFieldValueSync("credential"));

    callback(err, connectionObj);

});

});

// To test, lets print the credential to the console for every room join!

easyrtc.events.on("roomJoin", function(connectionObj, roomName, roomParameter, callback) {

console.log("["+connectionObj.getEasyrtcid()+"] Credential retrieved!", connectionObj.getFieldValueSync("credential"));

easyrtc.events.defaultListeners.roomJoin(connectionObj, roomName, roomParameter, callback);

});

// Start EasyRTC server

var rtc = easyrtc.listen(app, socketServer, null, function(err, rtcRef) {

console.log("Initiated");

rtcRef.events.on("roomCreate", function(appObj, creatorConnectionObj, roomName, roomOptions, callback) {

    console.log("roomCreate fired! Trying to create: " + roomName);

    appObj.events.defaultListeners.roomCreate(appObj, creatorConnectionObj, roomName, roomOptions, callback);

});

});

easyrtc.on("getIceConfig", function(connectionObj, callback) {

// This object will take in an array of XirSys STUN and TURN servers

var iceConfig = [];

http.request({ 

    url: 'https://service.xirsys.com/ice',

    qs: {

        ident: "***",

        secret: "***",

        domain: "***",

        application: "default",

        room: "default",

        secure: 1

    },

    function (error, response, body) {

        if (!error && response.statusCode == 200) {

            // body.d.iceServers is where the array of ICE servers lives

            iceConfig = body.d.iceServers;  

            console.log(iceConfig);

            callback(null, iceConfig);

        }

    }

});

});

//listen on port 8080

webServer.listen(8080, function () {

console.log('listening on http://localhost:'+port);

});

and in my

multistream.js

var selfEasyrtcid = "";

var haveSelfVideo = false;

var otherEasyrtcid = null;

function disable(domId) {

console.log("about to try disabling "  +domId);

document.getElementById(domId).disabled = "disabled";

}

function enable(domId) {

console.log("about to try enabling "  +domId);

document.getElementById(domId).disabled = "";

}

function createLabelledButton(buttonLabel) {

var button = document.createElement("button");

button.setAttribute('type','button');

button.setAttribute('class','btn btn-danger btn-circle waves-effect waves-circle waves-float');

button.innerHTML = "<i class='material-icons'>camera_enhance</i>";

document.getElementById("videoSrcBlk").appendChild(button);

return button;

}

function addMediaStreamToDiv(divId, stream, streamName, isLocal)

{

var container = document.createElement("div");

container.style.marginBottom = "10px";

var formattedName = streamName.replace("(", "<br>").replace(")", "");

var labelBlock = document.createElement("div");

var video = document.createElement("video");

video.setAttribute('class','easyrtcMirror instructor-vid');

video.setAttribute('id','selfVideo');

video.style.width = "100%";

video.muted = isLocal;

video.style.verticalAlign= "middle";

container.appendChild(video);

document.getElementById(divId).appendChild(container);

video.autoplay = true;

easyrtc.setVideoObjectSrc(video, stream);

return labelBlock;

}

function addMediaStreamToDivClient(divId, stream, streamName, isLocal)

{

var container = document.createElement("div");

container.style.marginBottom = "10px";

var formattedName = streamName.replace("(", "<br>").replace(")", "");

var labelBlock = document.createElement("button");

labelBlock.setAttribute('class','btn btn-warning btn-circle-lg userlive waves-effect waves-circle waves-float');

labelBlock.style.width = "100px";

labelBlock.style.height = "100px";

var video = document.createElement("video");

video.setAttribute('class','student-vid');

video.setAttribute('id','selfVideo');

video.muted = isLocal;

labelBlock.appendChild(video);

container.appendChild(labelBlock);

document.getElementById(divId).appendChild(container);

video.autoplay = true;

easyrtc.setVideoObjectSrc(video, stream);

return labelBlock;

}

function createLocalVideo(stream, streamName) {

var labelBlock = addMediaStreamToDiv("localVideos", stream, streamName, true);

var closeButton = createLabelledButton("close");

closeButton.onclick = function() {

    easyrtc.closeLocalStream(streamName);

    labelBlock.parentNode.parentNode.removeChild(labelBlock.parentNode);

}

labelBlock.appendChild(closeButton);

console.log("created local video, stream.streamName = " + stream.streamName);

}

function addSrcButton(buttonLabel, videoId) {

var button = createLabelledButton(buttonLabel);

button.onclick = function() {

    easyrtc.setVideoSource(videoId);

    easyrtc.initMediaSource(

            function(stream) {

                createLocalVideo(stream, buttonLabel);

                if( otherEasyrtcid) {

                    easyrtc.addStreamToCall(otherEasyrtcid, buttonLabel, function(easyrtcid, streamName){

                        easyrtc.showError("Informational", "other party " + easyrtcid + " acknowledges receiving " + streamName);

                    });

                }

            },

            function(errCode, errText) {

                easyrtc.showError(errCode, errText);

            }, buttonLabel);

};

}

function connect() {

console.log("Initializing.");

easyrtc.setRoomOccupantListener(convertListToButtons);

easyrtc.connect("easyrtc.multistream", loginSuccess, loginFailure);

easyrtc.setAutoInitUserMedia(false);

easyrtc.getVideoSourceList(function(videoSrcList) {

    for (var i = 0; i < videoSrcList.length; i++) {

         var videoEle = videoSrcList[i];

        var videoLabel = (videoSrcList[i].label &&videoSrcList[i].label.length > 0)?

        (videoSrcList[i].label):("src_" + i);

        addSrcButton(videoLabel, videoSrcList[i].deviceId);

    }

});

}

function hangup() {

easyrtc.hangupAll();

disable('hangupButton');

}

function clearConnectList() {

var otherClientDiv = document.getElementById('otherClients');

while (otherClientDiv.hasChildNodes()) {

    otherClientDiv.removeChild(otherClientDiv.lastChild);

}

}

function convertListToButtons(roomName, occupants, isPrimary) {

clearConnectList();

var otherClientDiv = document.getElementById('otherClients');

for (var easyrtcid in occupants) {

    var button = document.createElement('button');

    button.setAttribute('class','col-md-3 btn bg-red btn-block btn-lg waves-effect');

    button.onclick = function(easyrtcid) {

        return function() {

            performCall(easyrtcid);

        };

    }(easyrtcid);

    var label = document.createTextNode("Student no.: " + easyrtc.idToName(easyrtcid));

    button.appendChild(label);

    otherClientDiv.appendChild(button);

}

}

function performCall(targetEasyrtcId) {

var acceptedCB = function(accepted, easyrtcid) {

    if (!accepted) {

        easyrtc.showError("CALL-REJECTED", "Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");

        enable('otherClients');

    }

    else {

        otherEasyrtcid = targetEasyrtcId;

    }

};

var successCB = function() {

    enable('hangupButton');

};

var failureCB = function() {

    enable('otherClients');

};

var keys = easyrtc.getLocalMediaIds();

easyrtc.call(targetEasyrtcId, successCB, failureCB, acceptedCB, keys);

enable('hangupButton');

}

function loginSuccess(easyrtcid) {

disable("connectButton");

//  enable("disconnectButton");

enable('otherClients');

selfEasyrtcid = easyrtcid;

document.getElementById("iam").innerHTML = "Connected!";

// document.getElementById("iam").innerHTML = "Connected, waiting for class room" + easyrtc.cleanId(easyrtcid);

}

function loginFailure(errorCode, message) {

easyrtc.showError(errorCode, message);

}

function disconnect() {

document.getElementById("iam").innerHTML = "logged out";

easyrtc.disconnect();

enable("connectButton");

clearConnectList();

easyrtc.setVideoObjectSrc(document.getElementById('selfVideo'), "");

}

easyrtc.setStreamAcceptor(function(easyrtcid, stream, streamName) {

var labelBlock = addMediaStreamToDivClient("remoteVideos", stream, streamName, false);

labelBlock.parentNode.id = "remoteBlock" + easyrtcid + streamName;

console.log("accepted incoming stream with name " + stream.streamName);

console.log("checking incoming " + easyrtc.getNameOfRemoteStream(easyrtcid, stream));

});

easyrtc.setOnStreamClosed(function(easyrtcid, stream, streamName) {

var item = document.getElementById("remoteBlock" + easyrtcid + streamName);

item.parentNode.removeChild(item);

});

var callerPending = null;

easyrtc.setCallCancelled(function(easyrtcid) {

if (easyrtcid === callerPending) {

    document.getElementById('acceptCallBox').style.display = "none";

    callerPending = false;

}

});

easyrtc.setAcceptChecker(function(easyrtcid, callback) {

otherEasyrtcid = easyrtcid;

if (easyrtc.getConnectionCount() > 0) {

    easyrtc.hangupAll();

}

callback(true, easyrtc.getLocalMediaIds());

});

And on heroku log here is what it says:

2017-05-24T15:40:05.352716+00:00 heroku[router]: at=info method=GET path="/socket.io/?EIO=3&transport=polling&t=Lmx7G8z&sid=x2x-q9gk8gJmiJW3AAAC" host=shielded-sands-69548.herokuapp.com request_id=1a3911f4-e809-42f9-8008-c1ab4ac5d860 fwd="121.54.32.165" dyno=web.1 connect=0ms service=62ms status=200 bytes=559 protocol=https 2017-05-24T15:40:07.182964+00:00 app[web.1]:

debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] EasyRTC command received with msgType [setRoomApiField] 2017-05-24T15:40:07.184033+00:00 app[web.1]:

debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Running func 'onMsgTypeSetRoomApiField' with apiFieldObj: { roomName: [32m'default'[39m,

2017-05-24T15:40:07.184035+00:00 app[web.1]: field:

2017-05-24T15:40:07.184035+00:00 app[web.1]: { mediaIds:

2017-05-24T15:40:07.184036+00:00 app[web.1]: { fieldName: [32m'mediaIds'[39m,

2017-05-24T15:40:07.184037+00:00 app[web.1]: fieldValue: { [32m'USB2.0 HD UVC WebCam (04f2:b409)'[39m: [32m'7G0CSKTl143ui0S8P3o3I6ODKqkmcb6c9x2J'[39m } } } }

2017-05-24T15:40:07.193658+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Room [default] Running func 'connectionRoomObj.emitRoomDataDelta'

2017-05-24T15:40:07.193760+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Room [default] Running func 'connectionRoomObj.generateRoomDataDelta' Disconnected from log stream. There may be events happening that you do not see here! Attempting to reconnect...

2017-05-24T15:40:30.732318+00:00 heroku[router]: at=info method=GET path="/socket.io/?EIO=3&transport=polling&t=Lmx7TgQ&sid=2GH0CYMLf5N1yMSoAAAD" host=shielded-sands-69548.herokuapp.com request_id=b3e85b00-1631-4a86-ac37-d30e7da18e5a fwd="112.198.82.104" dyno=web.1 connect=0ms service=44ms status=200 bytes=559 protocol=https

2017-05-24T15:40:31.058485+00:00 heroku[router]: at=info method=GET path="/socket.io/?EIO=3&transport=polling&t=Lmx7Tlt&sid=2GH0CYMLf5N1yMSoAAAD" host=shielded-sands-69548.herokuapp.com request_id=4eca076e-77d4-4c79-81f8-85b0bc87f474 fwd="112.198.82.104" dyno=web.1 connect=0ms service=10ms status=200 bytes=225 protocol=https

2017-05-24T15:40:31.492099+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] EasyRTC command received with msgType [setRoomApiField]

2017-05-24T15:40:31.492866+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] Running func 'onMsgTypeSetRoomApiField' with apiFieldObj: { roomName: [32m'default'[39m,

2017-05-24T15:40:31.492869+00:00 app[web.1]: field:

2017-05-24T15:40:31.492869+00:00 app[web.1]: { mediaIds:

2017-05-24T15:40:31.492870+00:00 app[web.1]: { fieldName: [32m'mediaIds'[39m,

2017-05-24T15:40:31.492871+00:00 app[web.1]: fieldValue: { [32m'camera 1, facing front'[39m: [32m'jyQhLuKAb3xFwMnpx4316IazXWfq8OjpllXN'[39m } } } }

2017-05-24T15:40:31.493276+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] Room [default] Running func 'connectionRoomObj.emitRoomDataDelta'

2017-05-24T15:40:31.493368+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] Room [default] Running func 'connectionRoomObj.generateRoomDataDelta'

2017-05-24T15:40:31.493579+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Running func 'onEmitEasyrtcCmd' with msgType [roomData]

2017-05-24T15:40:35.147874+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] EasyRTC command received with msgType [offer]

2017-05-24T15:40:35.148264+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] Running func 'onEmitEasyrtcCmd' with msgType [offer]

2017-05-24T15:40:35.771088+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] EasyRTC message received of type [easyrtc_streamReceived]

2017-05-24T15:40:35.778244+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Running func 'onEmitEasyrtcMsg' with msgType [easyrtc_streamReceived]

2017-05-24T15:40:35.825123+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] EasyRTC command received with msgType [answer]

2017-05-24T15:40:35.825572+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Running func 'onEmitEasyrtcCmd' with msgType [answer]

2017-05-24T15:40:35.835961+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] EasyRTC command received with msgType [candidate]

2017-05-24T15:40:35.836259+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][s4kVZlTHTPBuXAsq] Running func 'onEmitEasyrtcCmd' with msgType [candidate]

2017-05-24T15:40:35.880085+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] EasyRTC command received with msgType [setUserCfg]

2017-05-24T15:40:35.880411+00:00 app[web.1]: debug - EasyRTC: [easyrtc.multistream][GbiiKUGLqDt10wqa] WebRTC setUserCfg command received. This feature is not yet complete.

[C# Gaming]

here is the link to my question on SO
https://stackoverflow.com/questions/44163427/could-not-connect-with-a-different-internet-connectioneasyrtc

[Eric Davies]

I'm seeing a few areas of interest here.

First one is that you appear to be running an http instead of an https server. Chrome won't generate a media stream unless you are running localhost or running https. It's a security thing. Firefox doesn't have the same restriction, the last time I checked.

You are running a third party turn server. I have no idea how well that service works. However, what I can do to help:

make sure the demo pages are running on your server, in particular, the one called "Selective Ice Filter" and send me a url to the page that I can access.

I'll play with the select ice filter demo (which is a very useful tool for debugging this type of problem) and tell you what the problem appears to be. You should send the link to my ericthe...@gmail.com address because my work address doesn't get checked as often at the moment.

Eric.