@flashphoner/sfusdk-examples 2.0.221 → 2.0.226

package/package.json

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

package/src/client/main.js

@@ -115,9 +115,28 @@ async function connect() {
     }
 }
 
+/**
+ * Display an error message on operation failure
+ *
+ * @param prefix
+ * @param event
+ */
+const onOperationFailed = function(prefix, event) {
+    let reason = "reason unknown";
+    if (event.operation && event.error) {
+        reason = event.operation + " failed: " + event.error;
+    } else if (event.text) {
+        reason = event.text;
+    } else {
+        reason = JSON.stringify(event);
+    }
+    console.error(prefix + ": " + reason);
+    displayError(reason);
+}
+
 
 /**
- * Publish streams after entyering room according to configuration file
+ * Publish streams after entering room according to configuration file
  * 
  * @param {*} room
  * @param {*} pc
@@ -146,8 +165,7 @@ const publishPreconfiguredStreams = async function(room, pc, streams) {
             $('#' + s.stream.id + "-button").prop('disabled', false);
         });
     } catch(e) {
-        console.error("Failed to publish a preconfigured streams: " + e);
-        displayError(e);
+        onOperationFailed("Failed to publish a preconfigured streams", e);
         // Enable Delete button for each preconfigured stream #WCS-3689
         streams.forEach(function (s) {
             $('#' + s.stream.id + "-button").prop('disabled', false);
@@ -182,8 +200,7 @@ const publishNewTrack = async function(room, pc, media) {
         // 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);
+        onOperationFailed("Failed to publish a new track", e);
         // Enable Delete button for a new stream #WCS-3689
         $('#' + media.stream.id + "-button").prop('disabled', false);
     }
@@ -216,8 +233,7 @@ const subscribeTrackToEndedEvent = function(room, track, pc) {
                 await room.updateState();
             }
         } catch(e) {
-            displayError(e);
-            console.error("Failed to update room state: " + e);
+            onOperationFailed("Failed to update room state", e);
         }
     });
 }

package/src/commons/js/display.js

@@ -1,3 +1,13 @@
+const ABR_QUALITY_CHECK_PERIOD = 1000;
+const ABR_KEEP_ON_QUALITY = 20000;
+const ABR_TRY_UPPER_QUALITY = 20000;
+const QUALITY_COLORS = {
+    NONE: "",
+    AVAILABLE: "gray",
+    UNAVAILABLE: "red",
+    SELECTED: "blue"
+};
+
 const initLocalDisplay = function(localDisplayElement){
     const localDisplayDiv = localDisplayElement;
     const localDisplays = {};
@@ -272,6 +282,23 @@ const initRemoteDisplay = function(options) {
         let publisherNameDisplay;
         let currentQualityDisplay;
         let videoTypeDisplay;
+        let abrQualityCheckPeriod = ABR_QUALITY_CHECK_PERIOD;
+        let abrKeepOnGoodQuality = ABR_KEEP_ON_QUALITY;
+        let abrTryForUpperQuality = ABR_TRY_UPPER_QUALITY;
+        if (displayOptions.abrQualityCheckPeriod !== undefined) {
+            abrQualityCheckPeriod = displayOptions.abrQualityCheckPeriod;
+        }
+        if (displayOptions.abrKeepOnGoodQuality !== undefined) {
+            abrKeepOnGoodQuality = displayOptions.abrKeepOnGoodQuality;
+        }
+        if (displayOptions.abrTryForUpperQuality !== undefined) {
+            abrTryForUpperQuality = displayOptions.abrTryForUpperQuality;
+        }
+        if (!displayOptions.abr) {
+            abrQualityCheckPeriod = 0;
+            abrKeepOnGoodQuality = 0;
+            abrTryForUpperQuality = 0;
+        }
         if (displayOptions.publisher) {
             publisherNameDisplay = createInfoDisplay(cell, "Published by: " + name);
         }
@@ -302,8 +329,16 @@ const initRemoteDisplay = function(options) {
 
         let audio = null;
         let video = null;
+
+        const abr = ABR(abrQualityCheckPeriod, [
+            {parameter: "nackCount", maxLeap: 10},
+            {parameter: "freezeCount", maxLeap: 10},
+            {parameter: "packetsLost", maxLeap: 10}
+        ], abrKeepOnGoodQuality, abrTryForUpperQuality);
+
         return {
             dispose: function() {
+                abr.stop();
                 cell.remove();
             },
             hide: function(value) {
@@ -380,31 +415,34 @@ const initRemoteDisplay = function(options) {
                 streamDisplay.appendChild(video);
                 video.srcObject = stream;
                 this.setResizeHandler(video);
+                abr.start();
             },
             setTrackInfo: function(trackInfo) {
                 if (trackInfo) { 
                     if (trackInfo.quality) {
                         showItem(qualitySwitchDisplay);
+                        if (abr.isEnabled()) {
+                            const autoDiv = createQualityButton("Auto", qualityDivs, qualitySwitchDisplay);
+                            autoDiv.style.color = QUALITY_COLORS.SELECTED;
+                            autoDiv.addEventListener('click', function() {
+                                setQualityButtonsColor(qualityDivs);
+                                autoDiv.style.color = QUALITY_COLORS.SELECTED;
+                                abr.setAuto();
+                            });
+                        }
                         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', async function(){
+                            abr.addQuality(trackInfo.quality[i]);
+                            const qualityDiv = createQualityButton(trackInfo.quality[i], qualityDivs, qualitySwitchDisplay);
+                            qualityDiv.addEventListener('click', function() {
                                 console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
-                                if (qualityDiv.style.color === "red") {
+                                if (qualityDiv.style.color === QUALITY_COLORS.UNAVAILABLE) {
                                     return;
                                 }
-                                for (let c = 0; c < qualityDivs.length; c++) {
-                                    if (qualityDivs[c].style.color !== "red") {
-                                        qualityDivs[c].style.color = "gray";
-                                    }
-                                }
-                                qualityDiv.style.color = "blue";
-                                await room.changeQuality(trackInfo.id, trackInfo.quality[i]);
+                                setQualityButtonsColor(qualityDivs);
+                                qualityDiv.style.color = QUALITY_COLORS.SELECTED;
+                                abr.setManual();
+                                abr.setQuality(trackInfo.quality[i]);
                             });
-                            qualitySwitchDisplay.appendChild(qualityDiv);
                         }
                     } else {
                         hideItem(qualitySwitchDisplay);
@@ -424,16 +462,17 @@ const initRemoteDisplay = function(options) {
             updateQualityInfo: function(videoQuality) {
                 showItem(qualitySwitchDisplay);
                 for (const qualityInfo of videoQuality) {
+                    let qualityColor = QUALITY_COLORS.UNAVAILABLE;
+                    if (qualityInfo.available === true) {
+                        qualityColor = QUALITY_COLORS.AVAILABLE;
+                    }
                     for (const qualityDiv of qualityDivs) {
                         if (qualityDiv.innerText === qualityInfo.quality){
-                            if (qualityInfo.available === true) {
-                                qualityDiv.style.color = "gray";
-                            } else {
-                                qualityDiv.style.color = "red";
-                            }
+                            qualityDiv.style.color = qualityColor;
                             break;
                         }
                     }
+                    abr.setQualityAvailable(qualityInfo.quality, qualityInfo.available);
                 }
             },
             hasVideo: function() {
@@ -450,6 +489,10 @@ const initRemoteDisplay = function(options) {
                         currentQualityDisplay.innerHTML = video.videoWidth + "x" + video.videoHeight;
                     }
                     resizeVideo(event.target);
+                    // Received a new quality, resume ABR is enabled
+                    if (abr.isAuto()) {
+                        abr.resume();
+                    }
                 });
             },
             setEventHandlers: function(video) {
@@ -482,6 +525,9 @@ const initRemoteDisplay = function(options) {
                     isFullscreen = false;
                 });
             },
+            setVideoABRTrack: function(track) {
+                abr.setTrack(track);
+            },
             audioMid: undefined,
             videoMid: undefined
         };
@@ -517,6 +563,7 @@ const initRemoteDisplay = function(options) {
                     if (display.videoMid === transceiver.mid) {
                         let stream = new MediaStream();
                         stream.addTrack(transceiver.receiver.track);
+                        display.setVideoABRTrack(transceiver.receiver.track);
                         display.setVideo(stream);
                         break;
                     }
@@ -580,6 +627,202 @@ const initRemoteDisplay = function(options) {
         return button;
     }
 
+    const ABR = function(interval, thresholds, keepGoodTimeout, tryUpperTimeout) {
+        let abr = {
+            track: null,
+            interval: interval,
+            thresholds: thresholds,
+            qualities: [],
+            currentQualityName: null,
+            statTimer: null,
+            paused: false,
+            manual: false,
+            keepGoodTimeout: keepGoodTimeout,
+            keepGoodTimer: null,
+            tryUpperTimeout: tryUpperTimeout,
+            tryUpperTimer: null,
+            start: function() {
+                if (abr.interval) {
+                    const thresholds = Thresholds();
+                    for (const threshold of abr.thresholds) {
+                        thresholds.add(threshold.parameter, threshold.maxLeap);
+                    }
+                    abr.statsTimer = setInterval(() => {
+                        if (abr.track) {
+                            room.getStats(abr.track, constants.SFU_RTC_STATS_TYPE.INBOUND, (stats) => {
+                                if (thresholds.isReached(stats)) {
+                                    abr.shiftDown();
+                                } else {
+                                    abr.useGoodQuality();
+                                }
+                            });
+                        }
+                    }, abr.interval);
+                }
+            },
+            stop: function() {
+                abr.stopKeeping();
+                abr.stopTrying();
+                if (abr.statsTimer) {
+                    clearInterval(abr.statsTimer);
+                    abr.statsTimer = null;
+                }
+            },
+            isEnabled: function () {
+                return (abr.interval > 0);
+            },
+            pause: function() {
+                abr.paused = true;
+            },
+            resume: function() {
+                abr.paused = false;
+            },
+            setAuto: function() {
+                abr.manual = false;
+                abr.resume();
+            },
+            setManual: function() {
+                abr.manual = true;
+                abr.pause();
+            },
+            isAuto: function() {
+                return !abr.manual;
+            },
+            setTrack: function(track) {
+                abr.track = track;
+            },
+            setQualitiesList: function(qualities) {
+                abr.qualities = qualities;
+            },
+            addQuality: function(name) {
+                abr.qualities.push({name: name, available: false, good: true});
+            },
+            setQualityAvailable: function(name, available) {
+                for (let i = 0; i < abr.qualities.length; i++) {
+                    if (name === abr.qualities[i].name) {
+                        abr.qualities[i].available = available;
+                    }
+                }
+            },
+            setQualityGood: function(name, good) {
+                if (name) {
+                    for (let i = 0; i < abr.qualities.length; i++) {
+                        if (name === abr.qualities[i].name) {
+                            abr.qualities[i].good = good;
+                        }
+                    }
+                }
+            },
+            getFirstAvailableQuality: function() {
+                for (let i = 0; i < abr.qualities.length; i++) {
+                    if (abr.qualities[i].available) {
+                        return abr.qualities[i];
+                    }
+                }
+                return null;
+            },
+            getLowerQuality: function(name) {
+                let quality = null;
+                if (!name) {
+                    // There were no switching yet, return a first available quality
+                    return abr.getFirstAvailableQuality();
+                }
+                let currentIndex = abr.qualities.map(item => item.name).indexOf(name);
+                for (let i = 0; i < currentIndex; i++) {
+                    if (abr.qualities[i].available) {
+                        quality = abr.qualities[i];
+                    }
+                }
+                return quality;
+            },
+            getUpperQuality: function(name) {
+                let quality = null;
+                if (!name) {
+                    // There were no switching yet, return a first available quality
+                    return abr.getFirstAvailableQuality();
+                }
+                let currentIndex = abr.qualities.map(item => item.name).indexOf(name);
+                for (let i = currentIndex + 1; i < abr.qualities.length; i++) {
+                    if (abr.qualities[i].available) {
+                        quality = abr.qualities[i];
+                        break;
+                    }
+                }
+                return quality;
+            },
+            shiftDown: function() {
+                if (!abr.manual && !abr.paused) {
+                    abr.stopKeeping();
+                    abr.setQualityGood(abr.currentQualityName, false);
+                    let quality = abr.getLowerQuality(abr.currentQualityName);
+                    if (quality) {
+                        console.log("Switching down to " + quality.name + " quality");
+                        abr.setQuality(quality.name);
+                    }
+                }
+            },
+            shiftUp: function() {
+                if (!abr.manual && !abr.paused) {
+                    let quality = abr.getUpperQuality(abr.currentQualityName);
+                    if (quality) {
+                        if (quality.good) {
+                            console.log("Switching up to " + quality.name + " quality");
+                            abr.setQuality(quality.name);
+                        } else {
+                            abr.tryUpper();
+                        }
+                    }
+                }
+            },
+            useGoodQuality: function() {
+                if (!abr.manual && !abr.paused) {
+                    if (!abr.currentQualityName) {
+                        let quality = abr.getFirstAvailableQuality();
+                        abr.currentQualityName = quality.name;
+                    }
+                    abr.setQualityGood(abr.currentQualityName, true);
+                    abr.keepGoodQuality();
+                }
+            },
+            keepGoodQuality: function() {
+                if (abr.keepGoodTimeout && !abr.keepGoodTimer && abr.getUpperQuality(abr.currentQualityName)) {
+                    abr.keepGoodTimer = setTimeout(() => {
+                        abr.shiftUp();
+                        abr.stopKeeping();
+                    }, abr.keepGoodTimeout);
+                }
+            },
+            stopKeeping: function() {
+                if (abr.keepGoodTimer) {
+                    clearTimeout(abr.keepGoodTimer);
+                    abr.keepGoodTimer = null;
+                }
+            },
+            tryUpper: function() {
+                let quality = abr.getUpperQuality(abr.currentQualityName);
+                if (abr.tryUpperTimeout && !abr.tryUpperTimer && quality) {
+                    abr.tryUpperTimer = setTimeout(() => {
+                        abr.setQualityGood(quality.name, true);
+                        abr.stopTrying();
+                    }, abr.tryUpperTimeout);
+                }
+            },
+            stopTrying: function() {
+                if (abr.tryUpperTimer) {
+                    clearTimeout(abr.tryUpperTimer);
+                    abr.tryUpperTimer = null;
+                }
+            },
+            setQuality: async function(name) {
+                // Pause switching until a new quality is received
+                abr.pause();
+                abr.currentQualityName = name;
+                await room.changeQuality(abr.track.id, abr.currentQualityName);
+            }
+        }
+        return abr;
+    }
+
     return {
         stop: stop
     }
@@ -656,6 +899,28 @@ const createContainer = function(parent) {
     return div;
 }
 
+const createQualityButton = function(qualityName, buttonsList, parent) {
+    const div = document.createElement("button");
+    div.innerText = qualityName;
+    div.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+    div.style.color = QUALITY_COLORS.UNAVAILABLE;
+    if (buttonsList) {
+        buttonsList.push(div);
+    }
+    if (parent) {
+        parent.appendChild(div);
+    }
+    return div;
+}
+
+const setQualityButtonsColor = function(qualityDivs) {
+    for (let c = 0; c < qualityDivs.length; c++) {
+        if (qualityDivs[c].style.color !== QUALITY_COLORS.UNAVAILABLE) {
+            qualityDivs[c].style.color = QUALITY_COLORS.AVAILABLE;
+        }
+    }
+}
+
 // Helper functions to display/hide an element
 const showItem = function(tag) {
     if (tag) {

package/src/commons/js/stats.js

@@ -0,0 +1,46 @@
+const Threshold = function(parameter, maxLeap) {
+    const threshold = {
+        parameter: parameter,
+        maxLeap: maxLeap,
+        filter: SFU.createFilter(),
+        previousValue: -1,
+        isReached: function(stats) {
+            let hasLeap = false;
+            if (stats && parameter in stats) {
+                let value = threshold.filter.filter(stats[parameter]);
+                if (threshold.previousValue > -1) {
+                    if (Math.round(Math.abs(value - threshold.previousValue)) > maxLeap) {
+                        hasLeap = true;
+                    }
+                }
+                threshold.previousValue = value;
+            }
+            return hasLeap;
+        }
+    }
+    return threshold;
+}
+
+const Thresholds = function () {
+    const thresholds = {
+        thresholds: {},
+        add: function(parameter, maxLeap) {
+            if (!thresholds.thresholds[parameter]) {
+                thresholds.thresholds[parameter] = new Threshold(parameter, maxLeap);
+            }
+        },
+        remove: function(parameter) {
+            if (thresholds.thresholds[parameter]) {
+                delete thresholds.thresholds[parameter];
+            }
+        },
+        isReached: function(stats) {
+            let result = false;
+            Object.keys(thresholds.thresholds).forEach((key) => {
+                result = result || thresholds.thresholds[key].isReached(stats);
+            });
+            return result;
+        }
+    }
+    return thresholds;
+}

package/src/player/player.js

@@ -6,7 +6,6 @@ let playState;
 const PLAY = "play";
 const STOP = "stop";
 const PRELOADER_URL="../commons/media/silence.mp3";
-const MAX_AWAIT_MS=5000;
 
 
 /**
@@ -31,27 +30,17 @@ const CurrentState = function(prefix) {
         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;
@@ -81,47 +70,10 @@ const CurrentState = function(prefix) {
             return (state.room && !state.roomEnded && state.pc);
         },
         isConnected: function() {
-            return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+            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;
@@ -172,12 +124,10 @@ const connect = async function(state) {
         // 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) {
@@ -187,18 +137,17 @@ const connect = async function(state) {
             }
         });
         // Connected successfully
-        state.set(pc, session, session.room());
-        onConnected(state);
+        onConnected(state, pc, session);
         setStatus(state.statusId(), "ESTABLISHED", "green");
     } catch(e) {
-        state.clear();
         onDisconnected(state);
         setStatus(state.statusId(), "FAILED", "red");
         setStatus(state.errInfoId(), e, "red");
     }
 }
 
-const onConnected = async function(state) {
+const onConnected = async function(state, pc, session) {
+    state.set(pc, session, session.room());
     $("#" + state.buttonId()).text("Stop").off('click').click(function () {
         onStopClick(state);
     });
@@ -209,22 +158,16 @@ const onConnected = async function(state) {
     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);
+        onOperationFailed(state, e);
     }).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);
     });
     await playStreams(state);
@@ -233,6 +176,7 @@ const onConnected = async function(state) {
 }
 
 const onDisconnected = function(state) {
+    state.clear();
     $("#" + state.buttonId()).text(state.buttonText()).off('click').click(function () {
         onStartClick(state);
     }).prop('disabled', false);
@@ -255,11 +199,22 @@ const onStartClick = function(state) {
 }
 
 const onStopClick = async function(state) {
-    $("#" + state.buttonId()).prop('disabled', true);
     stopStreams(state);
     if (state.isConnected()) {
-        state.waitFor(state.session.disconnect(), MAX_AWAIT_MS);
+        $("#" + state.buttonId()).prop('disabled', true);
+        await state.session.disconnect();
+        onDisconnected(state);
+    }
+}
+
+const onOperationFailed = function(state, event) {
+    if (event.operation && event.error) {
+        setStatus(state.errInfoId(), event.operation + " failed: " + event.error, "red");
+    } else {
+        setStatus(state.errInfoId(), event, "red");
     }
+    state.setRoomEnded();
+    onStopClick(state);
 }
 
 const playStreams = async function(state) {
@@ -271,11 +226,15 @@ const playStreams = async function(state) {
             peerConnection: state.pc
         });
         // Start WebRTC negotiation
-        state.waitFor(state.room.join(state.pc), MAX_AWAIT_MS);
+        await state.room.join(state.pc);
     } catch(e) {
-        console.error("Failed to play streams: " + e);
-        setStatus(state.errInfoId(), e.name, "red");
-        onStopClick(state);
+        if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
+            onOperationFailed(state, e);
+        } else {
+            console.error("Failed to play streams: " + e);
+            setStatus(state.errInfoId(), e.name, "red");
+            onStopClick(state);
+        }
     }
 }
 
@@ -292,7 +251,7 @@ const setStatus = function (status, text, color) {
 }
 
 const validateForm = function (formId) {
-    var valid = true;
+    let valid = true;
     $('#' + formId + ' :text').each(function () {
         if (!$(this).val()) {
             highlightInput($(this));

package/src/sfu.ts

@@ -1,8 +1,10 @@
+import KalmanFilter from 'kalmanjs';
 import {
     Sfu,
     RoomEvent,
     SfuEvent,
-    State
+    State,
+    StatsType
 } from "@flashphoner/sfusdk";
 
 export async function createRoom(options: {
@@ -35,5 +37,10 @@ export async function createRoom(options: {
 export const constants = {
     SFU_EVENT: SfuEvent,
     SFU_ROOM_EVENT: RoomEvent,
-    SFU_STATE: State
+    SFU_STATE: State,
+    SFU_RTC_STATS_TYPE: StatsType
 }
+
+export function createFilter() : KalmanFilter {
+    return new KalmanFilter();
+}

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

@@ -9,7 +9,6 @@ const PUBLISH = "publish";
 const PLAY = "play";
 const STOP = "stop";
 const PRELOADER_URL="../commons/media/silence.mp3";
-const MAX_AWAIT_MS=5000;
 
 
 /**
@@ -58,28 +57,18 @@ const CurrentState = function(prefix) {
         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;
         },
         setRoomEnded: function() {
             state.roomEnded = true;
@@ -109,48 +98,11 @@ const CurrentState = function(prefix) {
             return (state.room && !state.roomEnded && state.pc);
         },
         isConnected: function() {
-            return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+            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;
         },
@@ -212,12 +164,10 @@ const connect = async function(state) {
         // 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) {
@@ -227,17 +177,16 @@ const connect = async function(state) {
             }
         });
         // Connected successfully
-        state.set(pc, session, session.room());
-        onConnected(state);
+        onConnected(state, pc, session);
         setStatus(state.statusId(), "ESTABLISHED", "green");
     } catch(e) {
-        state.clear();
         onDisconnected(state);
         setStatus(state.statusId(), "FAILED", "red");
         setStatus(state.errInfoId(), e, "red");
     }}
 
-const onConnected = function(state) {
+const onConnected = function(state, pc, session) {
+    state.set(pc, session, session.room());
     $("#" + state.buttonId()).text("Stop").off('click').click(function () {
         onStopClick(state);
     });
@@ -248,28 +197,23 @@ const onConnected = function(state) {
     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);
+        onOperationFailed(state, e);
     }).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);
 }
 
 const onDisconnected = function(state) {
+    state.clear();
     $("#" + state.buttonId()).text(state.buttonText()).off('click').click(function () {
         onStartClick(state);
     }).prop('disabled', false);
@@ -305,10 +249,24 @@ const onStartClick = function(state) {
     }
 }
 
-const onStopClick = function(state) {
+const onOperationFailed = function(state, event) {
+    if (event.operation && event.error) {
+        setStatus(state.errInfoId(), event.operation + " failed: " + event.error, "red");
+    } else {
+        setStatus(state.errInfoId(), event, "red");
+    }
+    state.setRoomEnded();
+    onStopClick(state);
+}
+
+const onStopClick = async function(state) {
     state.setStarting(false);
-    $("#" + state.buttonId()).prop('disabled', true);
     stopStreaming(state);
+    if (state.isConnected()) {
+        $("#" + state.buttonId()).prop('disabled', true);
+        await state.session.disconnect();
+        onDisconnected(state);
+    }
 }
 
 const startStreaming = async function(state) {
@@ -326,15 +284,12 @@ const startStreaming = async function(state) {
     }
 }
 
-const stopStreaming = async function(state) {
+const stopStreaming = 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) {
@@ -362,12 +317,16 @@ const publishStreams = async function(state) {
                     });
                 });
                 //start WebRTC negotiation
-                state.waitFor(state.room.join(state.pc, null, config), MAX_AWAIT_MS);
+                await state.room.join(state.pc, null, config);
             }
         } catch(e) {
-            console.error("Failed to capture streams: " + e);
-            setStatus(state.errInfoId(), e.name, "red");
-            onStopClick(state);
+            if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
+                onOperationFailed(state, e);
+            } else {
+                console.error("Failed to capture streams: " + e);
+                setStatus(state.errInfoId(), e.name, "red");
+                onStopClick(state);
+            }
         }
     }
 }
@@ -388,11 +347,15 @@ const playStreams = async function(state) {
                 peerConnection: state.pc
             });
             //start WebRTC negotiation
-            state.waitFor(state.room.join(state.pc), MAX_AWAIT_MS);
+            await state.room.join(state.pc);
         } catch(e) {
-            console.error("Failed to play streams: " + e);
-            setStatus(state.errInfoId(), e.name, "red");
-            onStopClick(state);
+            if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
+                onOperationFailed(state, e);
+            } else {
+                console.error("Failed to play streams: " + e);
+                setStatus(state.errInfoId(), e.name, "red");
+                onStopClick(state);
+            }
         }
     }
 }
@@ -404,7 +367,7 @@ const stopStreams = function(state) {
 }
 
 const subscribeTrackToEndedEvent = function(room, track, pc) {
-    track.addEventListener("ended", function() {
+    track.addEventListener("ended", async function() {
         //track ended, see if we need to cleanup
         let negotiate = false;
         for (const sender of pc.getSenders()) {
@@ -417,7 +380,7 @@ const subscribeTrackToEndedEvent = function(room, track, pc) {
         }
         if (negotiate) {
             //kickoff renegotiation
-            room.updateState();
+            await room.updateState();
         }
     });
 };

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

@@ -15,6 +15,7 @@
     <script type="text/javascript" src="../sfu.js"></script>
     <script type="text/javascript" src="../commons/js/util.js"></script>
     <script type="text/javascript" src="../commons/js/config.js"></script>
+    <script type="text/javascript" src="../commons/js/stats.js"></script>
     <script type="text/javascript" src="../commons/js/display.js"></script>
     <script type="text/javascript" src="player.js"></script>
 </head>

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

@@ -1,7 +1,8 @@
 const constants = SFU.constants;
 const sfu = SFU;
 const PRELOADER_URL="../commons/media/silence.mp3";
-const MAX_AWAIT_MS=5000;
+const playStatus = "playStatus";
+const playErrorInfo = "playErrorInfo";
 
 
 /**
@@ -14,27 +15,17 @@ const CurrentState = function() {
         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;
@@ -43,7 +34,7 @@ const CurrentState = function() {
             return state.roomEnded;
         },
         isConnected: function() {
-            return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+            return (state.session && state.session.state() === constants.SFU_STATE.CONNECTED);
         },
         isActive: function() {
             return (state.room && !state.roomEnded && state.pc);
@@ -56,45 +47,7 @@ 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;
 }
@@ -128,41 +81,38 @@ const connect = async function(state) {
         pin: 123456
     }
     // Clean state display items
-    setStatus("playStatus", "");
-    setStatus("playErrorInfo", "");
+    setStatus(playStatus, "");
+    setStatus(playErrorInfo, "");
     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");
+            setStatus(playStatus, "DISCONNECTED", "green");
         }).on(constants.SFU_EVENT.FAILED, function(e) {
             onStopClick(state);
-            state.clear();
             onDisconnected(state);
-            setStatus("playStatus", "FAILED", "red");
+            setStatus(playStatus, "FAILED", "red");
             if (e.status && e.statusText) {
-                setStatus("playErrorInfo", e.status + " " + e.statusText, "red");
+                setStatus(playErrorInfo, e.status + " " + e.statusText, "red");
             } else if (e.type && e.info) {
-                setStatus("playErrorInfo", e.type + ": " + e.info, "red");
+                setStatus(playErrorInfo, e.type + ": " + e.info, "red");
             }
         });
         // Connected successfully
-        state.set(pc, session, session.room());
-        onConnected(state);
-        setStatus("playStatus", "CONNECTING...", "black");
+        onConnected(state, pc, session);
+        setStatus(playStatus, "CONNECTING...", "black");
     } catch(e) {
-        state.clear();
         onDisconnected(state);
-        setStatus("playStatus", "FAILED", "red");
-        setStatus("playErrorInfo", e, "red");
+        setStatus(playStatus, "FAILED", "red");
+        setStatus(playErrorInfo, e, "red");
     }
 }
 
-const onConnected = async function(state) {
+const onConnected = async function(state, pc, session) {
+    state.set(pc, session, session.room());
     $("#playBtn").text("Stop").off('click').click(function () {
         onStopClick(state);
     });
@@ -171,34 +121,28 @@ const onConnected = async function(state) {
     // Add room event handling
     state.room.on(constants.SFU_ROOM_EVENT.PARTICIPANT_LIST, function(e) {
         // If the room is empty, the stream is not published yet
-        if(!e.participants || e.participants.length === 0) {
-            setStatus("playErrorInfo", "ABR stream is not published", "red");
+        if (!e.participants || e.participants.length === 0) {
+            setStatus(playErrorInfo, "ABR stream is not published", "red");
             onStopClick(state);    
         }
         else {
-            setStatus("playStatus", "ESTABLISHED", "green");
+            setStatus(playStatus, "ESTABLISHED", "green");
             $("#placeholder").hide();
         }
     }).on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
         // Display error state
-        setStatus("playErrorInfo", e, "red");
+        setStatus(playErrorInfo, e, "red");
     }).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);
+        onOperationFailed(state);
     }).on(constants.SFU_ROOM_EVENT.ENDED, function () {
         // Publishing is stopped, dispose playback and close connection
-        setStatus("playErrorInfo", "ABR stream is stopped", "red");
+        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");
+        setStatus(playErrorInfo, "Playback is dropped due to network issues", "red");
         state.setRoomEnded();
-        state.stopWaiting();
         onStopClick(state);
     });
     await playStreams(state);
@@ -207,6 +151,7 @@ const onConnected = async function(state) {
 }
 
 const onDisconnected = function(state) {
+    state.clear();
     $("#placeholder").show();
     $("#playBtn").text("Play").off('click').click(function () {
         onStartClick(state);
@@ -229,27 +174,52 @@ const onStartClick = function(state) {
 }
 
 const onStopClick = async function(state) {
-    $("#playBtn").prop('disabled', true);
     stopStreams(state);
     if (state.isConnected()) {
-        state.waitFor(state.session.disconnect(), MAX_AWAIT_MS);
+        $("#playBtn").prop('disabled', true);
+        await state.session.disconnect();
+        onDisconnected(state);
+    }
+}
+
+const onOperationFailed = function(state, event) {
+    if (event.operation && event.error) {
+        setStatus(playErrorInfo, e.operation + " failed: " + e.error, "red");
+    } else {
+        setStatus(playErrorInfo, event, "red");
     }
+    state.setRoomEnded();
+    onStopClick(state);
 }
 
 const playStreams = async function(state) {
-    // Create remote display item to show remote streams
-    state.setDisplay(initRemoteDisplay({
-        div: document.getElementById("remoteVideo"),
-        room: state.room,
-        peerConnection: state.pc,
-        displayOptions: {
-            publisher: false,
-            quality: true,
-            type: false
+    try {
+        // Create remote display item to show remote streams
+        state.setDisplay(initRemoteDisplay({
+            div: document.getElementById("remoteVideo"),
+            room: state.room,
+            peerConnection: state.pc,
+            displayOptions: {
+                publisher: false,
+                quality: true,
+                type: false,
+                abr: true,
+                abrKeepOnGoodQuality: 20000,
+                abrTryForUpperQuality: 30000
+            }
+        }));
+        // Start WebRTC negotiation
+        await state.room.join(state.pc);
+    } catch(e) {
+        if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
+            onOperationFailed(state, e);
+        } else {
+            console.error("Failed to play streams: " + e);
+            setStatus(playErrorInfo, e.name, "red");
+            onStopClick(state);
         }
-    }));
-    // Start WebRTC negotiation
-    state.waitFor(state.room.join(state.pc), MAX_AWAIT_MS);
+    }
+
 }
 
 const stopStreams = function(state) {
@@ -264,15 +234,15 @@ const setStatus = function (status, text, color) {
 }
 
 const validateForm = function (formId) {
-    var valid = true;
+    let valid = true;
     $('#' + formId + ' :text').each(function () {
         if (!$(this).val()) {
             highlightInput($(this));
             valid = false;
-            setStatus("playErrorInfo", "Fields cannot be empty", "red");
+            setStatus(playErrorInfo, "Fields cannot be empty", "red");
         } else {
             removeHighlight($(this));
-            setStatus("playErrorInfo", "");
+            setStatus(playErrorInfo, "");
         }
     });
     return valid;