@flashphoner/sfusdk-examples 2.0.244 → 2.0.248

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

@@ -8,7 +8,7 @@ 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";
 
 
 /**
@@ -19,7 +19,9 @@ const defaultConfig = {
         url: "wss://127.0.0.1:8888",
         name: "ROOM1",
         pin: "1234",
-        nickName: "User1"
+        nickName: "User1",
+        failedProbesThreshold: 5,
+        pingInterval: 5000
     },
     media: {
         audio: {
@@ -31,18 +33,21 @@ const defaultConfig = {
             ]
         },
         video: {
-            tracks: [
-                {
-                    source: "camera",
-                    width: 640,
-                    height: 360,
-                    codec: "H264",
-                    encodings: [
-                        { rid: "360p", active: true, maxBitrate: 500000 },
-                        { rid: "180p", active: true, maxBitrate: 200000, scaleResolutionDownBy: 2 }
-                    ]
-                }
-            ]
+            tracks: Array(1).fill({
+                source: "camera",
+                width: 1280,
+                height: 720,
+                codec: "H264",
+                constraints: {
+                    frameRate: 25
+                },
+                encodings: [
+                    {rid: "180p", active: true, maxBitrate: 200000, scaleResolutionDownBy: 4},
+                    {rid: "360p", active: true, maxBitrate: 500000, scaleResolutionDownBy: 2},
+                    {rid: "720p", active: true, maxBitrate: 900000}
+                ],
+                type: "cam1"
+            })
         }
     }
 };
@@ -50,64 +55,74 @@ const defaultConfig = {
 /**
  * Current state object
  */
