npm - @flashphoner/sfusdk-examples - Versions diffs - 2.0.56 - Mend

@flashphoner/sfusdk-examples 2.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +43 -0
package/package.json +32 -0
package/src/client/chat.js +67 -0
package/src/client/config.json +26 -0
package/src/client/controls.js +314 -0
package/src/client/display.js +502 -0
package/src/client/main.css +45 -0
package/src/client/main.html +220 -0
package/src/client/main.js +157 -0
package/src/client/resources/details_close.png +0 -0
package/src/client/resources/details_open.png +0 -0
package/src/client/util.js +67 -0
package/src/commons/js/config.js +81 -0
package/src/commons/js/display.js +484 -0
package/src/commons/js/util.js +202 -0
package/src/commons/media/silence.mp3 +0 -0
package/src/controller/dependencies/sigma/sigma.renderers.edgeLabels.min.js +1 -0
package/src/controller/dependencies/sigma/sigma.renderers.parallelEdges.min.js +1 -0
package/src/controller/dependencies/sigma/sigma.require.js +12076 -0
package/src/controller/graph-view.js +32 -0
package/src/controller/main.css +45 -0
package/src/controller/main.html +79 -0
package/src/controller/main.js +65 -0
package/src/controller/parser.js +202 -0
package/src/controller/resources/details_close.png +0 -0
package/src/controller/resources/details_open.png +0 -0
package/src/controller/rest.js +56 -0
package/src/controller/table-view.js +64 -0
package/src/controller/test-data.js +382 -0
package/src/player/config.json +8 -0
package/src/player/player.css +19 -0
package/src/player/player.html +54 -0
package/src/player/player.js +209 -0
package/src/sfu.ts +28 -0
package/src/two-way-streaming/config.json +34 -0
package/src/two-way-streaming/two-way-streaming.css +26 -0
package/src/two-way-streaming/two-way-streaming.html +72 -0
package/src/two-way-streaming/two-way-streaming.js +375 -0
package/tsconfig.json +15 -0
package/webpack.config.js +40 -0

package/src/sfu.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import {Sfu, RoomEvent, SfuEvent, State} from "@flashphoner/sfusdk";
+export function createRoom(options: {
+    url: string,
+    roomName: string,
+    pin: string,
+    nickname: string,
+    pc: RTCPeerConnection
+}) {
+    const sfu = new Sfu();
+    sfu.connect({
+        url: options.url,
+        nickname: options.nickname,
+        logGroup: options.roomName
+    });
+    const room = sfu.createRoom({
+        name: options.roomName,
+        pin: options.pin,
+        pc: options.pc
+    });
+    return sfu;
+}
+export const constants = {
+    SFU_EVENT: SfuEvent,
+    SFU_ROOM_EVENT: RoomEvent,
+    SFU_STATE: State
+}

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

@@ -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/two-way-streaming/two-way-streaming.css ADDED Viewed

@@ -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/two-way-streaming/two-way-streaming.html ADDED Viewed

@@ -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>

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

