@flashphoner/sfusdk-examples 2.0.132 → 2.0.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/sfusdk-examples",
-  "version": "2.0.132",
+  "version": "2.0.136",
   "description": "Official Flashphoner WebCallServer SFU SDK usage examples",
   "main": "dist/sfu.js",
   "types": "src/sfu.ts",

package/src/commons/js/display.js

@@ -57,11 +57,11 @@ const initLocalDisplay = function(localDisplayElement){
         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 publisherNameDisplay = document.createElement("div");
+        publisherNameDisplay.innerHTML = "Name: " + name;
+        publisherNameDisplay.setAttribute("class","text-center");
+        publisherNameDisplay.setAttribute("style","width: auto; height: auto;");
+        coreDisplay.appendChild(publisherNameDisplay);
 
         const audioStateDisplay = document.createElement("button");
         audioStateDisplay.innerHTML = audioStateText(stream);
@@ -102,7 +102,7 @@ const initLocalDisplay = function(localDisplayElement){
             });
         });
         video.addEventListener('resize', function (event) {
-            streamNameDisplay.innerHTML = "Name: " + name + "<br/>Max.resolution: " + video.videoWidth + "x" + video.videoHeight;
+            publisherNameDisplay.innerHTML = "Name: " + name + "<br/>Max.resolution: " + video.videoWidth + "x" + video.videoHeight;
             resizeVideo(event.target);
         });
         localDisplays[id] = coreDisplay;
@@ -133,9 +133,25 @@ const initLocalDisplay = function(localDisplayElement){
     }
 }
 
