Intergrate STUN server into XSockets.NET WebRTC

Question

I'm quite new to this. How would I go about adding STUN functionality to my existing XSockets.NET WebRTC Javascript code?

This JS creates my connections. I am running the signalling server separate on a linux machine running mono.

<script type="text/javascript">
    $(document).ready(function() 
    {
        var rtc, ws, currentContext, change;
        var roomName = '<?php echo $roomName; ?>';
        var myCtx = '<?php echo $roomHash; ?>'; 
        var XSocketsServerIP = '<?php echo $XSocketsServerIP; ?>';              
        var startofurl = "/";
        var myCtxURLVersion = startofurl.concat(roomName);

        window.history.pushState("", "title", myCtxURLVersion);

        //Create new XSockets WebSocket.
        ws = new XSockets.WebSocket(XSocketsServerIP);
        ws.onopen = function (connection) 
        {
            console.log("Connection", connection);          

            rtc = new XSockets.WebRTC(ws);

            rtc.oncontextcreated = function(ctx) 
            {
                console.log("ctx", ctx);
            };

            rtc.oncontextchanged = function(change) 
            {
                console.log("change of context", change);
            };

            rtc.getUserMedia({audio:true,video:false}, function(result) 
            {   
                rtc.changeContext(myCtx);
                console.log("getUserMedia() success.", result);
            });

            rtc.onremotestream = function(event) {

                var randhash = Math.floor((Math.random() * 9999) + 1);
                randhash =  hex_md5(randhash);
                var videoTag = document.createElement('video');
                videoTag.setAttribute("id",randhash);
                videoTag.setAttribute("autoplay", "true");
                videoTag.setAttribute("poster", "images/user.png");
                document.getElementById('othersarea').appendChild(videoTag);
                attachMediaStream(videoTag, event.stream);

            }

            rtc.onlocalstream = function(stream) 
            {
                console.log("attach okay!");
                attachMediaStream(document.querySelector("#localVideo"), stream);
            };

            ws.subscribe("onChangeContextFailed", function(data) 
            {
                console.log(data);
            });

            rtc.bind(XSockets.WebRTC.Events.onPeerConnectionLost, function(peer) 
            {
                console.log('OnPeerConnectionLost', peer);
                    $('video').last().remove();
            }); 
        };

        var root = "<?php echo $root; ?>";
        fullURL = root.concat(myCtxURLVersion);

        function urlIntoBox(myCtxURLVersion) {
            var textbox = document.getElementById('txtSelect');
            textbox.value = fullURL;
        }

        function getNumVidsOnPage()
        {
            var videos = document.getElementsByTagName('video'),
            numVideos = videos.length;
        }

        urlIntoBox();

        var currVideos = getNumVidsOnPage();
        if (currVideos > 10)
        {
            window.location.href = "http://voice.gg?msg=That%20room%20has%20too%20many%users."; 
        }
   });
</script>

How could I go ahead and add STUN functionality to make sure NAT users can also connect because at the moment they are having issues connecting.. Thanks!

Answer 1

Do not know if you are using XSockets version 3 or 4, but if you take a look at XSockets WebRTC on GitHub you will see that there is a section about configuration that shows how to change the stun server.

Example from github:

var rtc = new XSockets.WebRTC(broker, {
    iceServers: [{
        url: 'stun:404.idonotexist.net'
    }],
    streamConstraints: {
        optional: [{
            'bandwidth': 500
        }]
}});