-const CurrentState = function(prefix) {
+const CurrentState = function (prefix) {
     let state = {
         prefix: prefix,
         pc: null,
         session: null,
         room: null,
+        display: null,
         roomEnded: false,
         starting: false,
-        set: function(pc, session, room) {
+        set: function (pc, session, room) {
             state.pc = pc;
             state.session = session;
             state.room = room;
             state.roomEnded = false;
         },
-        clear: function() {
+        clear: function () {
             state.room = null;
             state.session = null;
             state.pc = null;
             state.roomEnded = false;
         },
-        setRoomEnded: function() {
+        setRoomEnded: function () {
             state.roomEnded = true;
         },
-        buttonId: function() {
+        buttonId: function () {
             return state.prefix + "Btn";
         },
-        buttonText: function() {
+        buttonText: function () {
             return (state.prefix.charAt(0).toUpperCase() + state.prefix.slice(1));
         },
-        inputId: function() {
+        inputId: function () {
             return state.prefix + "Name";
         },
-        statusId: function() {
+        statusId: function () {
             return state.prefix + "Status";
         },
-        formId: function() {
+        formId: function () {
             return state.prefix + "Form";
         },
-        errInfoId: function() {
+        errInfoId: function () {
             return state.prefix + "ErrorInfo";
         },
-        is: function(value) {
+        is: function (value) {
             return (prefix === value);
         },
-        isActive: function() {
+        isActive: function () {
             return (state.room && !state.roomEnded && state.pc);
         },
-        isConnected: function() {
+        isConnected: function () {
             return (state.session && state.session.state() === constants.SFU_STATE.CONNECTED);
         },
-        isRoomEnded: function() {
+        isRoomEnded: function () {
             return state.roomEnded;
         },
-        setStarting: function(value) {
+        setStarting: function (value) {
             state.starting = value;
         },
-        isStarting: function() {
+        isStarting: function () {
             return state.starting;
+        },
+        setDisplay: function (display) {
+            state.display = display;
+        },
+        disposeDisplay: function () {
+            if (state.display) {
+                state.display.stop();
+                state.display = null;
+            }
         }
     };
     return state;
@@ -116,7 +131,7 @@ const CurrentState = function(prefix) {
 /**
  * load config and set default values
  */
-const init = function() {
+const init = function () {
     let configName = getUrlParam("config") || "./config.json";
     $("#publishBtn").prop('disabled', true);
     $("#playBtn").prop('disabled', true);
@@ -126,11 +141,11 @@ const init = function() {
     $("#playName").prop('disabled', true);
     publishState = CurrentState(PUBLISH);
     playState = CurrentState(PLAY);
-    $.getJSON(configName, function(cfg){
+    $.getJSON(configName, function (cfg) {
         mainConfig = cfg;
         onDisconnected(publishState);
         onDisconnected(playState);
-    }).fail(function(e){
+    }).fail(function (e) {
         //use default config
         console.error("Error reading configuration file " + configName + ": " + e.status + " " + e.statusText)
         console.log("Default config will be used");
@@ -139,15 +154,15 @@ const init = function() {
         onDisconnected(playState);
     });
     $("#url").val(setURL());
-    $("#roomName").val("ROOM1-"+createUUID(4));
-    $("#publishName").val("Publisher1-"+createUUID(4));
-    $("#playName").val("Player1-"+createUUID(4));
+    $("#roomName").val("ROOM1-" + createUUID(4));
+    $("#publishName").val("Publisher1-" + createUUID(4));
+    $("#playName").val("Player1-" + createUUID(4));
 }
 
 /**
  * connect to server
  */
-const connect = async function(state) {
+const connect = async function (state) {
     //create peer connection
     let pc = new RTCPeerConnection();
     //get config object for room creation
@@ -162,11 +177,11 @@ const connect = async function(state) {
     try {
         const session = await sfu.createRoom(roomConfig);
         // Set up session ending events
-        session.on(constants.SFU_EVENT.DISCONNECTED, function() {
+        session.on(constants.SFU_EVENT.DISCONNECTED, function () {
             onStopClick(state);
             onDisconnected(state);
             setStatus(state.statusId(), "DISCONNECTED", "green");
-        }).on(constants.SFU_EVENT.FAILED, function(e) {
+        }).on(constants.SFU_EVENT.FAILED, function (e) {
             onStopClick(state);
             onDisconnected(state);
             setStatus(state.statusId(), "FAILED", "red");
@@ -179,13 +194,14 @@ const connect = async function(state) {
         // Connected successfully
         onConnected(state, pc, session);
         setStatus(state.statusId(), "ESTABLISHED", "green");
-    } catch(e) {
+    } catch (e) {
         onDisconnected(state);
         setStatus(state.statusId(), "FAILED", "red");
         setStatus(state.errInfoId(), e, "red");
-    }}
+    }
+}
 
-const onConnected = function(state, pc, session) {
+const onConnected = function (state, pc, session) {
     state.set(pc, session, session.room());
     $("#" + state.buttonId()).text("Stop").off('click').click(function () {
         onStopClick(state);
@@ -194,25 +210,25 @@ const onConnected = function(state, pc, session) {
     $("#roomName").prop('disabled', true);
     $("#" + state.inputId()).prop('disabled', true);
     // Add errors displaying
-    state.room.on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
+    state.room.on(constants.SFU_ROOM_EVENT.FAILED, function (e) {
         setStatus(state.errInfoId(), e, "red");
         state.setRoomEnded();
         onStopClick(state);
     }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
         onOperationFailed(state, e);
     }).on(constants.SFU_ROOM_EVENT.ENDED, function () {
-        setStatus(state.errInfoId(), "Room "+state.room.name()+" has ended", "red");
+        setStatus(state.errInfoId(), "Room " + state.room.name() + " has ended", "red");
         state.setRoomEnded();
         onStopClick(state);
     }).on(constants.SFU_ROOM_EVENT.DROPPED, function () {
-        setStatus(state.errInfoId(), "Dropped from the room "+state.room.name()+" due to network issues", "red");
+        setStatus(state.errInfoId(), "Dropped from the room " + state.room.name() + " due to network issues", "red");
         state.setRoomEnded();
         onStopClick(state);
     });
     startStreaming(state);
 }
 
-const onDisconnected = function(state) {
+const onDisconnected = function (state) {
     state.clear();
     $("#" + state.buttonId()).text(state.buttonText()).off('click').click(function () {
         onStartClick(state);
@@ -228,10 +244,10 @@ const onDisconnected = function(state) {
     }
 }
 
-const onStartClick = function(state) {
+const onStartClick = function (state) {
     if (validateForm("connectionForm", state.errInfoId())
-      && validateForm(state.formId(), state.errInfoId())
-       && validateName(state, state.errInfoId())) {
+        && validateForm(state.formId(), state.errInfoId())
+        && validateName(state, state.errInfoId())) {
         state.setStarting(true);
         let otherState = getOtherState(state);
         $("#" + state.buttonId()).prop('disabled', true);
@@ -249,7 +265,7 @@ const onStartClick = function(state) {
     }
 }
 
-const onOperationFailed = function(state, event) {
+const onOperationFailed = function (state, event) {
     if (event.operation && event.error) {
         setStatus(state.errInfoId(), event.operation + " failed: " + event.error, "red");
     } else {
@@ -259,17 +275,20 @@ const onOperationFailed = function(state, event) {
     onStopClick(state);
 }
 
-const onStopClick = async function(state) {
+const onStopClick = async function (state) {
     state.setStarting(false);
-    stopStreaming(state);
+    disposeStateDisplay(state);
     if (state.isConnected()) {
         $("#" + state.buttonId()).prop('disabled', true);
         await state.session.disconnect();
         onDisconnected(state);
     }
 }
+const disposeStateDisplay = function (state) {
+    state.disposeDisplay();
+}
 
-const startStreaming = async function(state) {
+const startStreaming = async function (state) {
     if (state.is(PUBLISH)) {
         await publishStreams(state);
     } else if (state.is(PLAY)) {
@@ -284,18 +303,11 @@ const startStreaming = async function(state) {
     }
 }
 
-const stopStreaming = function(state) {
-    if (state.is(PUBLISH)) {
-        unPublishStreams(state);
-    } else if (state.is(PLAY)) {
-        stopStreams(state);
-    }
-}
-
-const publishStreams = async function(state) {
+const publishStreams = async function (state) {
     if (state.isConnected()) {
         //create local display item to show local streams
-        localDisplay = initLocalDisplay(document.getElementById("localVideo"));
+        const display = initLocalDisplay(document.getElementById("localVideo"));
+        state.setDisplay(display);
         try {
             //get configured local video streams
             let streams = await getVideoStreams(mainConfig);
@@ -308,7 +320,7 @@ const publishStreams = async function(state) {
                 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, contentType);
+                    display.add(s.stream.id, $("#" + state.inputId()).val(), s.stream, contentType);
                     //add each track to PeerConnection
                     s.stream.getTracks().forEach((track) => {
                         config[track.id] = contentType;
@@ -319,7 +331,7 @@ const publishStreams = async function(state) {
                 //start WebRTC negotiation
                 await state.room.join(state.pc, null, config);
             }
-        } catch(e) {
+        } catch (e) {
             if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
                 onOperationFailed(state, e);
             } else {
@@ -331,24 +343,15 @@ const publishStreams = async function(state) {
     }
 }
 
-const unPublishStreams = function(state) {
-    if (localDisplay) {
-        localDisplay.stop();
-    }
-}
-
-const playStreams = async function(state) {
+const playStreams = async function (state) {
     if (state.isConnected() && state.isActive()) {
         try {
             //create remote display item to show remote streams
-            remoteDisplay = initRemoteDisplay({
-                div: document.getElementById("remoteVideo"),
-                room: state.room,
-                peerConnection: state.pc
-            });
+            const display = initDefaultRemoteDisplay(state.room, document.getElementById("remoteVideo"), null, null);
+            state.setDisplay(display);
             //start WebRTC negotiation
-            await state.room.join(state.pc);
-        } catch(e) {
+            await state.room.join(state.pc, null, null, 1);
+        } catch (e) {
             if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
                 onOperationFailed(state, e);
             } else {
@@ -360,14 +363,8 @@ const playStreams = async function(state) {
     }
 }
 
-const stopStreams = function(state) {
-    if (remoteDisplay) {
-        remoteDisplay.stop();
-    }
-}
-
-const subscribeTrackToEndedEvent = function(room, track, pc) {
-    track.addEventListener("ended", async function() {
+const subscribeTrackToEndedEvent = function (room, track, pc) {
+    track.addEventListener("ended", async function () {
         //track ended, see if we need to cleanup
         let negotiate = false;
         for (const sender of pc.getSenders()) {
@@ -385,7 +382,7 @@ const subscribeTrackToEndedEvent = function(room, track, pc) {
     });
 };
 
-const addTrackToPeerConnection = function(pc, stream, track, encodings) {
+const addTrackToPeerConnection = function (pc, stream, track, encodings) {
     pc.addTransceiver(track, {
         direction: "sendonly",
         streams: [stream],
@@ -444,7 +441,7 @@ const buttonText = function (string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-const getOtherState = function(state) {
+const getOtherState = function (state) {
     if (state.is(PUBLISH)) {
         return playState;
     } else if (state.is(PLAY)) {

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

@@ -13,7 +13,7 @@ const CurrentState = function() {
         pc: null,
         session: null,
         room: null,
-        remoteDisplay: null,
+        display: null,
         roomEnded: false,
         set: function(pc, session, room) {
             state.pc = pc;
@@ -39,13 +39,13 @@ const CurrentState = function() {
         isActive: function() {
             return (state.room && !state.roomEnded && state.pc);
         },
-        setDisplay: function(display) {
-            state.remoteDisplay = display;
+        setDisplay: function (display) {
+            state.display = display;
         },
-        disposeDisplay: function() {
-            if (state.remoteDisplay) {
-                state.remoteDisplay.stop();
-                state.remoteDisplay = null;
+        disposeDisplay: function () {
+            if (state.display) {
+                state.display.stop();
+                state.display = null;
             }
         }
     };
@@ -192,24 +192,17 @@ const onOperationFailed = function(state, event) {
     onStopClick(state);
 }
 
-const playStreams = async function(state) {
+const playStreams = async function (state) {
     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
-            }
-        }));
+        const display = initRemoteDisplay(state.room, document.getElementById("remoteVideo"), {quality:true, autoAbr: true}, {thresholds: [
+            {parameter: "nackCount", maxLeap: 10},
+        {parameter: "freezeCount", maxLeap: 10},
+        {parameter: "packetsLost", maxLeap: 10}
+    ], abrKeepOnGoodQuality: ABR_KEEP_ON_QUALITY, abrTryForUpperQuality: ABR_TRY_UPPER_QUALITY, interval: ABR_QUALITY_CHECK_PERIOD},createDefaultMeetingController, createDefaultMeetingModel, createDefaultMeetingView, oneToOneParticipantFactory(remoteTrackProvider(state.room)));
+        state.setDisplay(display);
         // Start WebRTC negotiation
-        await state.room.join(state.pc);
+        await state.room.join(state.pc, null, null, 1);
     } catch(e) {
         if (e.type === constants.SFU_ROOM_EVENT.OPERATION_FAILED) {
             onOperationFailed(state, e);
@@ -222,7 +215,7 @@ const playStreams = async function(state) {
 
 }
 
-const stopStreams = function(state) {
+const stopStreams = function (state) {
     state.disposeDisplay();
 }