@flashphoner/sfusdk 1.0.1-35 → 1.0.40

package/Gruntfile.js

@@ -50,6 +50,18 @@ module.exports = function(grunt) {
             release: [
                 'release'
             ]
+        },
+        run: {
+            options: {
+                // ...
+            },
+            test: {
+                cmd: 'npm',
+                args: [
+                    'run',
+                    'test'
+                ]
+            }
         }
     });
 
@@ -57,6 +69,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-contrib-clean');
     grunt.loadNpmTasks('grunt-jsdoc');
+    grunt.loadNpmTasks('grunt-run');
     grunt.registerTask('build', [
         'clean:build',
         'copy',

package/README.md

@@ -87,7 +87,7 @@ cp -r out/* /var/www/html/flashphoner-sfu-test
 
 [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 client example description](https://docs.flashphoner.com/display/SS1E/SFU+client)
+[SFU examples description](https://docs.flashphoner.com/display/SS1E/SFU+SDK+Examples)
 [API documentation](http://flashphoner.com/docs/api/WCS5/client/sfu-sdk/latest)
 
 ## Known issues

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-SFU SDK - 1.0.1-35
+SFU SDK - 1.0.40
 
 [Download builds](https://docs.flashphoner.com/display/SS1E/Release+notes)
 

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@flashphoner/sfusdk",
   "description": "Official Flashphoner WebCallServer SFU SDK package",
-  "version": "1.0.1-35",
+  "version": "1.0.40",
+  "scripts": {
+    "test": "jest --runInBand"
+  },
   "dependencies": {
     "bootstrap": "^4.6.0",
     "datatables.net": "^1.10.24",
@@ -10,15 +13,17 @@
     "jquery-ui": "^1.12.1",
     "popper.js": "^1.16.1",
     "sdp-transform": "^2.14.0",
-    "webrtc-adapter": "^7.2.6",
-    "uuid": "^8.3.0"
+    "uuid": "^8.3.0",
+    "webrtc-adapter": "^7.2.6"
   },
   "devDependencies": {
     "grunt": "^1.0.1",
     "grunt-browserify": "^5.0.0",
     "grunt-contrib-clean": "^1.0.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-jsdoc": "^2.4.0"
+    "grunt-jsdoc": "^2.4.0",
+    "grunt-run": "^0.8.1",
+    "jest": "^27.4.7"
   },
   "keywords": [
     "Flashphoner",
@@ -26,5 +31,8 @@
     "SFU SDK"
   ],
   "author": "Flashphoner",
-  "license": "MIT"
+  "license": "MIT",
+  "jest" : {
+    "testEnvironment": "jsdom"
+  }
 }

package/src/examples/commons/js/config.js

@@ -0,0 +1,81 @@
+const getRoomConfig = function(config) {
+    let roomConfig = {
+        url: config.url || "ws://127.0.0.1:8080",
+        roomName: config.name || "ROOM1",
+        pin: config.pin || "1234",
+        nickname: config.nickName || "User1"        
+    };
+    return roomConfig;
+}
+
+const getVideoStreams = async function(config) {
+    let streams = [];
+    if (config.media && config.media.video && config.media.video.tracks) {
+        streams = await getStreams(config.media.video.tracks);
+    }
+    return streams;
+}
+
+const getAudioStreams = async function(config) {
+    let streams = [];
+    if (config.media && config.media.audio && config.media.audio.tracks) {
+        streams = await getStreams(config.media.audio.tracks);
+    }
+    return streams;
+}
+
+const getStreams = async function(tracks) {
+    let streams = [];
+    for (let track of tracks) {
+        let stream = await getMedia(track);
+        if (stream) {
+            streams.push({
+                stream: stream,
+                encodings: track.encodings,
+                source: track.source
+            });
+        }
+    }
+    return streams;
+}
+
+const getMedia = async function(track) {
+    //convert to constraints
+    let screen = false;
+    const constraints= {};
+    if (track.source === "mic") {
+        //audio
+        constraints.audio = {};
+        if (track.constraints) {
+            constraints.audio = track.constraints;
+        }
+        if (track.channels && track.channels === 2) {
+            constraints.audio.echoCancellation = false;
+            constraints.audio.googEchoCancellation = false;
+        }
+    } else if (track.source === "camera") {
+        constraints.video = {};
+        if (track.constraints) {
+            constraints.video = track.constraints;
+        }
+        constraints.video.width = track.width;
+        constraints.video.height = track.height;
+    } else if (track.source === "screen") {
+        constraints.video = {};
+        if (track.constraints) {
+            constraints.video = track.constraints;
+        }
+        constraints.video.width = track.width;
+        constraints.video.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;
+}

package/src/examples/commons/js/display.js

@@ -0,0 +1,484 @@
+const initLocalDisplay = function(localDisplayElement){
+    const localDisplayDiv = localDisplayElement;
+    const localDisplays = {};
+
+    const removeLocalDisplay = function(id) {
+        let localDisplay = document.getElementById(localDisplays[id].id);
+        let video = localDisplay.getElementsByTagName("video");
+        if (video && video[0]) {
+            for (const [key, vTrack] of Object.entries(video[0].srcObject.getTracks())) {
+                vTrack.stop();
+            }
+        }
+        delete localDisplays[id];
+        localDisplay.remove();
+    }
+
+    const getAudioContainer = function() {
+        for (const [key, value] of Object.entries(localDisplays)) {
+            let video = value.getElementsByTagName("video");
+            if (video && video[0]) {
+                let audioStateButton = value.getElementsByTagName("button");
+                let audioTracks = video[0].srcObject.getAudioTracks();
+                if (!audioTracks || audioTracks.length === 0) {
+                    return {
+                        id: value.id,
+                        video: video[0],
+                        audioStateDisplay: audioStateButton[0]
+                    }
+                }
+            }
+        }
+    };
+
+    const add = function(id, name, stream) {
+        if (stream.getAudioTracks().length > 0) {
+            let videoElement = getAudioContainer();
+            if (videoElement) {
+                let track = stream.getAudioTracks()[0];
+                videoElement.video.srcObject.addTrack(track);
+                videoElement.audioStateDisplay.innerHTML = audioStateText(stream);
+                track.addEventListener("ended", function() {
+                    videoElement.video.srcObject.removeTrack(track);
+                    videoElement.audioStateDisplay.innerHTML = "No audio";
+                    //check video element has no tracks left
+                    for (const [key, vTrack] of Object.entries(videoElement.video.srcObject.getTracks())) {
+                        if (vTrack.readyState !== "ended") {
+                            return;
+                        }
+                    }
+                    removeLocalDisplay(videoElement.id);
+                });
+                return;
+            }
+        }
+
+        const coreDisplay = document.createElement('div');
+        coreDisplay.setAttribute("class","text-center");
+        coreDisplay.setAttribute("style","width: auto; height: auto;");
+        coreDisplay.id = stream.id;
+        const streamNameDisplay = document.createElement("div");
+        streamNameDisplay.innerHTML = "Name: " + name;
+        streamNameDisplay.setAttribute("class","text-center");
+        streamNameDisplay.setAttribute("style","width: auto; height: auto;");
+        coreDisplay.appendChild(streamNameDisplay);
+
+        const audioStateDisplay = document.createElement("button");
+        audioStateDisplay.innerHTML = audioStateText(stream);
+        audioStateDisplay.addEventListener('click', function(){
+            if (stream.getAudioTracks().length > 0) {
+                stream.getAudioTracks()[0].enabled = !(stream.getAudioTracks()[0].enabled);
+                audioStateDisplay.innerHTML = audioStateText(stream);
+            }
+        });
+        coreDisplay.appendChild(audioStateDisplay);
+
+        const streamDisplay = document.createElement('div');
+        streamDisplay.id = "stream-" + id;
+        streamDisplay.setAttribute("class","text-center");
+        streamDisplay.setAttribute("style","width: auto; height: auto;");
+        coreDisplay.appendChild(streamDisplay);
+        const video = document.createElement("video");
+        video.muted = true;
+        if(Browser().isSafariWebRTC()) {
+            video.setAttribute("playsinline", "");
+            video.setAttribute("webkit-playsinline", "");
+        }
+        streamDisplay.appendChild(video);
+        video.srcObject = stream;
+        video.onloadedmetadata = function (e) {
+            video.play();
+        };
+        stream.getTracks().forEach(function(track){
+            track.addEventListener("ended", function() {
+                video.srcObject.removeTrack(track);
+                //check video element has no tracks left
+                for (const [key, vTrack] of Object.entries(video.srcObject.getTracks())) {
+                    if (vTrack.readyState !== "ended") {
+                        return;
+                    }
+                }
+                removeLocalDisplay(id);
+            });
+        });
+        video.addEventListener('resize', function (event) {
+            streamNameDisplay.innerHTML = "Name: " + name + "<br/>Max.resolution: " + video.videoWidth + "x" + video.videoHeight;
+            resizeVideo(event.target);
+        });
+        localDisplays[id] = coreDisplay;
+        localDisplayDiv.appendChild(coreDisplay);
+        return coreDisplay;
+    }
+
+    const stop = function () {
+        for (const [key, value] of Object.entries(localDisplays)) {
+            removeLocalDisplay(value.id);
+        }
+    }
+
+    const audioStateText = function (stream) {
+        if (stream.getAudioTracks().length > 0) {
+            if (stream.getAudioTracks()[0].enabled) {
+                return "Mute";
+            } else {
+                return "Unmute";
+            }
+        }
+        return "No audio";
+    }
+
+    return {
+        add: add,
+        stop: stop
+    }
+}
+
+const initRemoteDisplay = function(mainDiv, room, peerConnection) {
+    const constants = SFU.constants;
+    const remoteParticipants = {};
+    room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
+        console.log("Received ADD_TRACKS");
+        let participant = remoteParticipants[e.info.nickName];
+        if (!participant) {
+            participant = {};
+            participant.nickName = e.info.nickName;
+            participant.tracks = [];
+            participant.displays = [];
+            remoteParticipants[participant.nickName] = participant;
+        }
+        participant.tracks.push.apply(participant.tracks, e.info.info);
+        for (const pTrack of e.info.info) {
+            let createDisplay = true;
+            for (let i = 0; i < participant.displays.length; i++) {
+                let display = participant.displays[i];
+                if (pTrack.type === "VIDEO") {
+                    if (display.hasVideo()) {
+                        continue;
+                    }
+                    display.videoMid = pTrack.mid;
+                    display.setTrackInfo(pTrack);
+                    createDisplay = false;
+                    break;
+                } else if (pTrack.type === "AUDIO") {
+                    if (display.hasAudio()) {
+                        continue;
+                    }
+                    display.audioMid = pTrack.mid;
+                    createDisplay = false;
+                    break;
+                }
+            }
+            if (!createDisplay) {
+                continue;
+            }
+            let display = createRemoteDisplay(participant.nickName, participant.nickName, mainDiv);
+            participant.displays.push(display);
+            if (pTrack.type === "VIDEO") {
+                display.videoMid = pTrack.mid;
+                display.setTrackInfo(pTrack);
+            } else if (pTrack.type === "AUDIO") {
+                display.audioMid = pTrack.mid;
+            }
+        }
+    }).on(constants.SFU_ROOM_EVENT.REMOVE_TRACKS, function(e) {
+        console.log("Received REMOVE_TRACKS");
+        const participant = remoteParticipants[e.info.nickName];
+        if (!participant) {
+            return;
+        }
+        for (const rTrack of e.info.info) {
+            for (let i = 0; i < participant.tracks.length; i++) {
+                if (rTrack.mid === participant.tracks[i].mid) {
+                    participant.tracks.splice(i, 1);
+                    break;
+                }
+            }
+            for (let i = 0; i < participant.displays.length; i++) {
+                let found = false;
+                const display = participant.displays[i];
+                if (display.audioMid === rTrack.mid) {
+                    display.setAudio(null);
+                    found = true;
+                } else if (display.videoMid === rTrack.mid) {
+                    display.setVideo(null);
+                    found = true;
+                }
+                if (found) {
+                    if (!display.hasAudio() && !display.hasVideo()) {
+                        display.dispose();
+                        participant.displays.splice(i, 1);
+                    }
+                    break;
+                }
+            }
+        }
+    }).on(constants.SFU_ROOM_EVENT.LEFT, function(e) {
+        console.log("Received LEFT");
+        let participant = remoteParticipants[e.name];
+        if (!participant) {
+            return;
+        }
+        participant.displays.forEach(function(display){
+            display.dispose();
+        })
+        delete remoteParticipants[e.name];
+    }).on(constants.SFU_ROOM_EVENT.TRACK_QUALITY_STATE, function(e){
+        console.log("Received track quality state");
+        const participant = remoteParticipants[e.info.nickName];
+        if (!participant) {
+            return;
+        }
+
+        for (const rTrack of e.info.tracks) {
+            const mid = rTrack.mid;
+            for (let i = 0; i < participant.displays.length; i++) {
+                const display = participant.displays[i];
+                if (display.videoMid === mid) {
+                    display.updateQualityInfo(rTrack.quality);
+                    break;
+                }
+            }
+        }
+    });
+
+    const createRemoteDisplay = function(id, name, mainDiv) {
+        const cell = document.createElement("div");
+        cell.setAttribute("class", "text-center");
+        cell.id = id;
+        mainDiv.appendChild(cell);
+        const streamNameDisplay = document.createElement("div");
+        streamNameDisplay.innerHTML = "Published by: " + name;
+        streamNameDisplay.setAttribute("style","width:auto; height:auto;");
+        streamNameDisplay.setAttribute("class","text-center");
+        cell.appendChild(streamNameDisplay);
+        const qualityDisplay = document.createElement("div");
+        qualityDisplay.setAttribute("style","width:auto; height:auto;");
+        qualityDisplay.setAttribute("class","text-center");
+        cell.appendChild(qualityDisplay);
+
+        let qualityDivs = [];
+
+        const rootDisplay = document.createElement("div");
+        rootDisplay.setAttribute("style","width:auto; height:auto;");
+        rootDisplay.setAttribute("class","text-center");
+        cell.appendChild(rootDisplay);
+        const streamDisplay = document.createElement("div");
+        streamDisplay.setAttribute("style","width:auto; height:auto;");
+        streamDisplay.setAttribute("class","text-center");
+        rootDisplay.appendChild(streamDisplay);
+
+        let audio = null;
+        let video = null;
+        return {
+            dispose: function() {
+                cell.remove();
+            },
+            hide: function(value) {
+                if (value) {
+                    cell.style.display = "none";
+                } else {
+                    cell.style.display = "block";
+                }
+            },
+            setAudio: function(stream) {
+                if (audio) {
+                    audio.remove();
+                }
+                if (!stream) {
+                    audio = null;
+                    this.audioMid = undefined;
+                    return;
+                }
+                audio = document.createElement("audio");
+                audio.controls = "controls";
+                audio.muted = true;
+                audio.autoplay = true;
+                cell.appendChild(audio);
+                audio.srcObject = stream;
+                audio.onloadedmetadata = function (e) {
+                    audio.play().then(function() {
+                        audio.muted = false;
+                    });
+                };
+            },
+            hasAudio: function() {
+                return audio !== null || this.audioMid !== undefined;
+            },
+            setVideo: function(stream) {
+                if (video) {
+                    video.remove();
+                }
+
+                if (stream == null) {
+                    video = null;
+                    this.videoMid = undefined;
+                    qualityDivs.forEach(function(div) {
+                        div.remove();
+                    });
+                    qualityDivs = [];
+                    return;
+                }
+                video = document.createElement("video");
+                video.muted = true;
+                if(Browser().isSafariWebRTC()) {
+                    video.setAttribute("playsinline", "");
+                    video.setAttribute("webkit-playsinline", "");
+                }
+                streamDisplay.appendChild(video);
+                video.srcObject = stream;
+                video.onloadedmetadata = function (e) {
+                    video.play().then(function() {
+                        video.muted = false;
+                    });
+                };
+                video.addEventListener("resize", function (event) {
+                    streamNameDisplay.innerHTML = "Published by: " + name + "<br/>Current resolution: " + video.videoWidth + "x" + video.videoHeight;
+                    resizeVideo(event.target);
+                });
+            },
+            setTrackInfo: function(trackInfo) {
+                if (trackInfo && trackInfo.quality) {
+                    for (let i = 0; i < trackInfo.quality.length; i++) {
+                        const qualityDiv = document.createElement("button");
+                        qualityDivs.push(qualityDiv);
+                        qualityDiv.innerText = trackInfo.quality[i];
+                        qualityDiv.setAttribute("style", "display:inline-block; border: solid; border-width: 1px");
+                        qualityDiv.style.color = "red";
+                        qualityDiv.addEventListener('click', function(){
+                            console.log("Clicked on quality " + trackInfo.quality[i] + " trackId " + trackInfo.id);
+                            if (qualityDiv.style.color === "red") {
+                                return;
+                            }
+                            for (let c = 0; c < qualityDivs.length; c++) {
+                                if (qualityDivs[c].style.color !== "red") {
+                                    qualityDivs[c].style.color = "gray";
+                                }
+                            }
+                            qualityDiv.style.color = "blue";
+                            room.changeQuality(trackInfo.id, trackInfo.quality[i]);
+                        });
+                        qualityDisplay.appendChild(qualityDiv);
+                    }
+                }
+            },
+            updateQualityInfo: function(videoQuality) {
+                for (const qualityInfo of videoQuality) {
+                    for (const qualityDiv of qualityDivs) {
+                        if (qualityDiv.innerText === qualityInfo.quality){
+                            if (qualityInfo.available === true) {
+                                qualityDiv.style.color = "gray";
+                            } else {
+                                qualityDiv.style.color = "red";
+                            }
+                            break;
+                        }
+                    }
+                }
+            },
+            hasVideo: function() {
+                return video !== null || this.videoMid !== undefined;
+            },
+            audioMid: undefined,
+            videoMid: undefined
+        };
+    }
+
+    const stop = function() {
+        for (const [nickName, participant] of Object.entries(remoteParticipants)) {
+            participant.displays.forEach(function(display){
+                display.dispose();
+            });
+            delete remoteParticipants[nickName];
+        }
+    }
+
+    peerConnection.ontrack = ({transceiver}) => {
+        let rParticipant;
+        console.log("Attach remote track " + transceiver.receiver.track.id + " kind " + transceiver.receiver.track.kind + " mid " + transceiver.mid);
+        for (const [nickName, participant] of Object.entries(remoteParticipants)) {
+            for (const pTrack of participant.tracks) {
+                console.log("Participant " + participant.nickName + " track " + pTrack.id + " mid " + pTrack.mid);
+                if (pTrack.mid === transceiver.mid) {
+                    rParticipant = participant;
+                    break;
+                }
+            }
+            if (rParticipant) {
+                break;
+            }
+        }
+        if (rParticipant) {
+            for (const display of rParticipant.displays) {
+                if (transceiver.receiver.track.kind === "video") {
+                    if (display.videoMid === transceiver.mid) {
+                        let stream = new MediaStream();
+                        stream.addTrack(transceiver.receiver.track);
+                        display.setVideo(stream);
+                        break;
+                    }
+                } else if (transceiver.receiver.track.kind === "audio") {
+                    if (display.audioMid === transceiver.mid) {
+                        let stream = new MediaStream();
+                        stream.addTrack(transceiver.receiver.track);
+                        display.setAudio(stream);
+                        break;
+                    }
+                }
+            }
+        } else {
+            console.warn("Failed to find participant for track " + transceiver.receiver.track.id);
+        }
+    }
+
+    return {
+        stop: stop
+    }
+}
+
+const resizeVideo = function(video, width, height) {
+    if (!video.parentNode) {
+        return;
+    }
+    if (video instanceof HTMLCanvasElement) {
+        video.videoWidth = video.width;
+        video.videoHeight = video.height;
+    }
+    var display = video.parentNode;
+    var parentSize = {
+        w: display.parentNode.clientWidth,
+        h: display.parentNode.clientHeight
+    };
+    var newSize;
+    if (width && height) {
+        newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h);
+    } else {
+        newSize = downScaleToFitSize(video.videoWidth, video.videoHeight, parentSize.w, parentSize.h);
+    }
+    display.style.width = newSize.w + "px";
+    display.style.height = newSize.h + "px";
+
+    //vertical align
+    var margin = 0;
+    if (parentSize.h - newSize.h > 1) {
+        margin = Math.floor((parentSize.h - newSize.h) / 2);
+    }
+    display.style.margin = margin + "px auto";
+    console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
+}
+
+const downScaleToFitSize = function(videoWidth, videoHeight, dstWidth, dstHeight) {
+    var newWidth, newHeight;
+    var videoRatio = videoWidth / videoHeight;
+    var dstRatio = dstWidth / dstHeight;
+    if (dstRatio > videoRatio) {
+        newHeight = dstHeight;
+        newWidth = Math.floor(videoRatio * dstHeight);
+    } else {
+        newWidth = dstWidth;
+        newHeight = Math.floor(dstWidth / videoRatio);
+    }
+    return {
+        w: newWidth,
+        h: newHeight
+    };
+}