-const initRemoteDisplay = function(mainDiv, room, peerConnection) {
+const initRemoteDisplay = function(options) {
     const constants = SFU.constants;
     const remoteParticipants = {};
+    // Validate options first
+    if (!options.div) {
+        throw new Error("Main div to place all the media tag is not defined");
+    }
+    if (!options.room) {
+        throw new Error("Room is not defined");
+    }
+    if (!options.peerConnection) {
+        throw new Error("PeerConnection is not defined");
+    }
+
+    let mainDiv = options.div;
+    let room = options.room;
+    let peerConnection = options.peerConnection;
+    let displayOptions = options.displayOptions || {publisher: true, quality: true};
+
     room.on(constants.SFU_ROOM_EVENT.ADD_TRACKS, function(e) {
         console.log("Received ADD_TRACKS");
         let participant = remoteParticipants[e.info.nickName];
@@ -171,7 +187,7 @@ const initRemoteDisplay = function(mainDiv, room, peerConnection) {
             if (!createDisplay) {
                 continue;
             }
-            let display = createRemoteDisplay(participant.nickName, participant.nickName, mainDiv);
+            let display = createRemoteDisplay(participant.nickName, participant.nickName, mainDiv, displayOptions);
             participant.displays.push(display);
             if (pTrack.type === "VIDEO") {
                 display.videoMid = pTrack.mid;
@@ -241,20 +257,31 @@ const initRemoteDisplay = function(mainDiv, room, peerConnection) {
         }
     });
 
-    const createRemoteDisplay = function(id, name, mainDiv) {
+    const createRemoteDisplay = function(id, name, mainDiv, displayOptions) {
         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 publisherNameDisplay;
+        let currentQualityDisplay;
+        if (displayOptions.publisher) {
+            publisherNameDisplay = document.createElement("div");
+            publisherNameDisplay.innerHTML = "Published by: " + name;
+            publisherNameDisplay.setAttribute("style","width:auto; height:30px;");
+            publisherNameDisplay.setAttribute("class","text-center");
+            cell.appendChild(publisherNameDisplay);
+        }
+        if (displayOptions.quality) {
+            currentQualityDisplay = document.createElement("div");
+            currentQualityDisplay.innerHTML = "";
+            currentQualityDisplay.setAttribute("style","width:auto; height:30px;");
+            currentQualityDisplay.setAttribute("class","text-center");
+            cell.appendChild(currentQualityDisplay);
+        }
+        const qualitySwitchDisplay = document.createElement("div");
+        qualitySwitchDisplay.setAttribute("style","width:auto; height:30px;");
+        qualitySwitchDisplay.setAttribute("class","text-center");
+        cell.appendChild(qualitySwitchDisplay);
 
         let qualityDivs = [];
 
@@ -293,11 +320,22 @@ const initRemoteDisplay = function(mainDiv, room, peerConnection) {
                 audio.controls = "controls";
                 audio.muted = true;
                 audio.autoplay = true;
+                if (Browser().isSafariWebRTC()) {
+                    audio.setAttribute("playsinline", "");
+                    audio.setAttribute("webkit-playsinline", "");
+                    this.setWebkitEventHandlers(audio);
+                } else {
+                    this.setEventHandlers(audio);
+                }
                 cell.appendChild(audio);
                 audio.srcObject = stream;
                 audio.onloadedmetadata = function (e) {
                     audio.play().then(function() {
-                        audio.muted = false;
+                        if (Browser().isSafariWebRTC() && Browser().isiOS()) {
+                            console.warn("Audio track should be manually unmuted in iOS Safari");
+                        } else {
+                            audio.muted = false;
+                        }
                     });
                 };
             },
@@ -319,22 +357,19 @@ const initRemoteDisplay = function(mainDiv, room, peerConnection) {
                     return;
                 }
                 video = document.createElement("video");
+                video.controls = "controls";
                 video.muted = true;
-                if(Browser().isSafariWebRTC()) {
+                video.autoplay = true;
+                if (Browser().isSafariWebRTC()) {
                     video.setAttribute("playsinline", "");
                     video.setAttribute("webkit-playsinline", "");
+                    this.setWebkitEventHandlers(video);
+                } else {
+                    this.setEventHandlers(video);
                 }
                 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);
-                });
+                this.setResizeHandler(video);
             },
             setTrackInfo: function(trackInfo) {
                 if (trackInfo && trackInfo.quality) {
@@ -357,7 +392,7 @@ const initRemoteDisplay = function(mainDiv, room, peerConnection) {
                             qualityDiv.style.color = "blue";
                             room.changeQuality(trackInfo.id, trackInfo.quality[i]);
                         });
-                        qualityDisplay.appendChild(qualityDiv);
+                        qualitySwitchDisplay.appendChild(qualityDiv);
                     }
                 }
             },
@@ -378,6 +413,47 @@ const initRemoteDisplay = function(mainDiv, room, peerConnection) {
             hasVideo: function() {
                 return video !== null || this.videoMid !== undefined;
             },
+            setResizeHandler: function(video) {
+                video.addEventListener("resize", function (event) {
+                    if (displayOptions.publisher) {
+                        publisherNameDisplay.innerHTML = "Published by: " + name;
+                    }
+                    if (displayOptions.quality) {
+                        currentQualityDisplay.innerHTML = video.videoWidth + "x" + video.videoHeight;
+                    }
+                    resizeVideo(event.target);
+                });
+            },
+            setEventHandlers: function(video) {
+                // Ignore play/pause button
+                video.addEventListener("pause", function () {
+                    console.log("Media paused by click, continue...");
+                    video.play();
+                });
+            },
+            setWebkitEventHandlers: function(video) {
+                let needRestart = false;
+                let isFullscreen = false;
+                // Use webkitbeginfullscreen event to detect full screen mode in iOS Safari
+                video.addEventListener("webkitbeginfullscreen", function () {
+                    isFullscreen = true;
+                });                
+                video.addEventListener("pause", function () {
+                    if (needRestart) {
+                        console.log("Media paused after fullscreen, continue...");
+                        video.play();
+                        needRestart = false;
+                    } else {
+                        console.log("Media paused by click, continue...");
+                        video.play();
+                    }
+                });
+                video.addEventListener("webkitendfullscreen", function () {
+                    video.play();
+                    needRestart = true;
+                    isFullscreen = false;
+                });
+            },
             audioMid: undefined,
             videoMid: undefined
         };

package/src/player/player.js

@@ -166,7 +166,11 @@ const onStopClick = function(state) {
 
 const playStreams = function(state) {
     //create remote display item to show remote streams
-    remoteDisplay = initRemoteDisplay(document.getElementById("remoteVideo"), state.room, state.pc);
+    remoteDisplay = initRemoteDisplay({
+        div: document.getElementById("remoteVideo"),
+        room: state.room,
+        peerConnection: state.pc
+    });
     state.room.join(state.pc);
 }
 

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

@@ -300,7 +300,11 @@ const unPublishStreams = function(state) {
 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);
+        remoteDisplay = initRemoteDisplay({
+            div: document.getElementById("remoteVideo"),
+            room: state.room,
+            peerConnection: state.pc
+        });
         state.room.join(state.pc);
     }
     $("#" + state.buttonId()).prop('disabled', false);

package/src/webrtc-abr-player/player.css

@@ -0,0 +1,27 @@
+.fp-remoteVideo {
+    width: 802px;
+    text-align: center;
+    display: inline-block;
+}
+
+.fp-placeholder {
+    border: 1px double black;
+    width: 802px;
+    height: 402px;
+    text-align: center;
+    background: #c0c0c0;
+    display: inline-block;
+}
+
+video, object {
+    width: 100%;
+    height: 100%;
+}
+
+video:-webkit-full-screen {
+    border-radius: 1px;
+}
+
+video::-webkit-media-controls-play-button, video::-webkit-media-controls-pause-button {
+    display: none !important;
+}

package/src/webrtc-abr-player/player.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WebRTC ABR 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">WebRTC ABR Player</h2>
+
+        <div class="row col-sm-12 justify-content-center" style="margin-top: 10px">
+            <div id="remoteVideo" class="fp-remoteVideo text-center justify-content-center">
+                <div id="placeholder" class="fp-placeholder text-center justify-content-center"></div>
+            </div>
+        </div>
+        <div class="row col-sm-12 justify-content-center">
+            <div id="connectionForm" class="col-sm-6 text-center form-group">
+                <label for="url" class="control-label">Server url</label>
+                <input class="form-control" id="url" type="text">
+                <label for="streamName" class="control-label">Stream name</label>
+                <input class="form-control" id="streamName" type="text">
+                <div class="input-group-btn" style="margin-top: 10px">
+                    <button id="playBtn" type="button" style="height: 30px;; width: auto;">Play</button>
+                </div>
+                <div class="text-center" style="margin-top: 20px">
+                    <div id="playStatus"></div>
+                    <div id="playErrorInfo"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>

package/src/webrtc-abr-player/player.js

@@ -0,0 +1,191 @@
+const constants = SFU.constants;
+const sfu = SFU;
+const PRELOADER_URL="../commons/media/silence.mp3"
+
+/**
+ * Current state object
+ */
+const CurrentState = function() {
+    let state = {
+        pc: null,
+        session: null,
+        room: null,
+        remoteDisplay: 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;
+        },
+        setDisplay: function(display) {
+            state.remoteDisplay = display;
+        },
+        disposeDisplay: function() {
+            if (state.remoteDisplay) {
+                state.remoteDisplay.stop();
+                state.remoteDisplay = null;
+            }
+        }
+    };
+    return state;
+}
+
+/**
+ * load config and set default values
+ */
+const init = function() {
+    $("#playBtn").prop('disabled', true);
+    $("#url").prop('disabled', true);
+    $("#streamName").prop('disabled', true);
+    onDisconnected(CurrentState());
+    $("#url").val(setURL());
+}
+
+/**
+ * Connect to server
+ */
+const connect = function(state) {
+    // Create peer connection
+    let pc = new RTCPeerConnection();
+    // Create a config to connect to SFU room
+    const roomConfig = {
+        // Server websocket URL
+        url: $("#url").val(),
+        // Use stream name as room name to play ABR
+        roomName: $("#streamName").val(),
+        // Make a random participant name from stream name
+        nickname: "Player-" + $("#streamName").val() + "-" + createUUID(4),
+        // Set room pin
+        pin: 123456
+    }
+    // Clean state display items
+    setStatus("playStatus", "");
+    setStatus("playErrorInfo", "");
+    // Connect to the server (room should already exist)
+    const session = sfu.createRoom(roomConfig);
+    session.on(constants.SFU_EVENT.CONNECTED, function() {
+        state.set(pc, session, session.room());
+        onConnected(state);
+        setStatus("playStatus", "CONNECTING...", "black");
+    }).on(constants.SFU_EVENT.DISCONNECTED, function() {
+        state.clear();
+        onDisconnected(state);
+        setStatus("playStatus", "DISCONNECTED", "green");
+    }).on(constants.SFU_EVENT.FAILED, function(e) {
+        state.clear();
+        onDisconnected(state);
+        setStatus("playStatus", "FAILED", "red");
+        setStatus("playErrorInfo", e.status + " " + e.statusText, "red");
+    });
+}
+
+const onConnected = function(state) {
+    $("#playBtn").text("Stop").off('click').click(function () {
+        onStopClick(state);
+    }).prop('disabled', false);
+    $('#url').prop('disabled', true);
+    $("#streamName").prop('disabled', true);
+    // Add room event handling
+    state.room.on(constants.SFU_ROOM_EVENT.PARTICIPANT_LIST, function(e) {
+        // If the room is empty, the stream is not published yet
+        if(!e.participants || e.participants.length === 0) {
+            setStatus("playErrorInfo", "ABR stream is not published", "red");
+            onStopClick(state);    
+        }
+        else {
+            setStatus("playStatus", "ESTABLISHED", "green");
+            $("#placeholder").hide();
+        }
+    }).on(constants.SFU_ROOM_EVENT.FAILED, function(e) {
+        // Display error state
+        setStatus("playErrorInfo", e, "red");
+    }).on(constants.SFU_ROOM_EVENT.OPERATION_FAILED, function (e) {
+        // Display the operation failed
+        setStatus("playErrorInfo", e.operation + " failed: " + e.error, "red");
+    }).on(constants.SFU_ROOM_EVENT.ENDED, function () {
+        // Publishing is stopped, dispose playback and close connection
+        setStatus("playErrorInfo", "ABR stream is stopped", "red");
+        onStopClick(state);
+    });
+    playStreams(state);
+}
+
+const onDisconnected = function(state) {
+    $("#placeholder").show();
+    $("#playBtn").text("Play").off('click').click(function () {
+        onStartClick(state);
+    }).prop('disabled', false);
+    $('#url').prop('disabled', false);
+    $("#streamName").prop('disabled', false);
+}
+
+const onStartClick = function(state) {
+    if (validateForm("connectionForm")) {
+        $("#playBtn").prop('disabled', true);
+        if (Browser().isSafariWebRTC()) {
+            playFirstSound(document.getElementById("main"), PRELOADER_URL).then(function () {
+                connect(state);
+            });
+        } else {
+            connect(state);
+        }
+    }
+}
+
+const onStopClick = function(state) {
+    $("#playBtn").prop('disabled', true);
+    stopStreams(state);
+    state.session.disconnect();
+}
+
+const playStreams = function(state) {
+    // Create remote display item to show remote streams
+    state.setDisplay(initRemoteDisplay({
+        div: document.getElementById("remoteVideo"),
+        room: state.room,
+        peerConnection: state.pc,
+        displayOptions: {
+            publisher: false,
+            quality: true
+        }
+    }));
+    state.room.join(state.pc);
+}
+
+const stopStreams = function(state) {
+    state.disposeDisplay();
+}
+
+const setStatus = function (status, text, color) {
+    color = color || "black";
+    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;
+            setStatus("playErrorInfo", "Fields cannot be empty", "red");
+        } else {
+            removeHighlight($(this));
+            setStatus("playErrorInfo", "");
+        }
+    });
+    return valid;
+
+    function highlightInput(input) {
+        input.closest('.form-group').addClass("has-error");
+    }
+
+    function removeHighlight(input) {
+        input.closest('.form-group').removeClass("has-error");
+    }
+}