@flashphoner/sfusdk-examples 2.0.185 → 2.0.188

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/sfusdk-examples",
-  "version": "2.0.185",
+  "version": "2.0.188",
   "description": "Official Flashphoner WebCallServer SFU SDK usage examples",
   "main": "dist/sfu.js",
   "types": "src/sfu.ts",

package/src/commons/js/config.js

@@ -32,7 +32,8 @@ const getStreams = async function(tracks) {
             streams.push({
                 stream: stream,
                 encodings: track.encodings,
-                source: track.source
+                source: track.source,
+                type: track.type
             });
         }
     }

package/src/commons/js/display.js

@@ -29,15 +29,25 @@ const initLocalDisplay = function(localDisplayElement){
                 }
             }
         }
-    };
+    }
 
-    const add = function(id, name, stream) {
+    const onMuteClick = function(button, stream, type) {
+        if (stream.getAudioTracks().length > 0) {
+            stream.getAudioTracks()[0].enabled = !(stream.getAudioTracks()[0].enabled);
+            button.innerHTML = audioStateText(stream) + " " + type;
+        }
+    }
+
+    const add = function(id, name, stream, type) {
         if (stream.getAudioTracks().length > 0) {
             let videoElement = getAudioContainer();
             if (videoElement) {
                 let track = stream.getAudioTracks()[0];
                 videoElement.video.srcObject.addTrack(track);
-                videoElement.audioStateDisplay.innerHTML = audioStateText(stream);
+                videoElement.audioStateDisplay.innerHTML = audioStateText(stream) + " " + type;
+                videoElement.audioStateDisplay.addEventListener("click", function() {
+                    onMuteClick(videoElement.audioStateDisplay, stream, type);
+                });
                 track.addEventListener("ended", function() {
                     videoElement.video.srcObject.removeTrack(track);
                     videoElement.audioStateDisplay.innerHTML = "No audio";
@@ -53,31 +63,15 @@ const initLocalDisplay = function(localDisplayElement){
             }
         }
 
-        const coreDisplay = document.createElement('div');
-        coreDisplay.setAttribute("class","text-center");
-        coreDisplay.setAttribute("style","width: auto; height: auto;");
+        const coreDisplay = createContainer(null);
         coreDisplay.id = stream.id;
-        const publisherNameDisplay = document.createElement("div");
-        publisherNameDisplay.innerHTML = "Name: " + name;
-        publisherNameDisplay.setAttribute("class","text-center");
-        publisherNameDisplay.setAttribute("style","width: auto; height: auto;");
-        coreDisplay.appendChild(publisherNameDisplay);
+        const publisherNameDisplay = createInfoDisplay(coreDisplay, name + " " + type);
 
         const audioStateDisplay = document.createElement("button");
-        audioStateDisplay.innerHTML = audioStateText(stream);
-        audioStateDisplay.addEventListener('click', function(){
-            if (stream.getAudioTracks().length > 0) {
-                stream.getAudioTracks()[0].enabled = !(stream.getAudioTracks()[0].enabled);
-                audioStateDisplay.innerHTML = audioStateText(stream);
-            }
-        });
         coreDisplay.appendChild(audioStateDisplay);
 
-        const streamDisplay = document.createElement('div');
+        const streamDisplay = createContainer(coreDisplay);
         streamDisplay.id = "stream-" + id;
-        streamDisplay.setAttribute("class","text-center");
-        streamDisplay.setAttribute("style","width: auto; height: auto;");
-        coreDisplay.appendChild(streamDisplay);
         const video = document.createElement("video");
         video.muted = true;
         if(Browser().isSafariWebRTC()) {
@@ -101,10 +95,21 @@ const initLocalDisplay = function(localDisplayElement){
                 removeLocalDisplay(id);
             });
         });
-        video.addEventListener('resize', function (event) {
-            publisherNameDisplay.innerHTML = "Name: " + name + "<br/>Max.resolution: " + video.videoWidth + "x" + video.videoHeight;
-            resizeVideo(event.target);
-        });
+        if (stream.getVideoTracks().length > 0) {
+            // Resize only if video displayed
+            video.addEventListener('resize', function (event) {
+                publisherNameDisplay.innerHTML = name + " " + type + " " + video.videoWidth + "x" + video.videoHeight;
+                resizeVideo(event.target);
+            });
+        } else {
+            // Hide audio only container
+            hideItem(streamDisplay);
+            // Set up mute button for audio only stream
+            audioStateDisplay.innerHTML = audioStateText(stream) + " " + type;
+            audioStateDisplay.addEventListener("click", function() {
+                onMuteClick(audioStateDisplay, stream, type);
+            });
+        }
         localDisplays[id] = coreDisplay;
         localDisplayDiv.appendChild(coreDisplay);
         return coreDisplay;
@@ -150,7 +155,7 @@ const initRemoteDisplay = function(options) {
     let mainDiv = options.div;
     let room = options.room;
     let peerConnection = options.peerConnection;
-    let displayOptions = options.displayOptions || {publisher: true, quality: true};
+    let displayOptions = options.displayOptions || {publisher: true, quality: true, type: true};
 
     room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
         console.log("Received ADD_TRACKS");
@@ -180,6 +185,7 @@ const initRemoteDisplay = function(options) {
                         continue;
                     }
                     display.audioMid = pTrack.mid;
+                    display.setTrackInfo(pTrack);
                     createDisplay = false;
                     break;
                 }
@@ -194,6 +200,7 @@ const initRemoteDisplay = function(options) {
                 display.setTrackInfo(pTrack);
             } else if (pTrack.type === "AUDIO") {
                 display.audioMid = pTrack.mid;
+                display.setTrackInfo(pTrack);
             }
         }
     }).on(constants.SFU_ROOM_EVENT.REMOVE_TRACKS, function(e) {
@@ -264,35 +271,34 @@ const initRemoteDisplay = function(options) {
         mainDiv.appendChild(cell);
         let publisherNameDisplay;
         let currentQualityDisplay;
+        let videoTypeDisplay;
         if (displayOptions.publisher) {
-            publisherNameDisplay = document.createElement("div");
-            publisherNameDisplay.innerHTML = "Published by: " + name;
-            publisherNameDisplay.setAttribute("style","width:auto; height:30px;");
-            publisherNameDisplay.setAttribute("class","text-center");
-            cell.appendChild(publisherNameDisplay);
+            publisherNameDisplay = createInfoDisplay(cell, "Published by: " + name);
         }
         if (displayOptions.quality) {
-            currentQualityDisplay = document.createElement("div");
-            currentQualityDisplay.innerHTML = "";
-            currentQualityDisplay.setAttribute("style","width:auto; height:30px;");
-            currentQualityDisplay.setAttribute("class","text-center");
-            cell.appendChild(currentQualityDisplay);
+            currentQualityDisplay = createInfoDisplay(cell, "");
         }
-        const qualitySwitchDisplay = document.createElement("div");
-        qualitySwitchDisplay.setAttribute("style","width:auto; height:30px;");
-        qualitySwitchDisplay.setAttribute("class","text-center");
-        cell.appendChild(qualitySwitchDisplay);
+        if (displayOptions.type) {
+            videoTypeDisplay = createInfoDisplay(cell, "");
+        }
+        const qualitySwitchDisplay = createInfoDisplay(cell, "");
 
         let qualityDivs = [];
+        let contentType = "";
+
+        const rootDisplay = createContainer(cell);
+        const streamDisplay = createContainer(rootDisplay);
+        const audioDisplay = createContainer(rootDisplay);
+        const audioTypeDisplay = createInfoDisplay(audioDisplay);
+        const audioTrackDisplay = createContainer(audioDisplay);
+        const audioStateButton = AudioStateButton();
 
-        const rootDisplay = document.createElement("div");
-        rootDisplay.setAttribute("style","width:auto; height:auto;");
-        rootDisplay.setAttribute("class","text-center");
-        cell.appendChild(rootDisplay);
-        const streamDisplay = document.createElement("div");
-        streamDisplay.setAttribute("style","width:auto; height:auto;");
-        streamDisplay.setAttribute("class","text-center");
-        rootDisplay.appendChild(streamDisplay);
+        hideItem(streamDisplay);
+        hideItem(audioDisplay);
+        hideItem(publisherNameDisplay);
+        hideItem(currentQualityDisplay);
+        hideItem(videoTypeDisplay);
+        hideItem(qualitySwitchDisplay);
 
         let audio = null;
         let video = null;
@@ -316,6 +322,7 @@ const initRemoteDisplay = function(options) {
                     this.audioMid = undefined;
                     return;
                 }
+                showItem(audioDisplay);
                 audio = document.createElement("audio");
                 audio.controls = "controls";
                 audio.muted = true;
@@ -327,7 +334,8 @@ const initRemoteDisplay = function(options) {
                 } else {
                     this.setEventHandlers(audio);
                 }
-                cell.appendChild(audio);
+                audioTrackDisplay.appendChild(audio);
+                audioStateButton.makeButton(audioTypeDisplay, audio);
                 audio.srcObject = stream;
                 audio.onloadedmetadata = function (e) {
                     audio.play().then(function() {
@@ -335,6 +343,7 @@ const initRemoteDisplay = function(options) {
                             console.warn("Audio track should be manually unmuted in iOS Safari");
                         } else {
                             audio.muted = false;
+                            audioStateButton.setButtonState();
                         }
                     });
                 };
@@ -356,6 +365,7 @@ const initRemoteDisplay = function(options) {
                     qualityDivs = [];
                     return;
                 }
+                showItem(streamDisplay);
                 video = document.createElement("video");
                 video.controls = "controls";
                 video.muted = true;
@@ -372,31 +382,47 @@ const initRemoteDisplay = function(options) {
                 this.setResizeHandler(video);
             },
             setTrackInfo: function(trackInfo) {
-                if (trackInfo && trackInfo.quality) {
-                    for (let i = 0; i < trackInfo.quality.length; i++) {
-                        const qualityDiv = document.createElement("button");
-                        qualityDivs.push(qualityDiv);
-                        qualityDiv.innerText = trackInfo.quality[i];
-                        qualityDiv.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
-                        qualityDiv.style.color = "red";
-                        qualityDiv.addEventListener('click', function(){
-                            console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
-                            if (qualityDiv.style.color === "red") {
-                                return;
-                            }
-                            for (let c = 0; c < qualityDivs.length; c++) {
-                                if (qualityDivs[c].style.color !== "red") {
-                                    qualityDivs[c].style.color = "gray";
+                if (trackInfo) { 
+                    if (trackInfo.quality) {
+                        showItem(qualitySwitchDisplay);
+                        for (let i = 0; i < trackInfo.quality.length; i++) {
+                            const qualityDiv = document.createElement("button");
+                            qualityDivs.push(qualityDiv);
+                            qualityDiv.innerText = trackInfo.quality[i];
+                            qualityDiv.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                            qualityDiv.style.color = "red";
+                            qualityDiv.addEventListener('click', function(){
+                                console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
+                                if (qualityDiv.style.color === "red") {
+                                    return;
                                 }
-                            }
-                            qualityDiv.style.color = "blue";
-                            room.changeQuality(trackInfo.id, trackInfo.quality[i]);
-                        });
-                        qualitySwitchDisplay.appendChild(qualityDiv);
+                                for (let c = 0; c < qualityDivs.length; c++) {
+                                    if (qualityDivs[c].style.color !== "red") {
+                                        qualityDivs[c].style.color = "gray";
+                                    }
+                                }
+                                qualityDiv.style.color = "blue";
+                                room.changeQuality(trackInfo.id, trackInfo.quality[i]);
+                            });
+                            qualitySwitchDisplay.appendChild(qualityDiv);
+                        }
+                    } else {
+                        hideItem(qualitySwitchDisplay);
+                    }
+                    if (trackInfo.type) {
+                        contentType = trackInfo.contentType || "";
+                        if (trackInfo.type == "VIDEO" && displayOptions.type && contentType !== "") {
+                            showItem(videoTypeDisplay);
+                            videoTypeDisplay.innerHTML = contentType;
+                        }
+                        if (trackInfo.type == "AUDIO") {
+                            audioStateButton.setContentType(contentType);
+                        }
                     }
                 }
             },
             updateQualityInfo: function(videoQuality) {
+                showItem(qualitySwitchDisplay);
                 for (const qualityInfo of videoQuality) {
                     for (const qualityDiv of qualityDivs) {
                         if (qualityDiv.innerText === qualityInfo.quality){
@@ -416,9 +442,11 @@ const initRemoteDisplay = function(options) {
             setResizeHandler: function(video) {
                 video.addEventListener("resize", function (event) {
                     if (displayOptions.publisher) {
+                        showItem(publisherNameDisplay);
                         publisherNameDisplay.innerHTML = "Published by: " + name;
                     }
                     if (displayOptions.quality) {
+                        showItem(currentQualityDisplay);
                         currentQualityDisplay.innerHTML = video.videoWidth + "x" + video.videoHeight;
                     }
                     resizeVideo(event.target);
@@ -506,6 +534,52 @@ const initRemoteDisplay = function(options) {
         }
     }
 
+    const AudioStateButton = function() {
+        let button = {
+            audio: null,
+            contentType: "",
+            displayButton: null,
+            makeButton: function(parent, audio) {
+                button.setAudio(audio);
+                button.displayButton = document.createElement("button");
+                button.displayButton.innerHTML = button.audioState();
+                button.displayButton.addEventListener("click", function() {
+                    button.audio.muted = !button.audio.muted;
+                    button.displayButton.innerHTML = button.audioState();
+                });
+                parent.appendChild(button.displayButton);
+
+            },
+            setAudio: function(audio) {
+                button.audio = audio;
+            },
+            setButtonState: function() {
+                if (button.displayButton) {
+                    button.displayButton.innerHTML = button.audioState();
+                }
+            },
+            setContentType: function(type) {
+                button.contentType = type;
+                button.setButtonState();
+            },
+            audioState: function() {
+                let state = "";
+                if (button.audio) {
+                    if (button.audio.muted) {
+                        state = "Unmute";
+                    } else {
+                        state = "Mute";
+                    }
+                    if (button.contentType) {
+                        state = state + " " + button.contentType;
+                    }
+                }
+                return (state);
+            }
+        };
+        return button;
+    }
+
     return {
         stop: stop
     }
@@ -557,4 +631,40 @@ const downScaleToFitSize = function(videoWidth, videoHeight, dstWidth, dstHeight
         w: newWidth,
         h: newHeight
     };
-}
+}
+
+const createInfoDisplay = function(parent, text) {
+    const div = document.createElement("div");
+    if (text) {
+        div.innerHTML = text;
+    }
+    div.setAttribute("style","width:auto; height:30px;");
+    div.setAttribute("class","text-center");
+    if (parent) {
+        parent.appendChild(div);
+    }
+    return div;
+}
+
+const createContainer = function(parent) {
+    const div = document.createElement("div");
+    div.setAttribute("style","width:auto; height:auto;");
+    div.setAttribute("class","text-center");
+    if (parent) {
+        parent.appendChild(div);
+    }
+    return div;
+}
+
+// Helper functions to display/hide an element
+const showItem = function(tag) {
+    if (tag) {
+        tag.style.display = "block";
+    }
+}
+
+const hideItem = function(tag) {
+    if (tag) {
+        tag.style.display = "none";
+    }
+}

package/src/commons/js/util.js

@@ -110,6 +110,7 @@ const createUUID = function (length) {
     return uuid.substring(0, length);
 }
 
+// Browser detection
 const Browser = function() {
     const isIE = function () {
         return /*@cc_on!@*/false || !!document.documentMode;
@@ -176,7 +177,7 @@ const Browser = function() {
     }
 }
 
-
+// A workaround to play audio automatically in Safari
 const playFirstSound = function (parent, preloader) {
     return new Promise(function (resolve, reject) {
         let audio = document.createElement("audio");
@@ -199,4 +200,4 @@ const playFirstSound = function (parent, preloader) {
         }
         resolve();
     });
-}
+}

package/src/player/player.js

@@ -5,7 +5,9 @@ let remoteDisplay;
 let playState;
 const PLAY = "play";
 const STOP = "stop";
-const PRELOADER_URL="../commons/media/silence.mp3"
+const PRELOADER_URL="../commons/media/silence.mp3";
+const MAX_AWAIT_MS=5000;
+
 
 /**
  * Default publishing config
@@ -28,15 +30,31 @@ const CurrentState = function(prefix) {
         pc: null,
         session: null,
         room: null,
+        roomEnded: false,
+        timeout: null,
+        timer: null,
+        promise: null,
         set: function(pc, session, room) {
             state.pc = pc;
             state.session = session;
             state.room = room;
+            state.roomEnded = false;
+            state.timeout = null;
+            state.timer = null;
+            state.promise = null;
         },
         clear: function() {
+            state.stopWaiting();
             state.room = null;
             state.session = null;
             state.pc = null;
+            state.roomEnded = false;
+            state.timeout = null;
+            state.timer = null;
+            state.promise = null;
+        },
+        setRoomEnded: function() {
+            state.roomEnded = true;
         },
         buttonId: function() {
             return state.prefix + "Btn";
@@ -58,6 +76,52 @@ const CurrentState = function(prefix) {
         },
         is: function(value) {
             return (prefix === value);
+        },
+        isActive: function() {
+            return (state.room && !state.roomEnded && state.pc);
+        },
+        isConnected: function() {
+            return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+        },
+        isRoomEnded: function() {
+            return state.roomEnded;
+        },
+        waitFor: async function(promise, ms) {
+            // Create a promise that rejects in <ms> milliseconds
+            state.promise = promise;
+            state.timeout = new Promise((resolve, reject) => {
+                state.resolve = resolve;
+                state.timer = setTimeout(() => {
+                    clearTimeout(state.timer);
+                    state.timer = null;
+                    state.promise = null;
+                    state.timeout = null;
+                    reject('Operation timed out in '+ ms + ' ms.')
+                }, ms)
+            });
+
+            // Returns a race between our timeout and the passed in promise
+            Promise.race([
+                state.promise,
+                state.timeout
+            ]).then(() => {
+                state.stopWaiting();
+            }).catch((e) => {
+                setStatus(state.errInfoId(), e, "red");
+            });
+        },
+        stopWaiting: function() {
+            if (state.timer) {
+                clearTimeout(state.timer);
+                state.timer = null;
+            }
+            if (state.timeout) {
+                state.resolve();
+                state.timeout = null;
+            }
+            if (state.promise) {
+                state.promise = null;
+            }
         }
     };
     return state;
@@ -120,20 +184,38 @@ const connect = function(state) {
     });
 }
 
-const onConnected = function(state) {
+const onConnected = async function(state) {
     $("#" + state.buttonId()).text("Stop").off('click').click(function () {
         onStopClick(state);
-    }).prop('disabled', false);
+    });
     $('#url').prop('disabled', true);
     $("#roomName").prop('disabled', true);
     $("#" + state.inputId()).prop('disabled', true);
     // Add errors displaying
     state.room.on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
         setStatus(state.errInfoId(), e, "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
     }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
         setStatus(state.errInfoId(), e.operation + " failed: " + e.error, "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
+    }).on(constants.SFU_ROOM_EVENT.ENDED, function (e) {
+        setStatus(state.errInfoId(), "Room "+state.room.name()+" has ended", "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
+    }).on(constants.SFU_ROOM_EVENT.DROPPED, function (e) {
+        setStatus(state.errInfoId(), "Dropped from the room "+state.room.name()+" due to network issues", "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
     });
-    playStreams(state);
+    await playStreams(state);
+    // Enable button after starting playback #WCS-3635
+    $("#" + state.buttonId()).prop('disabled', false);
 }
 
 const onDisconnected = function(state) {
@@ -158,20 +240,29 @@ const onStartClick = function(state) {
     }
 }
 
-const onStopClick = function(state) {
+const onStopClick = async function(state) {
     $("#" + state.buttonId()).prop('disabled', true);
     stopStreams(state);
-    state.session.disconnect();
+    if (state.isConnected()) {
+        state.waitFor(state.session.disconnect(), MAX_AWAIT_MS);
+    }
 }
 
-const playStreams = function(state) {
+const playStreams = async function(state) {
     //create remote display item to show remote streams
-    remoteDisplay = initRemoteDisplay({
-        div: document.getElementById("remoteVideo"),
-        room: state.room,
-        peerConnection: state.pc
-    });
-    state.room.join(state.pc);
+    try {
+        remoteDisplay = initRemoteDisplay({
+            div: document.getElementById("remoteVideo"),
+            room: state.room,
+            peerConnection: state.pc
+        });
+        // Start WebRTC negotiation
+        state.waitFor(state.room.join(state.pc), MAX_AWAIT_MS);
+    } catch(e) {
+        console.error("Failed to play streams: " + e);
+        setStatus(state.errInfoId(), e.name, "red");
+        onStopClick(state);
+    }
 }
 
 const stopStreams = function(state) {

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

@@ -9,7 +9,8 @@
     "audio": {
       "tracks": [{
         "source": "mic",
-        "channels": 2
+        "channels": 2,
+        "type": "mic1"
       }]
     },
     "video": {
@@ -26,7 +27,8 @@
             { "rid": "720p", "active": true, "maxBitrate": 900000 },
             { "rid": "360p", "active": true, "maxBitrate": 500000, "scaleResolutionDownBy": 2 },
             { "rid": "180p", "active": true, "maxBitrate": 200000, "scaleResolutionDownBy": 4 }
-          ]
+          ],
+          "type": "cam1"
         }        
       ]
     }

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

@@ -8,7 +8,8 @@ let playState;
 const PUBLISH = "publish";
 const PLAY = "play";
 const STOP = "stop";
-const PRELOADER_URL="../commons/media/silence.mp3"
+const PRELOADER_URL="../commons/media/silence.mp3";
+const MAX_AWAIT_MS=5000;
 
 
 /**
@@ -56,36 +57,32 @@ const CurrentState = function(prefix) {
         pc: null,
         session: null,
         room: null,
+        roomEnded: false,
+        timeout: null,
         timer: null,
+        promise: null,
+        starting: false,
         set: function(pc, session, room) {
             state.pc = pc;
             state.session = session;
             state.room = room;
+            state.roomEnded = false;
+            state.timeout = null;
+            state.timer = null;
+            state.promise = null;
         },
         clear: function() {
             state.stopWaiting();
             state.room = null;
             state.session = null;
             state.pc = null;
+            state.roomEnded = false;
+            state.timeout = null;
+            state.timer = null;
+            state.promise = null;
         },
-        waitFor: function(div, timeout) {
-            state.stopWaiting();
-            state.timer = setTimeout(function () {
-                if (div.innerHTML !== "") {
-                    // Enable stop button
-                    $("#" + state.buttonId()).prop('disabled', false);
-                }
-                else if (state.isConnected()) {
-                    setStatus(state.errInfoId(), "No media capturing started in " + timeout + " ms, stopping", "red");
-                    onStopClick(state);
-                }
-            }, timeout);        
-        },
-        stopWaiting: function() {
-            if (state.timer) {
-                clearTimeout(state.timer);
-                state.timer = null;                
-            }
+        setRoomEnded: function() {
+            state.roomEnded = true;
         },
         buttonId: function() {
             return state.prefix + "Btn";
@@ -109,10 +106,56 @@ const CurrentState = function(prefix) {
             return (prefix === value);
         },
         isActive: function() {
-            return (state.room && state.pc);
+            return (state.room && !state.roomEnded && state.pc);
         },
         isConnected: function() {
             return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+        },
+        isRoomEnded: function() {
+            return state.roomEnded;
+        },
+        waitFor: async function(promise, ms) {
+            // Create a promise that rejects in <ms> milliseconds
+            state.promise = promise;
+            state.timeout = new Promise((resolve, reject) => {
+                state.resolve = resolve;
+                state.timer = setTimeout(() => {
+                    clearTimeout(state.timer);
+                    state.timer = null;
+                    state.promise = null;
+                    state.timeout = null;
+                    reject('Operation timed out in '+ ms + ' ms.')
+                }, ms)
+            });
+
+            // Returns a race between our timeout and the passed in promise
+            Promise.race([
+                    state.promise,
+                    state.timeout
+            ]).then(() => {
+                state.stopWaiting();
+            }).catch((e) => {
+                setStatus(state.errInfoId(), e, "red");
+            });
+        },
+        stopWaiting: function() {
+            if (state.timer) {
+                clearTimeout(state.timer);
+                state.timer = null;
+            }
+            if (state.timeout) {
+                state.resolve();
+                state.timeout = null;
+            }
+            if (state.promise) {
+                state.promise = null;
+            }
+        },
+        setStarting: function(value) {
+            state.starting = value;
+        },
+        isStarting: function() {
+            return state.starting;
         }
     };
     return state;
@@ -154,7 +197,7 @@ const init = function() {
  */
 const connect = function(state) {
     //create peer connection
-    pc = new RTCPeerConnection();
+    let pc = new RTCPeerConnection();
     //get config object for room creation
     const roomConfig = getRoomConfig(mainConfig);
     roomConfig.url = $("#url").val();
@@ -191,10 +234,24 @@ const onConnected = function(state) {
     // Add errors displaying
     state.room.on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
         setStatus(state.errInfoId(), e, "red");
-        stopStreaming(state);
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
     }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
         setStatus(state.errInfoId(), e.operation + " failed: " + e.error, "red");
-        stopStreaming(state);
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
+    }).on(constants.SFU_ROOM_EVENT.ENDED, function () {
+        setStatus(state.errInfoId(), "Room "+state.room.name()+" has ended", "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
+    }).on(constants.SFU_ROOM_EVENT.DROPPED, function () {
+        setStatus(state.errInfoId(), "Dropped from the room "+state.room.name()+" due to network issues", "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
     });
     startStreaming(state);
 }
@@ -204,18 +261,27 @@ const onDisconnected = function(state) {
         onStartClick(state);
     }).prop('disabled', false);
     $("#" + state.inputId()).prop('disabled', false);
-    // Check if other session is active
-    if ((state.is(PUBLISH) && playState.session)
-       || (state.is(PLAY) && publishState.session)) {
-        return;
+    // Enable other session buttons
+    let otherState = getOtherState(state);
+    if (!otherState.session) {
+        $("#" + otherState.buttonId()).prop('disabled', false);
+        $("#" + otherState.inputId()).prop('disabled', false);
+        $('#url').prop('disabled', false);
+        $("#roomName").prop('disabled', false);
     }
-    $('#url').prop('disabled', false);
-    $("#roomName").prop('disabled', false);
 }
 
 const onStartClick = function(state) {
-    if (validateForm("connectionForm") && validateForm(state.formId())) {
+    if (validateForm("connectionForm", state.errInfoId())
+      && validateForm(state.formId(), state.errInfoId())
+       && validateName(state, state.errInfoId())) {
+        state.setStarting(true);
+        let otherState = getOtherState(state);
         $("#" + state.buttonId()).prop('disabled', true);
+        // Disable other session button to prevent a simultaneous connections
+        if (!otherState.isStarting()) {
+            $("#" + otherState.buttonId()).prop('disabled', true);
+        }
         if (state.is(PLAY) && Browser().isSafariWebRTC()) {
             playFirstSound(document.getElementById("main"), PRELOADER_URL).then(function () {
                 connect(state);
@@ -227,28 +293,35 @@ const onStartClick = function(state) {
 }
 
 const onStopClick = function(state) {
+    state.setStarting(false);
     $("#" + state.buttonId()).prop('disabled', true);
     stopStreaming(state);
-    if (state.isConnected()) {
-        state.session.disconnect();
-    }
 }
 
-const startStreaming = function(state) {
+const startStreaming = async function(state) {
     if (state.is(PUBLISH)) {
-        publishStreams(state);
+        await publishStreams(state);
     } else if (state.is(PLAY)) {
-        playStreams(state);
+        await playStreams(state);
+    }
+    state.setStarting(false);
+    // Enable session buttons
+    let otherState = getOtherState(state);
+    $("#" + state.buttonId()).prop('disabled', false);
+    if (!otherState.isStarting()) {
+        $("#" + otherState.buttonId()).prop('disabled', false);
     }
 }
 
-const stopStreaming = function(state) {
-    state.stopWaiting();
+const stopStreaming = async function(state) {
     if (state.is(PUBLISH)) {
         unPublishStreams(state);
     } else if (state.is(PLAY)) {
         stopStreams(state);
     }
+    if (state.isConnected()) {
+        state.waitFor(state.session.disconnect(), MAX_AWAIT_MS);
+    }
 }
 
 const publishStreams = async function(state) {
@@ -265,28 +338,23 @@ const publishStreams = async function(state) {
                 let config = {};
                 //add our local streams to the room (to PeerConnection)
                 streams.forEach(function (s) {
+                    let contentType = s.type || s.source;
                     //add local stream to local display
-                    localDisplay.add(s.stream.id, $("#" + state.inputId()).val(), s.stream);
+                    localDisplay.add(s.stream.id, $("#" + state.inputId()).val(), s.stream, contentType);
                     //add each track to PeerConnection
                     s.stream.getTracks().forEach((track) => {
-                        if (s.source === "screen") {
-                            config[track.id] = s.source;
-                        }
+                        config[track.id] = contentType;
                         addTrackToPeerConnection(state.pc, s.stream, track, s.encodings);
                         subscribeTrackToEndedEvent(state.room, track, state.pc);
                     });
                 });
-                state.room.join(state.pc, null, config);
-                // TODO: Use room state or promises to detect if publishing started to enable stop button
-                state.waitFor(document.getElementById("localVideo"), 3000);
+                //start WebRTC negotiation
+                state.waitFor(state.room.join(state.pc, null, config), MAX_AWAIT_MS);
             }
         } catch(e) {
             console.error("Failed to capture streams: " + e);
             setStatus(state.errInfoId(), e.name, "red");
-            state.stopWaiting();
-            if (state.isConnected()) { 
-                onStopClick(state);
-            }
+            onStopClick(state);
         }
     }
 }
@@ -297,17 +365,23 @@ const unPublishStreams = function(state) {
     }
 }
 
-const playStreams = function(state) {
+const playStreams = async function(state) {
     if (state.isConnected() && state.isActive()) {
-        //create remote display item to show remote streams
-        remoteDisplay = initRemoteDisplay({
-            div: document.getElementById("remoteVideo"),
-            room: state.room,
-            peerConnection: state.pc
-        });
-        state.room.join(state.pc);
+        try {
+            //create remote display item to show remote streams
+            remoteDisplay = initRemoteDisplay({
+                div: document.getElementById("remoteVideo"),
+                room: state.room,
+                peerConnection: state.pc
+            });
+            //start WebRTC negotiation
+            state.waitFor(state.room.join(state.pc), MAX_AWAIT_MS);
+        } catch(e) {
+            console.error("Failed to play streams: " + e);
+            setStatus(state.errInfoId(), e.name, "red");
+            onStopClick(state);
+        }
     }
-    $("#" + state.buttonId()).prop('disabled', false);
 }
 
 const stopStreams = function(state) {
@@ -351,14 +425,17 @@ const setStatus = function (status, text, color) {
     field.innerText = text;
 }
 
-const validateForm = function (formId) {
-    var valid = true;
+const validateForm = function (formId, errorInfoId) {
+    let valid = true;
+    // Validate empty fields
     $('#' + formId + ' :text').each(function () {
         if (!$(this).val()) {
             highlightInput($(this));
             valid = false;
+            setStatus(errorInfoId, "Fields cannot be empty", "red");
         } else {
             removeHighlight($(this));
+            setStatus(errorInfoId, "");
         }
     });
     return valid;
@@ -372,7 +449,29 @@ const validateForm = function (formId) {
     }
 }
 
+const validateName = function (state) {
+    let valid = true;
+    // Validate other nickname
+    let nameToCheck = $("#" + state.inputId()).val();
+    let otherState = getOtherState(state);
+
+    if (nameToCheck === $("#" + otherState.inputId()).val()) {
+        if (otherState.isActive() || otherState.isConnected()) {
+            valid = false;
+            setStatus(state.errInfoId(), "Cannot connect with the same name", "red");
+        }
+    }
+    return valid;
+}
+
 const buttonText = function (string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+const getOtherState = function(state) {
+    if (state.is(PUBLISH)) {
+        return playState;
+    } else if (state.is(PLAY)) {
+        return publishState;
+    }
+}

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

@@ -1,6 +1,8 @@
 const constants = SFU.constants;
 const sfu = SFU;
-const PRELOADER_URL="../commons/media/silence.mp3"
+const PRELOADER_URL="../commons/media/silence.mp3";
+const MAX_AWAIT_MS=5000;
+
 
 /**
  * Current state object
@@ -11,15 +13,40 @@ const CurrentState = function() {
         session: null,
         room: null,
         remoteDisplay: null,
+        roomEnded: false,
+        timeout: null,
+        timer: null,
+        promise: null,
         set: function(pc, session, room) {
             state.pc = pc;
             state.session = session;
             state.room = room;
+            state.roomEnded = false;
+            state.timeout = null;
+            state.timer = null;
+            state.promise = null;
         },
         clear: function() {
+            state.stopWaiting();
             state.room = null;
             state.session = null;
             state.pc = null;
+            state.roomEnded = false;
+            state.timeout = null;
+            state.timer = null;
+            state.promise = null;
+        },
+        setRoomEnded: function() {
+            state.roomEnded = true;
+        },
+        isRoomEnded: function() {
+            return state.roomEnded;
+        },
+        isConnected: function() {
+            return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+        },
+        isActive: function() {
+            return (state.room && !state.roomEnded && state.pc);
         },
         setDisplay: function(display) {
             state.remoteDisplay = display;
@@ -29,7 +56,45 @@ const CurrentState = function() {
                 state.remoteDisplay.stop();
                 state.remoteDisplay = null;
             }
+        },
+        waitFor: async function(promise, ms) {
+            // Create a promise that rejects in <ms> milliseconds
+            state.promise = promise;
+            state.timeout = new Promise((resolve, reject) => {
+                state.resolve = resolve;
+                state.timer = setTimeout(() => {
+                    clearTimeout(state.timer);
+                    state.timer = null;
+                    state.promise = null;
+                    state.timeout = null;
+                    reject('Operation timed out in '+ ms + ' ms.')
+                }, ms)
+            });
+
+            // Returns a race between our timeout and the passed in promise
+            Promise.race([
+                state.promise,
+                state.timeout
+            ]).then(() => {
+                state.stopWaiting();
+            }).catch((e) => {
+                setStatus("playStatus", e, "red");
+            });
+        },
+        stopWaiting: function() {
+            if (state.timer) {
+                clearTimeout(state.timer);
+                state.timer = null;
+            }
+            if (state.timeout) {
+                state.resolve();
+                state.timeout = null;
+            }
+            if (state.promise) {
+                state.promise = null;
+            }
         }
+
     };
     return state;
 }
@@ -83,10 +148,10 @@ const connect = function(state) {
     });
 }
 
-const onConnected = function(state) {
+const onConnected = async function(state) {
     $("#playBtn").text("Stop").off('click').click(function () {
         onStopClick(state);
-    }).prop('disabled', false);
+    });
     $('#url').prop('disabled', true);
     $("#streamName").prop('disabled', true);
     // Add room event handling
@@ -106,12 +171,25 @@ const onConnected = function(state) {
     }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
         // Display the operation failed
         setStatus("playErrorInfo", e.operation + " failed: " + e.error, "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
     }).on(constants.SFU_ROOM_EVENT.ENDED, function () {
         // Publishing is stopped, dispose playback and close connection
         setStatus("playErrorInfo", "ABR stream is stopped", "red");
+        state.setRoomEnded();
+        state.stopWaiting();
+        onStopClick(state);
+    }).on(constants.SFU_ROOM_EVENT.DROPPED, function () {
+        // Client dropped from the room, dispose playback and close connection
+        setStatus("playErrorInfo", "Playback is dropped due to network issues", "red");
+        state.setRoomEnded();
+        state.stopWaiting();
         onStopClick(state);
     });
-    playStreams(state);
+    await playStreams(state);
+    // Enable button after starting playback #WCS-3635
+    $("#playBtn").prop('disabled', false);
 }
 
 const onDisconnected = function(state) {
@@ -136,13 +214,15 @@ const onStartClick = function(state) {
     }
 }
 
-const onStopClick = function(state) {
+const onStopClick = async function(state) {
     $("#playBtn").prop('disabled', true);
     stopStreams(state);
-    state.session.disconnect();
+    if (state.isConnected()) {
+        state.waitFor(state.session.disconnect(), MAX_AWAIT_MS);
+    }
 }
 
-const playStreams = function(state) {
+const playStreams = async function(state) {
     // Create remote display item to show remote streams
     state.setDisplay(initRemoteDisplay({
         div: document.getElementById("remoteVideo"),
@@ -150,10 +230,12 @@ const playStreams = function(state) {
         peerConnection: state.pc,
         displayOptions: {
             publisher: false,
-            quality: true
+            quality: true,
+            type: false
         }
     }));
-    state.room.join(state.pc);
+    // Start WebRTC negotiation
+    state.waitFor(state.room.join(state.pc), MAX_AWAIT_MS);
 }
 
 const stopStreams = function(state) {