@flashphoner/sfusdk 1.0.1-35 → 1.0.40

package/src/examples/commons/js/util.js

@@ -0,0 +1,202 @@
+const stripCodecs = function(sdp, codecs) {
+    if (!codecs.length) return sdp;
+    var sdpArray = sdp.split("\n");
+    var codecsArray = codecs.split(",");
+
+    //search and delete codecs line
+    var pt = [];
+    var i;
+    for (var p = 0; p < codecsArray.length; p++) {
+        console.log("Searching for codec " + codecsArray[p]);
+        for (i = 0; i < sdpArray.length; i++) {
+            if (sdpArray[i].search(new RegExp(codecsArray[p],'i')) !== -1 && sdpArray[i].indexOf("a=rtpmap") === 0) {
+                console.log(codecsArray[p] + " detected");
+                pt.push(sdpArray[i].match(/[0-9]+/)[0]);
+                sdpArray[i] = "";
+            }
+        }
+    }
+    if (pt.length) {
+        //searching for fmtp
+        for (p = 0; p < pt.length; p++) {
+            for (i = 0; i < sdpArray.length; i++) {
+                if (sdpArray[i].search("a=fmtp:" + pt[p]) !== -1 || sdpArray[i].search("a=rtcp-fb:" + pt[p]) !== -1) {
+                    sdpArray[i] = "";
+                }
+            }
+        }
+
+        //delete entries from m= line
+        for (i = 0; i < sdpArray.length; i++) {
+            if (sdpArray[i].search("m=audio") !== -1 || sdpArray[i].search("m=video") !== -1) {
+                var mLineSplitted = sdpArray[i].split(" ");
+                var newMLine = "";
+                for (var m = 0; m < mLineSplitted.length; m++) {
+                    if (pt.indexOf(mLineSplitted[m].trim()) === -1 || m <= 2) {
+                        newMLine += mLineSplitted[m];
+                        if (m < mLineSplitted.length - 1) {
+                            newMLine = newMLine + " ";
+                        }
+                    }
+                }
+                sdpArray[i] = newMLine;
+            }
+        }
+    }
+
+    //normalize sdp after modifications
+    var result = "";
+    for (i = 0; i < sdpArray.length; i++) {
+        if (sdpArray[i] !== "") {
+            result += sdpArray[i] + "\n";
+        }
+    }
+    return result;
+}
+
+const stripVideoCodecsExcept = function (sdp, codec) {
+    let actualStripCodec = "rtx";
+    if (codec === "VP8") {
+        actualStripCodec += ",H264";
+    } else if (codec === "H264") {
+        actualStripCodec += ",VP8";
+    } else {
+        return sdp;
+    }
+    return stripCodecs(sdp, actualStripCodec);
+}
+
+//Set WCS URL
+const setURL = function () {
+    var proto;
+    var url;
+    var port;
+    if (window.location.protocol == "http:") {
+        proto = "ws://";
+        port = "8080";
+    } else {
+        proto = "wss://";
+        port = "8443";
+    }
+
+    url = proto + window.location.hostname + ":" + port;
+    return url;
+}
+
+// Get URL parameter
+const getUrlParam = function (name) {
+    var url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+// Generate simple uuid
+const createUUID = function (length) {
+    var s = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = "-";
+
+    var uuid = s.join("");
+
+    return uuid.substring(0, length);
+}
+
+const Browser = function() {
+    const isIE = function () {
+        return /*@cc_on!@*/false || !!document.documentMode;
+    }
+
+    const isFirefox = function () {
+        return typeof InstallTrigger !== 'undefined';
+    }
+
+    const isChrome = function () {
+        return !!window.chrome && /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent);
+    }
+
+    const isEdge =  function () {
+        return !this.isIE() && !!window.StyleMedia;
+    }
+
+    const isOpera = function () {
+        return (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+    }
+
+    const isiOS = function () {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    }
+
+    const isSafari = function () {
+        let userAgent = navigator.userAgent.toLowerCase();
+        return /(safari|applewebkit)/i.test(userAgent) && !userAgent.includes("chrome") && !userAgent.includes("android");
+    }
+
+    const isAndroid = function () {
+        return navigator.userAgent.toLowerCase().indexOf("android") > -1;
+    }
+
+    const isSafariWebRTC = function () {
+        return navigator.mediaDevices && this.isSafari();
+    }
+    
+    const isSamsungBrowser = function () {
+        return /SamsungBrowser/i.test(navigator.userAgent);
+    }
+
+    const isAndroidFirefox = function () {
+        return this.isAndroid() && /Firefox/i.test(navigator.userAgent);
+    }
+
+    const isMobile = function () {
+        return this.isAndroid() || this.isiOS();
+    }
+    
+    return {
+        isIE: isIE,
+        isFirefox: isFirefox,
+        isChrome: isChrome,
+        isEdge: isEdge,
+        isOpera: isOpera,
+        isSafari: isSafari,
+        isSafariWebRTC: isSafariWebRTC,
+        isSamsungBrowser: isSamsungBrowser,
+        isAndroid: isAndroid,
+        isiOS: isiOS,
+        isAndroidFirefox: isAndroidFirefox,
+        isMobile: isMobile
+    }
+}
+
+
+const playFirstSound = function (parent, preloader) {
+    return new Promise(function (resolve, reject) {
+        let audio = document.createElement("audio");
+        audio.controls = "controls";
+        audio.muted = true;
+        audio.hidden = true;
+        audio.preload = "auto";
+        audio.type="audio/mpeg";
+        if (preloader) {
+            audio.src = preloader;
+            parent.appendChild(audio);
+            audio.play().then(function() {
+                audio.remove();
+                resolve();
+            }).catch(function (e) {
+                console.error("Can't play preloader: " + e);
+                reject();
+            });
+            return;
+        }
+        resolve();
+    });
+}

package/src/examples/player/config.json

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

package/src/examples/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/examples/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/examples/player/player.js

@@ -0,0 +1,206 @@
+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();
+    // connect to server and create a room if not
+    const session = sfu.createRoom(roomConfig);
+    session.on(constants.SFU_EVENT.CONNECTED, function(room) {
+        state.set(pc, 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);
+}

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

@@ -0,0 +1,34 @@
+{
+  "room": {
+    "url": "ws://127.0.0.1:8080",
+    "name": "ROOM1",
+    "pin": "1234",
+    "nickName": "User1"
+  },
+  "media": {
+    "audio": {
+      "tracks": [{
+        "source": "mic",
+        "channels": 2
+      }]
+    },
+    "video": {
+      "tracks": [
+        {
+          "source": "camera",
+          "width": 1280,
+          "height": 720,
+          "codec": "H264",
+          "constraints": {
+            "frameRate": 25
+          },
+          "encodings": [
+            { "rid": "720p", "active": true, "maxBitrate": 900000 },
+            { "rid": "360p", "active": true, "maxBitrate": 500000, "scaleResolutionDownBy": 2 },
+            { "rid": "180p", "active": true, "maxBitrate": 200000, "scaleResolutionDownBy": 4 }
+          ]
+        }        
+      ]
+    }
+  }
+}

package/src/examples/two-way-streaming/two-way-streaming.css

@@ -0,0 +1,26 @@
+video, object {
+    width: 100%;
+    height: 100%;
+}
+
+.local-video-display {
+    border: 1px solid rgba(0, 0, 0, 0.8);
+    text-align: center;
+    width: 200px;
+    height: auto;
+}
+
+.display {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+
+.display > video, object {
+    width: 100%;
+    height: 100%;
+}
+
+video:-webkit-full-screen {
+    border-radius: 1px;
+}

package/src/examples/two-way-streaming/two-way-streaming.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SFU Two Way Streaming</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="two-way-streaming.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="two-way-streaming.js"></script>
+</head>
+<body onload="init()">
+<div class="container" id="main">
+    <div class="col-sm-12">
+        <h2 class="text-center">SFU Two-way Streaming</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">Publisher</div>
+                <div id="publishForm" class="input-group col-sm-5" style="margin-top: 10px;">
+                    <input class="form-control" id="publishName" type="text" style="height: 30px;" placeholder="Publisher name">
+                    <div class="input-group-btn">
+                        <button id="publishBtn" type="button" style="height: 30px; width: auto;">Publish</button>
+                    </div>
+                </div>
+                <div class="text-center" style="margin-top: 20px">
+                    <div id="publishStatus"></div>
+                    <div id="publishErrorInfo"></div>
+                </div>                
+            </div>
+        </div>
+        <div class="row col-sm-12 justify-content-center" style="margin-top: 10px">
+            <div id="localVideo" class="col-sm-6 justify-content-center"></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>