@flashphoner/sfusdk-examples 2.0.192 → 2.0.196

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/sfusdk-examples",
-  "version": "2.0.192",
+  "version": "2.0.196",
   "description": "Official Flashphoner WebCallServer SFU SDK usage examples",
   "main": "dist/sfu.js",
   "types": "src/sfu.ts",
@@ -27,6 +27,6 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@flashphoner/sfusdk": "^2.0.130"
+    "@flashphoner/sfusdk": "^2.0.193"
   }
 }

package/src/client/chat.js

@@ -22,10 +22,10 @@ const createChat = function(room, messages, input, sendButton) {
         }, chatOtherColour, chatEventColour);
     });
 
-    const sendMessage = function() {
+    const sendMessage = async function() {
         let message = input.value;
         input.value = "";
-        room.sendMessage(message);
+        await room.sendMessage(message);
         appendMessage({
             nickName: nickName.value,
             message: message

package/src/client/controls.js

@@ -70,64 +70,62 @@ const createControls = function(config) {
     controls.entrance.roomPin.value = config.room.pin;
     controls.entrance.nickName.value = config.room.nickName;
 
-    const addAudioTrackRow = function(track) {
-        getMedia([track]).then(function(stream){
-            let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
-            const row = controls.tables.audio.row.add({
-                source: track.source,
-                channels: track.channels,
-                action: button,
-                stream: stream
-            }).node();
-            controls.tables.audio.draw();
+    const addAudioTrackRow = async function(track) {
+        const stream = await getMedia([track]);
+        let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
+        const row = controls.tables.audio.row.add({
+            source: track.source,
+            channels: track.channels,
+            action: button,
+            stream: stream
+        }).node();
+        controls.tables.audio.draw();
 
-            $('#' + stream.id + "-button").on('click', function(){
-                //terminate stream
-                console.log("terminate stream " + stream.id);
-                let track = stream.getAudioTracks()[0];
-                track.stop();
-                track.dispatchEvent(new Event("ended"));
-            });
-            stream.getTracks()[0].onended = function() {
-                controls.tables.audio.row(row).remove().draw();
-            }
-            trackCallback({
-                stream: stream,
-                encodings: track.encodings,
-                source: track.source
-            });
+        $('#' + stream.id + "-button").on('click', function(){
+            //terminate stream
+            console.log("terminate audio stream " + stream.id);
+            let track = stream.getAudioTracks()[0];
+            track.stop();
+            track.dispatchEvent(new Event("ended"));
+        }).prop('disabled', true);
+        stream.getTracks()[0].onended = function() {
+            controls.tables.audio.row(row).remove().draw();
+        }
+        trackCallback({
+            stream: stream,
+            encodings: track.encodings,
+            source: track.source
         });
     }
 
-    const addVideoTrackRow = function(track) {
-        getMedia([track]).then(function(stream){
-            let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
-            const row = controls.tables.video.row.add({
-                source: track.source,
-                width: track.width,
-                height: track.height,
-                codec: track.codec,
-                action: button,
-                stream: stream,
-                encodings: track.encodings
-            }).node();
-            controls.tables.video.draw();
+    const addVideoTrackRow = async function(track) {
+        const stream = await getMedia([track]);
+        let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
+        const row = controls.tables.video.row.add({
+            source: track.source,
+            width: track.width,
+            height: track.height,
+            codec: track.codec,
+            action: button,
+            stream: stream,
+            encodings: track.encodings,
+        }).node();
+        controls.tables.video.draw();
 
-            $('#' + stream.id + "-button").on('click', function(){
-                //terminate stream
-                console.log("terminate stream " + stream.id);
-                let track = stream.getVideoTracks()[0];
-                track.stop();
-                track.dispatchEvent(new Event("ended"));
-            });
-            stream.getTracks()[0].addEventListener("ended", function() {
-                controls.tables.video.row(row).remove().draw();
-            });
-            trackCallback({
-                stream: stream,
-                encodings: track.encodings,
-                source: track.source
-            });
+        $('#' + stream.id + "-button").on('click', function(){
+            //terminate stream
+            console.log("terminate video stream " + stream.id);
+            let track = stream.getVideoTracks()[0];
+            track.stop();
+            track.dispatchEvent(new Event("ended"));
+        }).prop('disabled', true);
+        stream.getTracks()[0].addEventListener("ended", function() {
+            controls.tables.video.row(row).remove().draw();
+        });
+        trackCallback({
+            stream: stream,
+            encodings: track.encodings,
+            source: track.source
         });
     }
 
@@ -148,28 +146,6 @@ const createControls = function(config) {
         return details;
     }
 
-    // Add event listener for opening and closing details
-    $('#videoTracksTableBody').on('click', 'td.details-control', function () {
-        let tr = $(this).closest('tr');
-        let row = controls.tables.video.row(tr);
-        if (row.child.isShown()) {
-            // This row is already open - close it
-            row.child.hide();
-            tr.removeClass('shown');
-        } else {
-            // Open this row
-            row.child(format(row.data())).show();
-            tr.addClass('shown');
-        }
-    });
-
-    config.media.audio.tracks.forEach(function(track){
-        addAudioTrackRow(track);
-    })
-    config.media.video.tracks.forEach(function(track){
-        addVideoTrackRow(track);
-    })
-
     const muteForm = function(form) {
         for (const [key, value] of Object.entries(form)) {
             value.disabled = true;
@@ -187,12 +163,19 @@ const createControls = function(config) {
     }
 
     const roomConfig = function() {
-        return {
+        let roomConfig = {
             url: controls.entrance.url.value,
             roomName: controls.entrance.roomName.value,
             pin: controls.entrance.roomPin.value,
             nickname: controls.entrance.nickName.value
+        };
+        if (config.room.failedProbesThreshold !== undefined) {
+            roomConfig.failedProbesThreshold = config.room.failedProbesThreshold;
+        }
+        if (config.room.pingInterval !== undefined) {
+            roomConfig.pingInterval = config.room.pingInterval;
         }
+        return roomConfig;
     }
 
     const getVideoStreams = function() {
@@ -220,63 +203,100 @@ const createControls = function(config) {
         return streams;
     }
 
-    document.getElementById("addVideoTrack").addEventListener("click", function(e){
-        let encodings = [];
-        controls.tables.encodings.rows().every(function() {
-            let encoding = this.data();
-            encodings.push({
-                rid: encoding.rid,
-                active: encoding.active,
-                maxBitrate: encoding.maxBitrate,
-                scaleResolutionDownBy: encoding.resolutionScale
-            })
-        });
-        let track = {
-            source: controls.addVideoTrack.source.value,
-            width: controls.addVideoTrack.width.value,
-            height: controls.addVideoTrack.height.value,
-            codec: controls.addVideoTrack.codec.value,
-            encodings: encodings
-        }
-        addVideoTrackRow(track);
-    });
-
-    $("#videoTrackEncodingsTable").on("click", ".remove", function(){
-        controls.tables.encodings.row($(this).parents('tr')).remove().draw();
-    });
+    const onTrack = function(callback) {
+        trackCallback = callback;
+    }
 
-    document.getElementById("addVideoTrackEncoding").addEventListener("click", function(){
-        let button = '<button class="btn btn-primary remove">Delete</button>';
-        controls.tables.encodings.row.add({
-            rid: controls.addVideoEncoding.rid.value,
-            active: controls.addVideoEncoding.active.value,
-            maxBitrate: controls.addVideoEncoding.maxBitrate.value,
-            resolutionScale: controls.addVideoEncoding.resolutionScale.value,
-            action: button
-        }).draw();
-    });
+    const displayTables = async function() {
+        // Add event listener for opening and closing details
+        $('#videoTracksTableBody').on('click', 'td.details-control', function () {
+            let tr = $(this).closest('tr');
+            let row = controls.tables.video.row(tr);
+            if (row.child.isShown()) {
+                // This row is already open - close it
+                row.child.hide();
+                tr.removeClass('shown');
+            } else {
+                // Open this row
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+            }
+        });
 
-    document.getElementById("addAudioTrack").addEventListener("click", function(e){
-        let encodings = [];
-        let track = {
-            source: controls.addAudioTrack.source.value,
-            channels: controls.addAudioTrack.channels.value,
-            encodings: encodings
+        // Add preconfigured audio and video tracks
+        for (const track of config.media.audio.tracks) {
+            await addAudioTrackRow(track);
+        }
+        for (const track of config.media.video.tracks) {
+            await addVideoTrackRow(track);
         }
-        addAudioTrackRow(track);
-    });
 
-    const onTrack = function(callback) {
-        trackCallback = callback;
+        // Click event listener to add a new video track
+        document.getElementById("addVideoTrack").addEventListener("click", function(e){
+            let encodings = [];
+            controls.tables.encodings.rows().every(function() {
+                let encoding = this.data();
+                encodings.push({
+                    rid: encoding.rid,
+                    active: encoding.active,
+                    maxBitrate: encoding.maxBitrate,
+                    scaleResolutionDownBy: encoding.resolutionScale
+                })
+            });
+            let track = {
+                source: controls.addVideoTrack.source.value,
+                width: controls.addVideoTrack.width.value,
+                height: controls.addVideoTrack.height.value,
+                codec: controls.addVideoTrack.codec.value,
+                encodings: encodings
+            }
+            addVideoTrackRow(track);
+        });
+    
+        // Click event listener to remove video quality
+        $("#videoTrackEncodingsTable").on("click", ".remove", function(){
+            controls.tables.encodings.row($(this).parents('tr')).remove().draw();
+        });
+    
+        // Click event listener to add video quality
+        document.getElementById("addVideoTrackEncoding").addEventListener("click", function(){
+            let button = '<button class="btn btn-primary remove">Delete</button>';
+            controls.tables.encodings.row.add({
+                rid: controls.addVideoEncoding.rid.value,
+                active: controls.addVideoEncoding.active.value,
+                maxBitrate: controls.addVideoEncoding.maxBitrate.value,
+                resolutionScale: controls.addVideoEncoding.resolutionScale.value,
+                action: button
+            }).draw();
+        });
+
+        // Click event listener to add a new audio track
+        document.getElementById("addAudioTrack").addEventListener("click", function(e){
+            let encodings = [];
+            let track = {
+                source: controls.addAudioTrack.source.value,
+                channels: controls.addAudioTrack.channels.value,
+                encodings: encodings
+            }
+            addAudioTrackRow(track);
+        });
+    
     }
 
+    const cleanTables = function() {
+        controls.tables.video.rows().remove().draw();
+        controls.tables.audio.rows().remove().draw();
+        controls.tables.encodings.rows().remove().draw();
+    }
 
     return {
         muteInput: muteInput,
         roomConfig: roomConfig,
+        displayTables: displayTables,
         getAudioStreams: getAudioStreams,
         getVideoStreams: getVideoStreams,
-        onTrack: onTrack
+        onTrack: onTrack,
+        cleanTables: cleanTables
     }
 }
 
@@ -288,17 +308,28 @@ const getMedia = async function(tracks) {
         if (track.source === "mic") {
             //audio
             constraints.audio = {};
+            if (track.constraints) {
+                constraints.audio = track.constraints;
+            }
             constraints.audio.stereo = track.channels !== 1
+            if (track.channels && track.channels === 2) {
+                constraints.audio.echoCancellation = false;
+                constraints.audio.googEchoCancellation = false;
+            }
         } else if (track.source === "camera") {
-            constraints.video = {
-                width: track.width,
-                height: track.height
-            };
+            constraints.video = {};
+            if (track.constraints) {
+                constraints.video = track.constraints;
+            }
+            constraints.video.width = track.width;
+            constraints.video.height = track.height;
         } else if (track.source === "screen") {
-            constraints.video = {
-                width: track.width,
-                height: track.height
-            };
+            constraints.video = {};
+            if (track.constraints) {
+                constraints.video = track.constraints;
+            }
+            constraints.video.width = track.width;
+            constraints.video.height = track.height;
             screen = true;
         }
     });

package/src/client/display.js

@@ -327,7 +327,7 @@ const initRemoteDisplay = function(room, mainDiv, peerConnection) {
                         qualityDiv.innerText = trackInfo.quality[i];
                         qualityDiv.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
                         qualityDiv.style.color = "red";
-                        qualityDiv.addEventListener('click', function(){
+                        qualityDiv.addEventListener('click', async function(){
                             console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
                             if (qualityDiv.style.color === "red") {
                                 return;
@@ -338,7 +338,7 @@ const initRemoteDisplay = function(room, mainDiv, peerConnection) {
                                 }
                             }
                             qualityDiv.style.color = "blue";
-                            room.changeQuality(trackInfo.id, trackInfo.quality[i]);
+                            await room.changeQuality(trackInfo.id, trackInfo.quality[i]);
                         });
                         qualityDisplay.appendChild(qualityDiv);
                     }
@@ -348,13 +348,13 @@ const initRemoteDisplay = function(room, mainDiv, peerConnection) {
                         tidDiv.innerText = "TID"+i;
                         tidDiv.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
                         tidDiv.style.color = "gray";
-                        tidDiv.addEventListener('click', function(){
+                        tidDiv.addEventListener('click', async function(){
                             console.log("Clicked on TID " + i + " trackId " + trackInfo.id);
                             for (let c = 0; c < tidDivs.length; c++) {
                                 tidDivs[c].style.color = "gray";
                             }
                             tidDiv.style.color = "blue";
-                            room.changeQuality(trackInfo.id, null, i);
+                            await room.changeQuality(trackInfo.id, null, i);
                         });
                         tidDisplay.appendChild(tidDiv);
                     }

package/src/client/main.html

@@ -210,7 +210,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="cancel()">Close</button>
                 <button class="btn btn-primary" id="startButton" onclick="connect()">Enter</button>
             </div>
         </div>

package/src/client/main.js

@@ -2,7 +2,6 @@ const constants = SFU.constants;
 const sfu = SFU;
 let localDisplay;
 let cControls;
-let pc;
 
 const defaultConfig = {
     room: {
@@ -38,7 +37,7 @@ const defaultConfig = {
 };
 
 /**
- * load config and show entrance modal
+ * Load track configuration and show entrance modal
  */
 const init = function() {
     //read config
@@ -48,44 +47,57 @@ const init = function() {
         //use default config
         cControls = createControls(defaultConfig);
     });
-    //create local display to show local streams
-    localDisplay = initLocalDisplay(document.getElementById("localDisplay"));
     //open entrance modal
     $('#entranceModal').modal('show');
 }
 
 /**
- * connect to server
+ * Connect to server and publish preconfigured streams
  */
-function connect() {
-    //hide modal
+async function connect() {
+    // hide modal
     $('#entranceModal').modal('hide');
-    //disable controls
+    // disable controls
     cControls.muteInput();
     //create peer connection
-    pc = new RTCPeerConnection();
+    const pc = new RTCPeerConnection();
     //get config object for room creation
     const roomConfig = cControls.roomConfig();
     //kick off connect to server and local room creation
-    const session = sfu.createRoom(roomConfig);
-    session.on(constants.SFU_EVENT.CONNECTED, function() {
+    try {
+        const session = await sfu.createRoom(roomConfig);
+        // Now we connected to the server (if no exception was thrown)
+        session.on(constants.SFU_EVENT.FAILED, function(e) {
+            if (e.status && e.statusText) {
+                displayError("CONNECTION FAILED: " + e.status + " " + e.statusText);
+            } else if (e.type && e.info) {
+                displayError("CONNECTION FAILED: " + e.info);
+            } else {
+                displayError("CONNECTION FAILED: " + e);
+            }
+        }).on(constants.SFU_EVENT.DISCONNECTED, function(e) {
+            displayError("DISCONNECTED. Refresh the page to enter the room again");
+        });
         const room = session.room();
-        //connected to server
+        room.on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
+            displayError(e);
+        }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
+            displayError(e.operation + " failed: " + e.error);
+        })
+
+        // create local display to show local streams
+        localDisplay = initLocalDisplay(document.getElementById("localDisplay"));
+        // display audio and video control tables
+        await cControls.displayTables();
+        cControls.onTrack(async function (s) {
+            await publishNewTrack(room, pc, s);
+        });
+        //create and bind chat to the new room
         const chatDiv = document.getElementById('messages');
         const chatInput = document.getElementById('localMessage');
         const chatButton = document.getElementById('sendMessage');
-        //create and bind chat to the new room
         createChat(room, chatDiv, chatInput, chatButton);
 
-        room.on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
-            const errField = document.getElementById("errorMsg");
-            errField.style.color = "red";
-            errField.innerText = e;
-        }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
-            const errField = document.getElementById("errorMsg");
-            errField.style.color = "red";
-            errField.innerText = e.operation + " failed: " + e.error;
-        })
         //setup remote display for showing remote audio/video tracks
         const remoteDisplay = document.getElementById("display");
         initRemoteDisplay(room, remoteDisplay, pc);
@@ -94,6 +106,25 @@ function connect() {
         let streams = cControls.getVideoStreams();
         //combine local video streams with audio streams
         streams.push.apply(streams, cControls.getAudioStreams());
+
+        // Publish preconfigured streams
+        publishPreconfiguredStreams(room, pc, streams);
+    } catch(e) {
+        console.error(e);
+        displayError(e);
+    }
+}
+
+
+/**
+ * Publish streams after entyering room according to configuration file
+ * 
+ * @param {*} room
+ * @param {*} pc
+ * @param {*} streams 
+ */
+const publishPreconfiguredStreams = async function(room, pc, streams) {
+    try {
         let config = {};
         //add our local streams to the room (to PeerConnection)
         streams.forEach(function (s) {
@@ -108,50 +139,124 @@ function connect() {
                 subscribeTrackToEndedEvent(room, track, pc);
             });
         });
-        //add callback for the new local stream to the local controls
-        cControls.onTrack(function (s) {
-            let config = {};
-            //add local stream to local display
-            localDisplay.add(s.stream.id, "local", s.stream);
-            //add each track to PeerConnection
-            s.stream.getTracks().forEach((track) => {
-                if (s.source === "screen") {
-                    config[track.id] = s.source;
-                }
-                addTrackToPeerConnection(pc, s.stream, track, s.encodings);
-                subscribeTrackToEndedEvent(room, track, pc);
-            });
-            //kickoff renegotiation
-            room.updateState(config);
-        });
         //join room
-        room.join(pc, null, config);
-    });
+        await room.join(pc, null, config);
+        // Enable Delete button for each preconfigured stream #WCS-3689
+        streams.forEach(function (s) {
+            $('#' + s.stream.id + "-button").prop('disabled', false);
+        });
+    } catch(e) {
+        console.error("Failed to publish a preconfigured streams: " + e);
+        displayError(e);
+        // Enable Delete button for each preconfigured stream #WCS-3689
+        streams.forEach(function (s) {
+            $('#' + s.stream.id + "-button").prop('disabled', false);
+        });
+    }
 }
 
+/**
+ * Publish a new media track to the room
+ * 
+ * @param {*} room
+ * @param {*} pc
+ * @param {*} media 
+ */
+const publishNewTrack = async function(room, pc, media) {
+    try {
+        let config = {};
+        //add local stream to local display
+        localDisplay.add(media.stream.id, "local", media.stream);
+        //add each track to PeerConnection
+        media.stream.getTracks().forEach((track) => {
+            if (media.source === "screen") {
+                config[track.id] = media.source;
+            }
+            addTrackToPeerConnection(pc, media.stream, track, media.encodings);
+            subscribeTrackToEndedEvent(room, track, pc);
+        });
+        // Clean error message
+        displayError("");
+        //kickoff renegotiation
+        await room.updateState(config);
+        // Enable Delete button for a new stream #WCS-3689
+        $('#' + media.stream.id + "-button").prop('disabled', false);
+    } catch(e) {
+        console.error("Failed to publish a new track: " + e);
+        displayError(e);
+        // Enable Delete button for a new stream #WCS-3689
+        $('#' + media.stream.id + "-button").prop('disabled', false);
+    }
+}
+
+/**
+ * Subscribe to track ended event to renegotiate WebRTC connection
+ * 
+ * @param {*} room 
+ * @param {*} track 
+ * @param {*} pc 
+ */
 const subscribeTrackToEndedEvent = function(room, track, pc) {
-    track.addEventListener("ended", function() {
-        //track ended, see if we need to cleanup
-        let negotiate = false;
-        for (const sender of pc.getSenders()) {
-            if (sender.track === track) {
-                pc.removeTrack(sender);
-                //track found, set renegotiation flag
-                negotiate = true;
-                break;
+    track.addEventListener("ended", async function() {
+        try {
+            //track ended, see if we need to cleanup
+            let negotiate = false;
+            for (const sender of pc.getSenders()) {
+                if (sender.track === track) {
+                    pc.removeTrack(sender);
+                    //track found, set renegotiation flag
+                    negotiate = true;
+                    break;
+                }
             }
-        }
-        if (negotiate) {
-            //kickoff renegotiation
-            room.updateState();
+            // Clean error message
+            displayError("");
+            if (negotiate) {
+                //kickoff renegotiation
+                await room.updateState();
+            }
+        } catch(e) {
+            displayError(e);
+            console.error("Failed to update room state: " + e);
         }
     });
-};
+}
 
+/**
+ * Add track to WebRTC PeerConnection
+ * 
+ * @param {*} pc 
+ * @param {*} stream 
+ * @param {*} track 
+ * @param {*} encodings 
+ */
 const addTrackToPeerConnection = function(pc, stream, track, encodings) {
     pc.addTransceiver(track, {
         direction: "sendonly",
         streams: [stream],
         sendEncodings: encodings ? encodings : [] //passing encoding types for video simulcast tracks
     });
+}
+
+/**
+ * Display error message
+ * 
+ * @param {*} text 
+ */
+const displayError = function(text) {
+    const errField = document.getElementById("errorMsg");
+    errField.style.color = "red";
+    errField.innerText = text;
+}
+
+/**
+ * Entrance modal cancelled, we do not enter to a room
+ */
+const cancel = function() {
+    //hide modal
+    $('#entranceModal').modal('hide');
+    //disable controls
+    cControls.muteInput();
+    // display the error message
+    displayError("Please refresh the page, fill the entrance modal and enter a room to publish or play streams");
 }

package/src/commons/js/config.js

@@ -1,10 +1,16 @@
 const getRoomConfig = function(config) {
     let roomConfig = {
-        url: config.url || "ws://127.0.0.1:8080",
-        roomName: config.name || "ROOM1",
-        pin: config.pin || "1234",
-        nickname: config.nickName || "User1"        
+        url: config.room.url || "ws://127.0.0.1:8080",
+        roomName: config.room.name || "ROOM1",
+        pin: config.room.pin || "1234",
+        nickname: config.room.nickName || "User1"
     };
+    if (config.room.failedProbesThreshold !== undefined) {
+        roomConfig.failedProbesThreshold = config.room.failedProbesThreshold;
+    }
+    if (config.room.pingInterval !== undefined) {
+        roomConfig.pingInterval = config.room.pingInterval;
+    }
     return roomConfig;
 }
 
@@ -50,6 +56,7 @@ const getMedia = async function(track) {
         if (track.constraints) {
             constraints.audio = track.constraints;
         }
+        constraints.audio.stereo = track.channels !== 1
         if (track.channels && track.channels === 2) {
             constraints.audio.echoCancellation = false;
             constraints.audio.googEchoCancellation = false;

package/src/commons/js/display.js

@@ -391,7 +391,7 @@ const initRemoteDisplay = function(options) {
                             qualityDiv.innerText = trackInfo.quality[i];
                             qualityDiv.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
                             qualityDiv.style.color = "red";
-                            qualityDiv.addEventListener('click', function(){
+                            qualityDiv.addEventListener('click', async function(){
                                 console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
                                 if (qualityDiv.style.color === "red") {
                                     return;
@@ -402,7 +402,7 @@ const initRemoteDisplay = function(options) {
                                     }
                                 }
                                 qualityDiv.style.color = "blue";
-                                room.changeQuality(trackInfo.id, trackInfo.quality[i]);
+                                await room.changeQuality(trackInfo.id, trackInfo.quality[i]);
                             });
                             qualitySwitchDisplay.appendChild(qualityDiv);
                         }

package/src/player/player.js

@@ -155,7 +155,7 @@ const init = function() {
 /**
  * connect to server
  */
-const connect = function(state) {
+const connect = async function(state) {
     //create peer connection
     pc = new RTCPeerConnection();
     //get config object for room creation
@@ -167,21 +167,35 @@ const connect = function(state) {
     setStatus(state.statusId(), "");
     setStatus(state.errInfoId(), "");
     // connect to server and create a room if not
-    const session = sfu.createRoom(roomConfig);
-    session.on(constants.SFU_EVENT.CONNECTED, function() {
+    try {
+        const session = await sfu.createRoom(roomConfig);
+        // Set up session ending events
+        session.on(constants.SFU_EVENT.DISCONNECTED, function() {
+            onStopClick(state);
+            state.clear();
+            onDisconnected(state);
+            setStatus(state.statusId(), "DISCONNECTED", "green");
+        }).on(constants.SFU_EVENT.FAILED, function(e) {
+            onStopClick(state);
+            state.clear();
+            onDisconnected(state);
+            setStatus(state.statusId(), "FAILED", "red");
+            if (e.status && e.statusText) {
+                setStatus(state.errInfoId(), e.status + " " + e.statusText, "red");
+            } else if (e.type && e.info) {
+                setStatus(state.errInfoId(), e.type + ": " + e.info, "red");
+            }
+        });
+        // Connected successfully
         state.set(pc, session, session.room());
         onConnected(state);
         setStatus(state.statusId(), "ESTABLISHED", "green");
-    }).on(constants.SFU_EVENT.DISCONNECTED, function() {
-        state.clear();
-        onDisconnected(state);
-        setStatus(state.statusId(), "DISCONNECTED", "green");
-    }).on(constants.SFU_EVENT.FAILED, function(e) {
+    } catch(e) {
         state.clear();
         onDisconnected(state);
         setStatus(state.statusId(), "FAILED", "red");
-        setStatus(state.errInfoId(), e.status + " " + e.statusText, "red");
-    });
+        setStatus(state.errInfoId(), e, "red");
+    }
 }
 
 const onConnected = async function(state) {

package/src/sfu.ts

@@ -1,22 +1,35 @@
-import {Sfu, RoomEvent, SfuEvent, State} from "@flashphoner/sfusdk";
+import {
+    Sfu,
+    RoomEvent,
+    SfuEvent,
+    State
+} from "@flashphoner/sfusdk";
 
-export function createRoom(options: {
+export async function createRoom(options: {
     url: string,
     roomName: string,
     pin: string,
-    nickname: string
+    nickname: string,
+    failedProbesThreshold?: number,
+    pingInterval?: number,
 }) {
-    const sfu = new Sfu();
-    sfu.connect({
-        url: options.url,
-        nickname: options.nickname,
-        logGroup: options.roomName
-    });
-    sfu.createRoom({
-        name: options.roomName,
-        pin: options.pin
-    });
-    return sfu;
+    try {
+        const sfu = new Sfu();
+        await sfu.connect({
+            url: options.url,
+            nickname: options.nickname,
+            logGroup: options.roomName,
+            failedProbesThreshold: options.failedProbesThreshold,
+            pingInterval: options.pingInterval
+        });
+        sfu.createRoom({
+            name: options.roomName,
+            pin: options.pin
+        });
+        return sfu;
+    } catch (e) {
+        throw new Error("Can't connect to websocket URL " + options.url);
+    }
 }
 
 export const constants = {

package/src/two-way-streaming/config.json

@@ -3,7 +3,9 @@
     "url": "ws://127.0.0.1:8080",
     "name": "ROOM1",
     "pin": "1234",
-    "nickName": "User1"
+    "nickName": "User1",
+    "failedProbesThreshold": 5,
+    "pingInterval": 5000
   },
   "media": {
     "audio": {

package/src/two-way-streaming/two-way-streaming.js

@@ -195,7 +195,7 @@ const init = function() {
 /**
  * connect to server
  */
-const connect = function(state) {
+const connect = async function(state) {
     //create peer connection
     let pc = new RTCPeerConnection();
     //get config object for room creation
@@ -207,22 +207,35 @@ const connect = function(state) {
     setStatus(state.statusId(), "");
     setStatus(state.errInfoId(), "");
     // connect to server and create a room if not
-    const session = sfu.createRoom(roomConfig);
-    session.on(constants.SFU_EVENT.CONNECTED, function() {
+    try {
+        const session = await sfu.createRoom(roomConfig);
+        // Set up session ending events
+        session.on(constants.SFU_EVENT.DISCONNECTED, function() {
+            onStopClick(state);
+            state.clear();
+            onDisconnected(state);
+            setStatus(state.statusId(), "DISCONNECTED", "green");
+        }).on(constants.SFU_EVENT.FAILED, function(e) {
+            onStopClick(state);
+            state.clear();
+            onDisconnected(state);
+            setStatus(state.statusId(), "FAILED", "red");
+            if (e.status && e.statusText) {
+                setStatus(state.errInfoId(), e.status + " " + e.statusText, "red");
+            } else if (e.type && e.info) {
+                setStatus(state.errInfoId(), e.type + ": " + e.info, "red");
+            }
+        });
+        // Connected successfully
         state.set(pc, session, session.room());
         onConnected(state);
         setStatus(state.statusId(), "ESTABLISHED", "green");
-    }).on(constants.SFU_EVENT.DISCONNECTED, function() {
-        state.clear();
-        onDisconnected(state);
-        setStatus(state.statusId(), "DISCONNECTED", "green");
-    }).on(constants.SFU_EVENT.FAILED, function(e) {
+    } catch(e) {
         state.clear();
         onDisconnected(state);
         setStatus(state.statusId(), "FAILED", "red");
-        setStatus(state.errInfoId(), e.status + " " + e.statusText, "red");
-    });
-}
+        setStatus(state.errInfoId(), e, "red");
+    }}
 
 const onConnected = function(state) {
     $("#" + state.buttonId()).text("Stop").off('click').click(function () {

package/src/webrtc-abr-player/player.js

@@ -113,7 +113,7 @@ const init = function() {
 /**
  * Connect to server
  */
-const connect = function(state) {
+const connect = async function(state) {
     // Create peer connection
     let pc = new RTCPeerConnection();
     // Create a config to connect to SFU room
@@ -130,22 +130,36 @@ const connect = function(state) {
     // Clean state display items
     setStatus("playStatus", "");
     setStatus("playErrorInfo", "");
-    // Connect to the server (room should already exist)
-    const session = sfu.createRoom(roomConfig);
-    session.on(constants.SFU_EVENT.CONNECTED, function() {
+    try {
+        // Connect to the server (room should already exist)
+        const session = await sfu.createRoom(roomConfig);
+        // Set up session ending events
+        session.on(constants.SFU_EVENT.DISCONNECTED, function() {
+            onStopClick(state);
+            state.clear();
+            onDisconnected(state);
+            setStatus("playStatus", "DISCONNECTED", "green");
+        }).on(constants.SFU_EVENT.FAILED, function(e) {
+            onStopClick(state);
+            state.clear();
+            onDisconnected(state);
+            setStatus("playStatus", "FAILED", "red");
+            if (e.status && e.statusText) {
+                setStatus("playErrorInfo", e.status + " " + e.statusText, "red");
+            } else if (e.type && e.info) {
+                setStatus("playErrorInfo", e.type + ": " + e.info, "red");
+            }
+        });
+        // Connected successfully
         state.set(pc, session, session.room());
         onConnected(state);
         setStatus("playStatus", "CONNECTING...", "black");
-    }).on(constants.SFU_EVENT.DISCONNECTED, function() {
-        state.clear();
-        onDisconnected(state);
-        setStatus("playStatus", "DISCONNECTED", "green");
-    }).on(constants.SFU_EVENT.FAILED, function(e) {
+    } catch(e) {
         state.clear();
         onDisconnected(state);
         setStatus("playStatus", "FAILED", "red");
-        setStatus("playErrorInfo", e.status + " " + e.statusText, "red");
-    });
+        setStatus("playErrorInfo", e, "red");
+    }
 }
 
 const onConnected = async function(state) {