@flashphoner/sfusdk-examples 2.0.56

package/src/controller/test-data.js

@@ -0,0 +1,382 @@
+'use strict'
+
+const testStats = {
+    "participants": [
+        {
+            "nickName": "Alice",
+            "outgoingTracks": [
+                {
+                    "id": "60bbba84-6b95-4d7f-a8b9-5d38bf972605",
+                    "composite": true,
+                    "tracks": {
+                        "h send": {
+                            "id": "60bbba84-6b95-4d7f-a8b9-5d38bf972605",
+                            "codec": "VP8",
+                            "width": 960,
+                            "height": 540,
+                            "fps": 12,
+                            "bitrate": 544816,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "m send": {
+                            "id": "60bbba84-6b95-4d7f-a8b9-5d38bf972605",
+                            "codec": "VP8",
+                            "width": 480,
+                            "height": 270,
+                            "fps": 13,
+                            "bitrate": 275872,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "l send": {
+                            "id": "60bbba84-6b95-4d7f-a8b9-5d38bf972605",
+                            "codec": "VP8",
+                            "width": 240,
+                            "height": 135,
+                            "fps": 13,
+                            "bitrate": 89896,
+                            "alive": true,
+                            "type": "VIDEO"
+                        }
+                    }
+                },
+                {
+                    "id": "b770d6fd-75e5-42df-8be0-2a025a75d56d",
+                    "codec": "opus",
+                    "bitrate": 0,
+                    "sampleRate": 48000,
+                    "channels": 2,
+                    "alive": true,
+                    "type": "AUDIO"
+                }
+            ],
+            "incomingTracks": {
+                "88b683fc-b972-436f-9a25-b1cba4af61b1": "m send",
+                "a112614e-3af1-430e-b364-5b6d75ce3059": null,
+                "4d1ece4d-5b75-4816-afd4-dd66a733c091": null,
+                "f5dc9935-3944-407f-83ec-10ab74559c07": "m send",
+                "319b4b8a-e963-474c-b93e-9d7f06af996e": null,
+                "84d158e7-5870-4f62-8f82-a0a77a351a8e": null,
+                "1bd17c9a-7b6f-4733-9d07-9d54375854cb": "l send",
+                "47997f18-ab1e-414a-b792-095d6d52a407": null,
+                "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2": "l send",
+                "924a313f-c8b2-4340-8976-c695d00ab0db": "h send"
+            }
+        },
+        {
+            "nickName": "Bob",
+            "outgoingTracks": [
+                {
+                    "id": "924a313f-c8b2-4340-8976-c695d00ab0db",
+                    "composite": true,
+                    "tracks": {
+                        "h send": {
+                            "id": "924a313f-c8b2-4340-8976-c695d00ab0db",
+                            "codec": "VP8",
+                            "width": 1280,
+                            "height": 720,
+                            "fps": 9,
+                            "bitrate": 502344,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "m send": {
+                            "id": "924a313f-c8b2-4340-8976-c695d00ab0db",
+                            "codec": "VP8",
+                            "width": 640,
+                            "height": 360,
+                            "fps": 10,
+                            "bitrate": 246360,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "l send": {
+                            "id": "924a313f-c8b2-4340-8976-c695d00ab0db",
+                            "codec": "VP8",
+                            "width": 320,
+                            "height": 180,
+                            "fps": 10,
+                            "bitrate": 83008,
+                            "alive": true,
+                            "type": "VIDEO"
+                        }
+                    }
+                },
+                {
+                    "id": "a112614e-3af1-430e-b364-5b6d75ce3059",
+                    "codec": "opus",
+                    "bitrate": 0,
+                    "sampleRate": 48000,
+                    "channels": 2,
+                    "alive": true,
+                    "type": "AUDIO"
+                }
+            ],
+            "incomingTracks": {
+                "88b683fc-b972-436f-9a25-b1cba4af61b1": "m send",
+                "4d1ece4d-5b75-4816-afd4-dd66a733c091": null,
+                "f5dc9935-3944-407f-83ec-10ab74559c07": "m send",
+                "319b4b8a-e963-474c-b93e-9d7f06af996e": null,
+                "84d158e7-5870-4f62-8f82-a0a77a351a8e": null,
+                "b770d6fd-75e5-42df-8be0-2a025a75d56d": null,
+                "60bbba84-6b95-4d7f-a8b9-5d38bf972605": "l send",
+                "1bd17c9a-7b6f-4733-9d07-9d54375854cb": "l send",
+                "47997f18-ab1e-414a-b792-095d6d52a407": null,
+                "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2": "l send"
+            }
+        },
+        {
+            "nickName": "Alex",
+            "outgoingTracks": [
+                {
+                    "id": "319b4b8a-e963-474c-b93e-9d7f06af996e",
+                    "codec": "opus",
+                    "bitrate": 0,
+                    "sampleRate": 48000,
+                    "channels": 2,
+                    "alive": true,
+                    "type": "AUDIO"
+                },
+                {
+                    "id": "f5dc9935-3944-407f-83ec-10ab74559c07",
+                    "composite": true,
+                    "tracks": {
+                        "h send": {
+                            "id": "f5dc9935-3944-407f-83ec-10ab74559c07",
+                            "codec": "VP8",
+                            "width": 960,
+                            "height": 540,
+                            "fps": 12,
+                            "bitrate": 566264,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "m send": {
+                            "id": "f5dc9935-3944-407f-83ec-10ab74559c07",
+                            "codec": "VP8",
+                            "width": 480,
+                            "height": 270,
+                            "fps": 13,
+                            "bitrate": 283312,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "l send": {
+                            "id": "f5dc9935-3944-407f-83ec-10ab74559c07",
+                            "codec": "VP8",
+                            "width": 240,
+                            "height": 135,
+                            "fps": 12,
+                            "bitrate": 79000,
+                            "alive": true,
+                            "type": "VIDEO"
+                        }
+                    }
+                }
+            ],
+            "incomingTracks": {
+                "88b683fc-b972-436f-9a25-b1cba4af61b1": "h send",
+                "4d1ece4d-5b75-4816-afd4-dd66a733c091": null,
+                "a112614e-3af1-430e-b364-5b6d75ce3059": null,
+                "84d158e7-5870-4f62-8f82-a0a77a351a8e": null,
+                "b770d6fd-75e5-42df-8be0-2a025a75d56d": null,
+                "60bbba84-6b95-4d7f-a8b9-5d38bf972605": "h send",
+                "1bd17c9a-7b6f-4733-9d07-9d54375854cb": "l send",
+                "47997f18-ab1e-414a-b792-095d6d52a407": null,
+                "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2": "h send",
+                "924a313f-c8b2-4340-8976-c695d00ab0db": "h send"
+            }
+        },
+        {
+            "nickName": "Kiri",
+            "outgoingTracks": [
+                {
+                    "id": "1bd17c9a-7b6f-4733-9d07-9d54375854cb",
+                    "composite": true,
+                    "tracks": {
+                        "h send": {
+                            "id": "1bd17c9a-7b6f-4733-9d07-9d54375854cb",
+                            "codec": "VP8",
+                            "width": 0,
+                            "height": 0,
+                            "fps": 0,
+                            "bitrate": 0,
+                            "alive": false,
+                            "type": "VIDEO"
+                        },
+                        "m send": {
+                            "id": "1bd17c9a-7b6f-4733-9d07-9d54375854cb",
+                            "codec": "VP8",
+                            "width": 640,
+                            "height": 360,
+                            "fps": 15,
+                            "bitrate": 287936,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "l send": {
+                            "id": "1bd17c9a-7b6f-4733-9d07-9d54375854cb",
+                            "codec": "VP8",
+                            "width": 320,
+                            "height": 180,
+                            "fps": 15,
+                            "bitrate": 107712,
+                            "alive": true,
+                            "type": "VIDEO"
+                        }
+                    }
+                },
+                {
+                    "id": "84d158e7-5870-4f62-8f82-a0a77a351a8e",
+                    "codec": "opus",
+                    "bitrate": 0,
+                    "sampleRate": 48000,
+                    "channels": 2,
+                    "alive": true,
+                    "type": "AUDIO"
+                }
+            ],
+            "incomingTracks": {
+                "88b683fc-b972-436f-9a25-b1cba4af61b1": "h send",
+                "4d1ece4d-5b75-4816-afd4-dd66a733c091": null,
+                "a112614e-3af1-430e-b364-5b6d75ce3059": null,
+                "f5dc9935-3944-407f-83ec-10ab74559c07": "h send",
+                "319b4b8a-e963-474c-b93e-9d7f06af996e": null,
+                "b770d6fd-75e5-42df-8be0-2a025a75d56d": null,
+                "60bbba84-6b95-4d7f-a8b9-5d38bf972605": "h send",
+                "47997f18-ab1e-414a-b792-095d6d52a407": null,
+                "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2": "h send",
+                "924a313f-c8b2-4340-8976-c695d00ab0db": "h send"
+            }
+        },
+        {
+            "nickName": "Margaret",
+            "outgoingTracks": [
+                {
+                    "id": "47997f18-ab1e-414a-b792-095d6d52a407",
+                    "codec": "opus",
+                    "bitrate": 0,
+                    "sampleRate": 48000,
+                    "channels": 2,
+                    "alive": true,
+                    "type": "AUDIO"
+                },
+                {
+                    "id": "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2",
+                    "composite": true,
+                    "tracks": {
+                        "h send": {
+                            "id": "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2",
+                            "codec": "VP8",
+                            "width": 1280,
+                            "height": 720,
+                            "fps": 11,
+                            "bitrate": 511408,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "m send": {
+                            "id": "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2",
+                            "codec": "VP8",
+                            "width": 640,
+                            "height": 360,
+                            "fps": 11,
+                            "bitrate": 243616,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "l send": {
+                            "id": "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2",
+                            "codec": "VP8",
+                            "width": 320,
+                            "height": 180,
+                            "fps": 11,
+                            "bitrate": 79840,
+                            "alive": true,
+                            "type": "VIDEO"
+                        }
+                    }
+                }
+            ],
+            "incomingTracks": {
+                "88b683fc-b972-436f-9a25-b1cba4af61b1": "h send",
+                "4d1ece4d-5b75-4816-afd4-dd66a733c091": null,
+                "a112614e-3af1-430e-b364-5b6d75ce3059": null,
+                "f5dc9935-3944-407f-83ec-10ab74559c07": "m send",
+                "319b4b8a-e963-474c-b93e-9d7f06af996e": null,
+                "84d158e7-5870-4f62-8f82-a0a77a351a8e": null,
+                "b770d6fd-75e5-42df-8be0-2a025a75d56d": null,
+                "60bbba84-6b95-4d7f-a8b9-5d38bf972605": "h send",
+                "1bd17c9a-7b6f-4733-9d07-9d54375854cb": "l send",
+                "924a313f-c8b2-4340-8976-c695d00ab0db": "h send"
+            }
+        },
+        {
+            "nickName": "John",
+            "outgoingTracks": [
+                {
+                    "id": "88b683fc-b972-436f-9a25-b1cba4af61b1",
+                    "composite": true,
+                    "tracks": {
+                        "h send": {
+                            "id": "88b683fc-b972-436f-9a25-b1cba4af61b1",
+                            "codec": "VP8",
+                            "width": 960,
+                            "height": 540,
+                            "fps": 10,
+                            "bitrate": 489040,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "m send": {
+                            "id": "88b683fc-b972-436f-9a25-b1cba4af61b1",
+                            "codec": "VP8",
+                            "width": 480,
+                            "height": 270,
+                            "fps": 12,
+                            "bitrate": 277760,
+                            "alive": true,
+                            "type": "VIDEO"
+                        },
+                        "l send": {
+                            "id": "88b683fc-b972-436f-9a25-b1cba4af61b1",
+                            "codec": "VP8",
+                            "width": 240,
+                            "height": 135,
+                            "fps": 12,
+                            "bitrate": 90880,
+                            "alive": true,
+                            "type": "VIDEO"
+                        }
+                    }
+                },
+                {
+                    "id": "4d1ece4d-5b75-4816-afd4-dd66a733c091",
+                    "codec": "opus",
+                    "bitrate": 0,
+                    "sampleRate": 48000,
+                    "channels": 2,
+                    "alive": true,
+                    "type": "AUDIO"
+                }
+            ],
+            "incomingTracks": {
+                "a112614e-3af1-430e-b364-5b6d75ce3059": null,
+                "f5dc9935-3944-407f-83ec-10ab74559c07": "m send",
+                "319b4b8a-e963-474c-b93e-9d7f06af996e": null,
+                "84d158e7-5870-4f62-8f82-a0a77a351a8e": null,
+                "b770d6fd-75e5-42df-8be0-2a025a75d56d": null,
+                "60bbba84-6b95-4d7f-a8b9-5d38bf972605": "h send",
+                "1bd17c9a-7b6f-4733-9d07-9d54375854cb": "l send",
+                "47997f18-ab1e-414a-b792-095d6d52a407": null,
+                "923bdbcc-8b3e-42f1-9d25-561c3c3b0bf2": "l send",
+                "924a313f-c8b2-4340-8976-c695d00ab0db": "h send"
+            }
+        }
+    ]
+}
+
+module.exports = {
+    testStats: testStats
+}

package/src/player/config.json

@@ -0,0 +1,8 @@
+{
+  "room": {
+    "url": "ws://127.0.0.1:8080",
+    "name": "ROOM1",
+    "pin": "1234",
+    "nickName": "User1"
+  }
+}

package/src/player/player.css

@@ -0,0 +1,19 @@
+video, object {
+    width: 100%;
+    height: 100%;
+}
+
+.display {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+
+.display > video, object {
+    width: 100%;
+    height: 100%;
+}
+
+video:-webkit-full-screen {
+    border-radius: 1px;
+}

package/src/player/player.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SFU Player</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+            crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
+    <link rel="stylesheet" href="player.css">
+    <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/display.js"></script>
+    <script type="text/javascript" src="player.js"></script>
+</head>
+<body onload="init()">
+<div class="container" id="main">
+    <div class="col-sm-12">
+        <h2 class="text-center">SFU Player</h2>
+
+        <div class="row col-sm-12 justify-content-center">
+            <div id="connectionForm" class="col-sm-6 text-center">
+                <label for="url" class="control-label">Server url</label>
+                <input class="form-control" id="url" type="text">
+                <label for="roomName" class="control-label">Room name</label>
+                <input class="form-control" id="roomName" type="text">
+            </div>
+        </div>
+        <div class="row col-sm-12 justify-content-center" style="margin-top: 10px;">
+            <div class="col-sm-6 text-center">
+                <div class="text-center text-muted">Player</div>
+                <div id="playForm" class="input-group col-sm-5" style="margin-top: 10px;">
+                    <input class="form-control" id="playName" type="text" style="height: 30px;" placeholder="Player name">
+                    <div class="input-group-btn">
+                        <button id="playBtn" type="button" style="height: 30px;; width: auto;">Play</button>
+                    </div>
+                </div>
+                <div class="text-center" style="margin-top: 20px">
+                    <div id="playStatus"></div>
+                    <div id="playErrorInfo"></div>
+                </div>
+            </div>
+        </div>
+        <div class="row col-sm-12 justify-content-center" style="margin-top: 10px">
+            <div id="remoteVideo" class="col-sm-6 justify-content-center"></div>
+        </div>
+</div>
+</body>
+</html>

package/src/player/player.js

@@ -0,0 +1,209 @@
+const constants = SFU.constants;
+const sfu = SFU;
+let mainConfig;
+let remoteDisplay;
+let playState;
+const PLAY = "play";
+const STOP = "stop";
+const PRELOADER_URL="../commons/media/silence.mp3"
+
+/**
+ * Default publishing config
+ */
+const defaultConfig = {
+    room: {
+        url: "ws://127.0.0.1:8080",
+        name: "ROOM1",
+        pin: "1234",
+        nickName: "User1"
+    }
+};
+
+/**
+ * Current state object
+ */
+const CurrentState = function(prefix) {
+    let state = {
+        prefix: prefix,
+        pc: null,
+        session: null,
+        room: null,
+        set: function(pc, session, room) {
+            state.pc = pc;
+            state.session = session;
+            state.room = room;
+        },
+        clear: function() {
+            state.room = null;
+            state.session = null;
+            state.pc = null;
+        },
+        buttonId: function() {
+            return state.prefix + "Btn";
+        },
+        buttonText: function() {
+            return (state.prefix.charAt(0).toUpperCase() + state.prefix.slice(1));
+        },
+        inputId: function() {
+            return state.prefix + "Name";
+        },
+        statusId: function() {
+            return state.prefix + "Status";
+        },
+        formId: function() {
+            return state.prefix + "Form";
+        },
+        errInfoId: function() {
+            return state.prefix + "ErrorInfo";
+        },
+        is: function(value) {
+            return (prefix === value);
+        }
+    };
+    return state;
+}
+
+/**
+ * load config and set default values
+ */
+const init = function() {
+    let configName = getUrlParam("config") || "./config.json";
+    $("#playBtn").prop('disabled', true);
+    $("#url").prop('disabled', true);
+    $("#roomName").prop('disabled', true);
+    $("#playName").prop('disabled', true);
+    playState = CurrentState(PLAY);
+    $.getJSON(configName, function(cfg){
+        mainConfig = cfg;
+        onDisconnected(playState);
+    }).fail(function(e){
+        //use default config
+        console.error("Error reading configuration file " + configName + ": " + e.status + " " + e.statusText)
+        console.log("Default config will be used");
+        mainConfig = defaultConfig;
+        onDisconnected(playState);
+    });
+    $("#url").val(setURL());
+    $("#roomName").val("ROOM1-"+createUUID(4));
+    $("#playName").val("Player1-"+createUUID(4));
+}
+
+/**
+ * connect to server
+ */
+const connect = function(state) {
+    //create peer connection
+    pc = new RTCPeerConnection();
+    //get config object for room creation
+    const roomConfig = getRoomConfig(mainConfig);
+    roomConfig.pc = pc;
+    roomConfig.url = $("#url").val();
+    roomConfig.roomName = $("#roomName").val();
+    roomConfig.nickname = $("#" + state.inputId()).val();
+    // clean state display items
+    setStatus(state.statusId(), "");
+    setStatus(state.errInfoId(), "");
+    // connect to server and create a room if not
+    const session = sfu.createRoom(roomConfig);
+    session.on(constants.SFU_EVENT.CONNECTED, function() {
+        state.set(pc, session, session.room());
+        onConnected(state);
+        setStatus(state.statusId(), "ESTABLISHED", "green");
+    }).on(constants.SFU_EVENT.DISCONNECTED, function() {
+        state.clear();
+        onDisconnected(state);
+        setStatus(state.statusId(), "DISCONNECTED", "green");
+    }).on(constants.SFU_EVENT.FAILED, function(e) {
+        state.clear();
+        onDisconnected(state);
+        setStatus(state.statusId(), "FAILED", "red");
+        setStatus(state.errInfoId(), e.status + " " + e.statusText, "red");
+    });
+}
+
+const onConnected = 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");
+    }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
+        setStatus(state.errInfoId(), e.operation + " failed: " + e.error, "red");
+    });
+    playStreams(state);
+}
+
+const onDisconnected = function(state) {
+    $("#" + state.buttonId()).text(state.buttonText()).off('click').click(function () {
+        onStartClick(state);
+    }).prop('disabled', false);
+    $('#url').prop('disabled', false);
+    $("#roomName").prop('disabled', false);
+    $("#" + state.inputId()).prop('disabled', false);
+}
+
+const onStartClick = function(state) {
+    if (validateForm("connectionForm") && validateForm(state.formId())) {
+        $("#" + state.buttonId()).prop('disabled', true);
+        if (state.is(PLAY) && Browser().isSafariWebRTC()) {
+            playFirstSound(document.getElementById("main"), PRELOADER_URL).then(function () {
+                connect(state);
+            });
+        } else {
+            connect(state);
+        }
+    }
+}
+
+const onStopClick = function(state) {
+    $("#" + state.buttonId()).prop('disabled', true);
+    stopStreams(state);
+    state.session.disconnect();
+}
+
+const playStreams = function(state) {
+    //create remote display item to show remote streams
+    remoteDisplay = initRemoteDisplay(document.getElementById("remoteVideo"), state.room, state.pc);
+    state.room.join();
+}
+
+const stopStreams = function(state) {
+    if (remoteDisplay) {
+        remoteDisplay.stop();
+    }
+}
+
+const setStatus = function (status, text, color) {
+    const errField = document.getElementById(status);
+    errField.style.color = color;
+    errField.innerText = text;
+}
+
+const validateForm = function (formId) {
+    var valid = true;
+    $('#' + formId + ' :text').each(function () {
+        if (!$(this).val()) {
+            highlightInput($(this));
+            valid = false;
+        } else {
+            removeHighlight($(this));
+        }
+    });
+    return valid;
+
+    function highlightInput(input) {
+        input.closest('.input-group').addClass("has-error");
+    }
+
+    function removeHighlight(input) {
+        input.closest('.input-group').removeClass("has-error");
+    }
+}
+
+const buttonText = function (string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}