@flashphoner/sfusdk-examples 2.0.56

package/README.md

@@ -0,0 +1,43 @@
+# @flashphoner/sfusdk
+
+# Flashphoner WebCallServer SFU API (SFU SDK) usage examples
+
+Flashphoner [WebCallServer](https://flashphoner.com) [SFU](https://docs.flashphoner.com/display/WCS52EN/SFU+functions+with+Simulcast) API (SFU SDK) usage examples.
+
+## Get the sources
+
+Install as NPM package
+```
+npm init
+npm install @flashphoner/sfusdk-examples
+cd node_modules/@flashphoner/sfusdk-examples
+```
+
+or download from GitHub
+```
+git clone https://github.com/flashphoner/sfu_sdk.git
+cd sfu_sdk/examples
+```
+
+## Build
+```
+npm install && npm run build
+```
+
+### Deploy to web server
+```
+mkdir -p /var/www/html/flashphoner-sfu-test
+cp -r dist/* /var/www/html/flashphoner-sfu-test
+```
+
+## Documentation
+
+[SFU functions description](https://docs.flashphoner.com/display/WCS52EN/SFU+functions+with+Simulcast)
+
+[SFU SDK documentation](https://docs.flashphoner.com/display/SS1E/SFU+SDK+1.0+-+EN)
+
+[SFU examples description](https://docs.flashphoner.com/display/SS1E/SFU+SDK+Examples)
+
+[API documentation](http://flashphoner.com/docs/api/WCS5/client/sfu-sdk/latest)
+
+

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@flashphoner/sfusdk-examples",
+  "version": "2.0.56",
+  "description": "Official Flashphoner WebCallServer SFU SDK usage examples",
+  "main": "dist/sfu.js",
+  "types": "src/sfu.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist/*",
+    "build": "webpack --mode=production"
+  },
+  "keywords": [
+    "Flashphoner",
+    "WebCallServer",
+    "SFU SDK"
+  ],
+  "author": "Flashphoner",
+  "license": "MIT",
+  "devDependencies": {
+    "@mapbox/node-pre-gyp": "^1.0.8",
+    "copy-webpack-plugin": "^10.2.4",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "dependencies": {
+    "@flashphoner/sfusdk": "^2.0.48"
+  }
+}

package/src/client/chat.js

@@ -0,0 +1,67 @@
+const createChat = function(room, messages, input, sendButton) {
+    const constants = SFU.constants;
+    const chatSelfColour = "green";
+    const chatTextColour = "black";
+    const chatOtherColour = "red";
+    const chatEventColour = "navy";
+
+    room.on(constants.SFU_ROOM_EVENT.MESSAGE, function(e) {
+        appendMessage(e, chatOtherColour, chatTextColour);
+    }).on(constants.SFU_ROOM_EVENT.JOINED, function(e) {
+        appendMessage({
+            nickName: e.name,
+            message: e.type
+        }, chatOtherColour, chatEventColour);
+    }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) {
+        appendMessage({
+            nickName: e.name,
+            message: e.type
+        }, chatOtherColour, chatEventColour);
+    });
+
+    const sendMessage = function() {
+        let message = input.value;
+        input.value = "";
+        room.sendMessage(message);
+        appendMessage({
+            nickName: nickName.value,
+            message: message
+        }, chatSelfColour, chatTextColour);
+    }
+
+    sendButton.addEventListener("click", sendMessage);
+    input.onkeyup = function(e) {
+        if (e.keyCode === 13) {
+            if (e.shiftKey) {
+
+            } else {
+                sendMessage();
+            }
+            return false;
+        }
+    }
+
+    const appendMessage = function(msg, nickColour, msgColour) {
+        let message = document.createElement('div');
+        message.setAttribute("class","message");
+        messages.appendChild(message);
+        let nickDiv = document.createElement('div');
+        nickDiv.style.color = nickColour;
+        nickDiv.innerText = getChatTimestamp() + " " + msg.nickName + ":";
+        message.appendChild(nickDiv);
+        let msgDiv = document.createElement('div');
+        msgDiv.style.color = msgColour;
+        msgDiv.innerText = msg.message;
+        message.appendChild(msgDiv);
+        scrollToBottom();
+    }
+
+    const scrollToBottom = function() {
+        messages.scrollTop = messages.scrollHeight;
+    }
+
+    const getChatTimestamp = function() {
+        let currentdate = new Date();
+        return currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
+    }
+}

package/src/client/config.json

@@ -0,0 +1,26 @@
+{
+  "room": {
+    "url": "ws://127.0.0.1:8080",
+    "name": "ROOM1",
+    "pin": "1234",
+    "nickName": "Bob"
+  },
+  "media": {
+    "audio": {
+      "tracks": [
+      ]
+    },
+    "video": {
+      "tracks": [{
+        "source": "camera",
+        "width": 1280,
+        "height": 720,
+        "codec": "H264",
+        "encodings": [
+          { "rid": "h", "active": true, "maxBitrate": 900000 },
+          { "rid": "m", "active": true, "maxBitrate": 300000, "scaleResolutionDownBy": 2 }
+        ]
+      }]
+    }
+  }
+}

package/src/client/controls.js

@@ -0,0 +1,314 @@
+const createControls = function(config) {
+
+    let trackCallback = function(){};
+
+    const controls = {
+        entrance: {
+            url: document.getElementById("url"),
+            roomName: document.getElementById("roomName"),
+            roomPin: document.getElementById("roomPin"),
+            nickName: document.getElementById("nickName"),
+            enter: document.getElementById("startButton")
+        },
+        addVideoTrack: {
+            source: document.getElementById("addVideoTrackSource"),
+            width: document.getElementById("addVideoTrackWidth"),
+            height: document.getElementById("addVideoTrackHeight"),
+            codec: document.getElementById("addVideoTrackCodec")
+        },
+        addAudioTrack: {
+            source: document.getElementById("addAudioTrackSource"),
+            channels: document.getElementById("addAudioTrackChannels")
+        },
+        addVideoEncoding: {
+            rid: document.getElementById("addVideoTrackEncodingRid"),
+            active: document.getElementById("addVideoTrackEncodingActive"),
+            maxBitrate: document.getElementById("addVideoTrackEncodingMaxBitrate"),
+            resolutionScale: document.getElementById("addVideoTrackEncodingResolutionScale")
+        },
+        tables: {
+            video: $('#videoTracksTable').DataTable({
+                "sDom": 't',
+                "columns": [
+                    {
+                        "className":      'details-control',
+                        "orderable":      false,
+                        "data":           null,
+                        "defaultContent": ''
+                    },
+                    {"data": "source"},
+                    {"data": "width"},
+                    {"data": "height"},
+                    {"data": "codec"},
+                    {"data": "action"}
+                ]
+            }),
+            audio: $('#audioTracksTable').DataTable({
+                "sDom": 't',
+                "columns": [
+                    {"data": "source"},
+                    {"data": "channels"},
+                    {"data": "action"}
+                ]
+            }),
+            encodings: $('#videoTrackEncodingsTable').DataTable({
+                "sDom": 't',
+                "columns": [
+                    {"data": "rid"},
+                    {"data": "active"},
+                    {"data": "maxBitrate"},
+                    {"data": "resolutionScale"},
+                    {"data": "action"}
+                ]
+            })
+        }
+    }
+
+    //apply room config
+    controls.entrance.url.value = config.room.url;
+    controls.entrance.roomName.value = config.room.name;
+    controls.entrance.roomPin.value = config.room.pin;
+    controls.entrance.nickName.value = config.room.nickName;
+
+    const addAudioTrackRow = function(track) {
+        getMedia([track]).then(function(stream){
+            let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
+            const row = controls.tables.audio.row.add({
+                source: track.source,
+                channels: track.channels,
+                action: button,
+                stream: stream
+            }).node();
+            controls.tables.audio.draw();
+
+            $('#' + stream.id + "-button").on('click', function(){
+                //terminate stream
+                console.log("terminate stream " + stream.id);
+                let track = stream.getAudioTracks()[0];
+                track.stop();
+                track.dispatchEvent(new Event("ended"));
+            });
+            stream.getTracks()[0].onended = function() {
+                controls.tables.audio.row(row).remove().draw();
+            }
+            trackCallback({
+                stream: stream,
+                encodings: track.encodings,
+                source: track.source
+            });
+        });
+    }
+
+    const addVideoTrackRow = function(track) {
+        getMedia([track]).then(function(stream){
+            let button = '<button id="' + stream.id + '-button" class="btn btn-primary">Delete</button>';
+            const row = controls.tables.video.row.add({
+                source: track.source,
+                width: track.width,
+                height: track.height,
+                codec: track.codec,
+                action: button,
+                stream: stream,
+                encodings: track.encodings
+            }).node();
+            controls.tables.video.draw();
+
+            $('#' + stream.id + "-button").on('click', function(){
+                //terminate stream
+                console.log("terminate stream " + stream.id);
+                let track = stream.getVideoTracks()[0];
+                track.stop();
+                track.dispatchEvent(new Event("ended"));
+            });
+            stream.getTracks()[0].addEventListener("ended", function() {
+                controls.tables.video.row(row).remove().draw();
+            });
+            trackCallback({
+                stream: stream,
+                encodings: track.encodings,
+                source: track.source
+            });
+        });
+    }
+
+    const format = function(d) {
+        if (!d.encodings) {
+            return;
+        }
+        let details =  '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
+        d.encodings.forEach(function(encoding){
+            details += '<tr>';
+            for (const [key, value] of Object.entries(encoding)) {
+                details += '<td>'+ key + '</td>'+
+                    '<td>'+ value + '</td>';
+            }
+            details += '</tr>';
+        });
+        details +='</table>';
+        return details;
+    }
+
+    // Add event listener for opening and closing details
+    $('#videoTracksTableBody').on('click', 'td.details-control', function () {
+        let tr = $(this).closest('tr');
+        let row = controls.tables.video.row(tr);
+        if (row.child.isShown()) {
+            // This row is already open - close it
+            row.child.hide();
+            tr.removeClass('shown');
+        } else {
+            // Open this row
+            row.child(format(row.data())).show();
+            tr.addClass('shown');
+        }
+    });
+
+    config.media.audio.tracks.forEach(function(track){
+        addAudioTrackRow(track);
+    })
+    config.media.video.tracks.forEach(function(track){
+        addVideoTrackRow(track);
+    })
+
+    const muteForm = function(form) {
+        for (const [key, value] of Object.entries(form)) {
+            value.disabled = true;
+        }
+    }
+
+    const unmuteForm = function(form) {
+        for (const [key, value] of Object.entries(form)) {
+            value.disabled = false;
+        }
+    }
+
+    const muteInput = function() {
+        muteForm(controls.entrance);
+    }
+
+    const roomConfig = function() {
+        return {
+            url: controls.entrance.url.value,
+            roomName: controls.entrance.roomName.value,
+            pin: controls.entrance.roomPin.value,
+            nickname: controls.entrance.nickName.value
+        }
+    }
+
+    const getVideoStreams = function() {
+        let streams = [];
+        controls.tables.video.rows().every(function(rowIdx, tableLoop, rowLoop) {
+            let data = this.data();
+            streams.push({
+                stream: data.stream,
+                encodings: data.encodings,
+                source: data.source
+            });
+        });
+        return streams;
+    }
+    const getAudioStreams = function() {
+        let streams = [];
+        controls.tables.audio.rows().every(function(rowIdx, tableLoop, rowLoop) {
+            let data = this.data();
+            streams.push({
+                stream: data.stream,
+                encodings: [],
+                source: data.source
+            });
+        });
+        return streams;
+    }
+
+    document.getElementById("addVideoTrack").addEventListener("click", function(e){
+        let encodings = [];
+        controls.tables.encodings.rows().every(function() {
+            let encoding = this.data();
+            encodings.push({
+                rid: encoding.rid,
+                active: encoding.active,
+                maxBitrate: encoding.maxBitrate,
+                scaleResolutionDownBy: encoding.resolutionScale
+            })
+        });
+        let track = {
+            source: controls.addVideoTrack.source.value,
+            width: controls.addVideoTrack.width.value,
+            height: controls.addVideoTrack.height.value,
+            codec: controls.addVideoTrack.codec.value,
+            encodings: encodings
+        }
+        addVideoTrackRow(track);
+    });
+
+    $("#videoTrackEncodingsTable").on("click", ".remove", function(){
+        controls.tables.encodings.row($(this).parents('tr')).remove().draw();
+    });
+
+    document.getElementById("addVideoTrackEncoding").addEventListener("click", function(){
+        let button = '<button class="btn btn-primary remove">Delete</button>';
+        controls.tables.encodings.row.add({
+            rid: controls.addVideoEncoding.rid.value,
+            active: controls.addVideoEncoding.active.value,
+            maxBitrate: controls.addVideoEncoding.maxBitrate.value,
+            resolutionScale: controls.addVideoEncoding.resolutionScale.value,
+            action: button
+        }).draw();
+    });
+
+    document.getElementById("addAudioTrack").addEventListener("click", function(e){
+        let encodings = [];
+        let track = {
+            source: controls.addAudioTrack.source.value,
+            channels: controls.addAudioTrack.channels.value,
+            encodings: encodings
+        }
+        addAudioTrackRow(track);
+    });
+
+    const onTrack = function(callback) {
+        trackCallback = callback;
+    }
+
+
+    return {
+        muteInput: muteInput,
+        roomConfig: roomConfig,
+        getAudioStreams: getAudioStreams,
+        getVideoStreams: getVideoStreams,
+        onTrack: onTrack
+    }
+}
+
+const getMedia = async function(tracks) {
+    //convert to constraints
+    let screen = false;
+    const constraints= {};
+    tracks.forEach(function(track){
+        if (track.source === "mic") {
+            //audio
+            constraints.audio = {};
+            constraints.audio.stereo = track.channels !== 1
+        } else if (track.source === "camera") {
+            constraints.video = {
+                width: track.width,
+                height: track.height
+            };
+        } else if (track.source === "screen") {
+            constraints.video = {
+                width: track.width,
+                height: track.height
+            };
+            screen = true;
+        }
+    });
+
+    //get access to a/v
+    let stream;
+    if (screen) {
+        stream = await navigator.mediaDevices.getDisplayMedia(constraints);
+    } else {
+        stream = await navigator.mediaDevices.getUserMedia(constraints);
+    }
+    return stream;
+}