@flashphoner/websdk 2.0.239 → 2.0.240

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.239
+Web SDK - 2.0.240
 
 [Download builds](https://docs.flashphoner.com/display/WEBSDK2EN/Web+SDK+release+notes)
 

package/examples/demo/dependencies/js/utils.js

@@ -405,7 +405,7 @@ function downScaleToFitSize(videoWidth, videoHeight, dstWidth, dstHeight) {
  *
  * @param video
  */
-function setWebkitFullscreenHandlers(video) {
+function setWebkitFullscreenHandlers(video, startFullScreen = true) {
     if (video) {
         let needRestart = false;
         let wasFullscreen = false;
@@ -422,20 +422,22 @@ function setWebkitFullscreenHandlers(video) {
             wasFullscreen = true;
             video.play();
             needRestart = true;
-        });                
-        // Start playback in fullscreen if webkit-playsinline is set
-        video.addEventListener("playing", function () {
-            // Do not enter fullscreen again if we just left it #WCS-3860
-            if (canWebkitFullScreen(video) && !wasFullscreen) {
-                // We should catch if fullscreen mode is not available
-                try {
-                    video.webkitEnterFullscreen();
-                } catch (e) {
-                    console.log("Fullscreen is not allowed: " + e);
-                }
-            }
-            wasFullscreen = false;
         });
+        if (startFullScreen) {
+            // Start playback in fullscreen if webkit-playsinline is set
+            video.addEventListener("playing", function () {
+                // Do not enter fullscreen again if we just left it #WCS-3860
+                if (canWebkitFullScreen(video) && !wasFullscreen) {
+                    // We should catch if fullscreen mode is not available
+                    try {
+                        video.webkitEnterFullscreen();
+                    } catch (e) {
+                        console.log("Fullscreen is not allowed: " + e);
+                    }
+                }
+                wasFullscreen = false;
+            });
+        }
     } else {
         console.log("No video tag is passed, skip webkit fullscreen handlers setup");
     }

package/examples/demo/streaming/hls-player/hls-player.js

@@ -3,7 +3,11 @@ const VIDEOJS_VERSION_TYPE = {
     VIDEOJS7: "videojs7",
     VIDEOJS8: "videojs8"
 };
+const LIVE_THRESHOLD = 5;
+const LIVE_TOLERANCE = 5;
+const LIVE_UI_INTERVAL = 1000;
 let player = null;
+let liveUITimer = null;
 let videojsVersion = getUrlParam("version");
 
 const loadPlayerPage = function() {
@@ -116,6 +120,10 @@ const initPage = function() {
     enableItem("applyBtn");
     setText("applyBtn", "Play");
     setHandler("applyBtn", "click", playBtnClick);
+    setHandler("backBtn10", "click", backBtnClick);
+    setHandler("backBtn30", "click", backBtnClick);
+    setHandler("backBtnMax", "click", backBtnClick);
+    setHandler("liveBtn", "click", liveBtnClick);
     let remoteVideo = document.getElementById('remoteVideo');
     remoteVideo.className = "video-js vjs-default-skin";
     player = initVideoJsPlayer(remoteVideo);
@@ -144,6 +152,21 @@ const playBtnClick = function() {
                 playBtnClick();
             }
         });
+        player.on('playing', function() {
+            console.log("playing event fired");
+            if (player.liveTracker) {
+                if (!player.liveTracker.isLive()) {
+                    // A cratch to display live UI for the first subscriber
+                    liveUIDisplay();
+                }
+                if (player.liveTracker.atLiveEdge()) {
+                    // Unlock backward buttons when seeked to live edge
+                    toggleBackButtons(true);
+                    // Stop live UI startup timer
+                    stopLiveUITimer();
+                }
+            }
+        });
         player.src({
             src: videoSrc,
             type: "application/vnd.apple.mpegurl"
@@ -152,36 +175,72 @@ const playBtnClick = function() {
     }
 }
 
+const liveUIDisplay = function() {
+    stopLiveUITimer()
+    if (player && player.liveTracker) {
+        liveUITimer = setInterval(function() {
+            if (!player.liveTracker.isLive() && player.liveTracker.liveWindow() > LIVE_THRESHOLD) {
+                // Live UI is not displayed yet, seek to live edge to display
+                player.liveTracker.seekToLiveEdge();
+            }
+        }, LIVE_UI_INTERVAL)
+    }
+}
+
+const stopLiveUITimer = function () {
+    if (liveUITimer) {
+        clearInterval(liveUITimer);
+        liveUITimer = null;
+    }
+}
 
 const stopBtnClick = function() {
     if (player != null) {
         console.log("Stop VideoJS player");
-        //player.pause();
+        stopLiveUITimer();
         player.dispose();
     }
     onStopped();
 }
 
+const backBtnClick = function(event) {
+    if (player != null && player.liveTracker) {
+        toggleBackButtons(false);
+        let seekable = player.seekable();
+        let backTime = -1;
+        if (event.target.id.indexOf("10") !== -1) {
+            backTime = player.currentTime() - 10;
+        } else if (event.target.id.indexOf("30") !== -1) {
+            backTime = player.currentTime() - 30;
+        }
+        if (backTime < 0) {
+            backTime = seekable ? seekable.start(0) : player.currentTime();
+        }
+        player.currentTime(backTime);
+    }
+}
+
+const liveBtnClick = function() {
+    if (player != null && player.liveTracker) {
+        player.liveTracker.seekToLiveEdge();
+        toggleBackButtons(true);
+    }
+}
 
 const onStarted = function() {
-    disableItem("urlServer");
-    disableItem("playStream");
-    disableItem("key");
-    disableItem("token");
-    disableItem("player");
+    toggleInputs(false);
     enableItem("applyBtn");
+    showItem("backward");
+    toggleBackButtons(true);
     setText("applyBtn", "Stop");
     setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
 }
 
 
 const onStopped = function() {
-    enableItem("urlServer");
-    enableItem("playStream");
-    enableItem("key");
-    enableItem("token");
-    enableItem("player");
+    toggleInputs(true);
     enableItem("applyBtn");
+    hideItem("backward");
     setText("applyBtn", "Play");
     setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
     if(!document.getElementById('remoteVideo')) {
@@ -248,13 +307,21 @@ const removeHighlight = function(input) {
 }
 
 const initVideoJsPlayer = function(video) {
-    let videoJsPlayer = videojs(video);
+    let videoJsPlayer = videojs(video, {
+        playsinline: true,
+        playbackRates: [0.1, 0.25, 0.5, 1, 1.5, 2],
+        liveui: true,
+        liveTracker: {
+            trackingThreshold: LIVE_THRESHOLD,
+            liveTolerance: LIVE_TOLERANCE
+        }
+    });
     console.log("Using VideoJs " + videojs.VERSION);
     if (Browser.isSafariWebRTC() && Browser.isiOS()) {
         // iOS hack when using standard controls to leave fullscreen mode
         let videoTag = getActualVideoTag();
         if(videoTag) {
-            setWebkitFullscreenHandlers(videoTag);
+            setWebkitFullscreenHandlers(videoTag, false);
         }
     }
     return videoJsPlayer;
@@ -267,3 +334,31 @@ const getActualVideoTag = function() {
     }
     return null;
 }
+
+const toggleBackButtons = function(enable) {
+    if (enable) {
+        enableItem("backBtn10");
+        enableItem("backBtn30");
+        enableItem("backBtnMax");
+    } else {
+        disableItem("backBtn10");
+        disableItem("backBtn30");
+        disableItem("backBtnMax");
+    }
+}
+
+const toggleInputs = function(enable) {
+    if (enable) {
+        enableItem("urlServer");
+        enableItem("playStream");
+        enableItem("key");
+        enableItem("token");
+        enableItem("player");
+    } else {
+        disableItem("urlServer");
+        disableItem("playStream");
+        disableItem("key");
+        disableItem("token");
+        disableItem("player");
+    }
+}

package/examples/demo/streaming/hls-player/player-page.html

@@ -44,13 +44,24 @@
                     </div>
                 </div>
                 <div class="row" style="margin-top: 20px">
-                    <div class="col-sm-6 text-left">
+                    <div class="col-sm-4 text-left">
                         <div id="llHlsMode" style="display: none;">
                             <input id="llHlsEnabled" class="form-check-input" type="checkbox" value="">
                             <label class="form-check-label" for="llHlsEnabled">Low latency HLS</label>
                         </div>
                     </div>
-                    <div class="col-sm-6 text-right">
+                    <div class="col-sm-5">
+                        <div id="backward" style="display: none;">
+                            <label class="form-check-label text-right" for="backBtnMax">&lt;&lt; seconds</label>
+                            <div class="input-group-btn">
+                                <button id="backBtnMax" type="button" class="btn btn-default">Max</button>
+                                <button id="backBtn30" type="button" class="btn btn-default">30</button>
+                                <button id="backBtn10" type="button" class="btn btn-default">10</button>
+                                <button id="liveBtn" type="button" class="btn btn-default">Live</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-3 text-right">
                         <button id="applyBtn" type="button" class="btn btn-default">Play</button>
                     </div>
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/websdk",
-  "version": "2.0.239",
+  "version": "2.0.240",
   "description": "Official Flashphoner WebCallServer WebSDK package",
   "main": "./src/flashphoner-core.js",
   "types": "./src/flashphoner-core.d.ts",