@@ -0,0 +1,375 @@
+const constants = SFU.constants;
+const sfu = SFU;
+let mainConfig;
+let localDisplay;
+let remoteDisplay;
+let publishState;
+let playState;
+const PUBLISH = "publish";
+const PLAY = "play";
+const STOP = "stop";
+const PRELOADER_URL="../commons/media/silence.mp3"
+/**
+ * Default publishing config
+ */
+const defaultConfig = {
+    room: {
+        url: "wss://127.0.0.1:8888",
+        name: "ROOM1",
+        pin: "1234",
+        nickName: "User1"
+    },
+    media: {
+        audio: {
+            tracks: [
+                {
+                    source: "mic",
+                    channels: 1
+                }
+            ]
+        },
+        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 }
+                    ]
+                }
+            ]
+        }
+    }
+};
+/**
+ * Current state object
+ */
+const CurrentState = function(prefix) {
+    let state = {
+        prefix: prefix,
+        pc: null,
+        session: null,
+        room: null,
+        timer: null,
+        set: function(pc, session, room) {
+            state.pc = pc;
+            state.session = session;
+            state.room = room;
+        },
+        clear: function() {
+            state.stopWaiting();
+            state.room = null;
+            state.session = null;
+            state.pc = null;
+        },
+        waitFor: function(div, timeout) {
+            state.stopWaiting();
+            state.timer = setTimeout(function () {
+                if (div.innerHTML !== "") {
+                    // Enable stop button
+                    $("#" + state.buttonId()).prop('disabled', false);
+                }
+                else if (state.isConnected()) {
+                    setStatus(state.errInfoId(), "No media capturing started in " + timeout + " ms, stopping", "red");
+                    onStopClick(state);
+                }
+            }, timeout);
+        },
+        stopWaiting: function() {
+            if (state.timer) {
+                clearTimeout(state.timer);
+                state.timer = null;
+            }
+        },
+        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);
+        },
+        isActive: function() {
+            return (state.room && state.pc);
+        },
+        isConnected: function() {
+            return (state.session && state.session.state() == constants.SFU_STATE.CONNECTED);
+        }
+    };
+    return state;
+}
+/**
+ * load config and set default values
+ */
+const init = function() {
+    let configName = getUrlParam("config") || "./config.json";
+    $("#publishBtn").prop('disabled', true);
+    $("#playBtn").prop('disabled', true);
+    $("#url").prop('disabled', true);
+    $("#roomName").prop('disabled', true);
+    $("#publishName").prop('disabled', true);
+    $("#playName").prop('disabled', true);
+    publishState = CurrentState(PUBLISH);
+    playState = CurrentState(PLAY);
+    $.getJSON(configName, function(cfg){
+        mainConfig = cfg;
+        onDisconnected(publishState);
+        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(publishState);
+        onDisconnected(playState);
+    });
+    $("#url").val(setURL());
+    $("#roomName").val("ROOM1-"+createUUID(4));
+    $("#publishName").val("Publisher1-"+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);
+    });
+    $('#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");
+        stopStreaming(state);
+    }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
+        setStatus(state.errInfoId(), e.operation + " failed: " + e.error, "red");
+        stopStreaming(state);
+    });
+    startStreaming(state);
+}
+const onDisconnected = function(state) {
+    $("#" + state.buttonId()).text(state.buttonText()).off('click').click(function () {
+        onStartClick(state);
+    }).prop('disabled', false);
+    $("#" + state.inputId()).prop('disabled', false);
+    // Check if other session is active
+    if ((state.is(PUBLISH) && playState.session)
+       || (state.is(PLAY) && publishState.session)) {
+        return;
+    }
+    $('#url').prop('disabled', false);
+    $("#roomName").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);
+    stopStreaming(state);
+    if (state.isConnected()) {
+        state.session.disconnect();
+    }
+}
+const startStreaming = function(state) {
+    if (state.is(PUBLISH)) {
+        publishStreams(state);
+    } else if (state.is(PLAY)) {
+        playStreams(state);
+    }
+}
+const stopStreaming = function(state) {
+    state.stopWaiting();
+    if (state.is(PUBLISH)) {
+        unPublishStreams(state);
+    } else if (state.is(PLAY)) {
+        stopStreams(state);
+    }
+}
+const publishStreams = async function(state) {
+    if (state.isConnected()) {
+        //create local display item to show local streams
+        localDisplay = initLocalDisplay(document.getElementById("localVideo"));
+        try {
+            //get configured local video streams
+            let streams = await getVideoStreams(mainConfig);
+            let audioStreams = await getAudioStreams(mainConfig);
+            if (state.isConnected() && state.isActive()) {
+                //combine local video streams with audio streams
+                streams.push.apply(streams, audioStreams);
+                let config = {};
+                //add our local streams to the room (to PeerConnection)
+                streams.forEach(function (s) {
+                    //add local stream to local display
+                    localDisplay.add(s.stream.id, $("#" + state.inputId()).val(), s.stream);
+                    //add each track to PeerConnection
+                    s.stream.getTracks().forEach((track) => {
+                        if (s.source === "screen") {
+                            config[track.id] = s.source;
+                        }
+                        addTrackToPeerConnection(state.pc, s.stream, track, s.encodings);
+                        subscribeTrackToEndedEvent(state.room, track, state.pc);
+                    });
+                });
+                state.room.join(config);
+                // TODO: Use room state or promises to detect if publishing started to enable stop button
+                state.waitFor(document.getElementById("localVideo"), 3000);
+            }
+        } catch(e) {
+            console.error("Failed to capture streams: " + e);
+            setStatus(state.errInfoId(), e.name, "red");
+            state.stopWaiting();
+            if (state.isConnected()) {
+                onStopClick(state);
+            }
+        }
+    }
+}
+const unPublishStreams = function(state) {
+    if (localDisplay) {
+        localDisplay.stop();
+    }
+}
+const playStreams = function(state) {
+    if (state.isConnected() && state.isActive()) {
+        //create remote display item to show remote streams
+        remoteDisplay = initRemoteDisplay(document.getElementById("remoteVideo"), state.room, state.pc);
+        state.room.join();
+    }
+    $("#" + state.buttonId()).prop('disabled', false);
+}
+const stopStreams = function(state) {
+    if (remoteDisplay) {
+        remoteDisplay.stop();
+    }
+}
+const subscribeTrackToEndedEvent = function(room, track, pc) {
+    track.addEventListener("ended", function() {
+        //track ended, see if we need to cleanup
+        let negotiate = false;
+        for (const sender of pc.getSenders()) {
+            if (sender.track === track) {
+                pc.removeTrack(sender);
+                //track found, set renegotiation flag
+                negotiate = true;
+                break;
+            }
+        }
+        if (negotiate) {
+            //kickoff renegotiation
+            room.updateState();
+        }
+    });
+};
+const addTrackToPeerConnection = function(pc, stream, track, encodings) {
+    pc.addTransceiver(track, {
+        direction: "sendonly",
+        streams: [stream],
+        sendEncodings: encodings ? encodings : [] //passing encoding types for video simulcast tracks
+    });
+}
+const setStatus = function (status, text, color) {
+    const field = document.getElementById(status);
+    if (color) {
+        field.style.color = color;
+    }
+    field.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/tsconfig.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2015",
+    "lib": [ "es2015", "dom" ],
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "./dist"
+  },
+  "include": [
+    "./src/**/*"
+  ]
+}

package/webpack.config.js ADDED Viewed

@@ -0,0 +1,40 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+module.exports = {
+    entry: path.resolve(__dirname, 'src/sfu.ts'),
+    module: {
+        rules: [
+            {
+                test: /\.ts?$/,
+                loader: 'ts-loader'
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'sfu.js',
+        library: "SFU",
+        libraryTarget: "var",
+        globalObject: "global",
+        path: path.resolve(__dirname, 'dist'),
+    },
+    plugins: [
+        new CopyWebpackPlugin({
+            patterns: [
+                { from: path.resolve(__dirname, "src/**/*"),
+                  to({ context, absoluteFilename }) {
+                     return `${path.relative(context, absoluteFilename).replace(/^src\//g, "")}`;
+                  },
+                  info: { minimized: false },
+                  globOptions: {
+                     ignore: [ "**/*.ts" ]
+                  }
+                }
+            ],
+        })
+    ]
+};