@flashphoner/websdk 2.0.239 → 2.0.241

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.239
+Web SDK - 2.0.241
 
 [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/embed_player/player.js

@@ -167,6 +167,8 @@ function playStream(session) {
             console.log("Not enough bandwidth, consider using lower video resolution or bitrate. Bandwidth " + (Math.round(networkBandwidth / 1000)) + " bitrate " + (Math.round(remoteBitrate / 1000)));
         } else if (STREAM_EVENT_TYPE.RESIZE === streamEvent.type) {
             console.log("New video size: " + streamEvent.payload.streamerVideoWidth + "x" + streamEvent.payload.streamerVideoHeight);
+        } else if (STREAM_EVENT_TYPE.UNMUTE_REQUIRED === streamEvent.type) {
+            console.log("Stream is muted by autoplay policy, user action required to unmute");
         }
     });
     playingStream.play();

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/examples/demo/streaming/player/player.html

@@ -54,6 +54,14 @@
                         <div id="volumeControl" style="margin-top: 12px"></div>
                     </div>
                 </div>
+                <div id="unmute" class="form-group">
+                    <label class="col-sm-2 control-label">Unmute</label>
+                    <div class="col-sm-1">
+                        <button type="button" class="btn btn-default btn-sm" id="unmuteBtn">
+                            <span class="glyphicon glyphicon-volume-off"></span>
+                        </button>
+                    </div>
+                </div>
                 <div id="fullScreen" class="form-group">
                     <label class="col-sm-2 control-label">Full Screen</label>
                     <div class="col-sm-1" >

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

@@ -44,12 +44,8 @@ function init_page() {
         step: 10,
         animate: true,
         slide: function(event, ui) {
-            //WCS-2375. fixed autoplay in ios safari
-            if (stream.isRemoteAudioMuted()) {
-                stream.unmuteRemoteAudio();
-            }
             currentVolumeValue = ui.value;
-            stream.setVolume(currentVolumeValue);
+            setStreamVolume(stream, currentVolumeValue);
         }
     }).slider("disable");
     onStopped();
@@ -87,6 +83,8 @@ function onStopped() {
     $("#volumeControl").slider("disable");
     $("#fullScreenBtn").prop('disabled', true);
     $("#preloader").hide();
+    $("#unmuteBtn").off('click').click(unmuteBtnClick);
+    $("#unmute").hide();
 }
 
 function playBtnClick() {
@@ -108,6 +106,11 @@ function playBtnClick() {
     }
 }
 
+function unmuteBtnClick() {
+    setStreamVolume(stream, currentVolumeValue)
+    $("#volumeControl").slider('value', currentVolumeValue);
+}
+
 function start() {
     var url = $('#url').val();
     //check if we already have session
@@ -200,6 +203,14 @@ function playStream(session) {
             video.addEventListener("playing", function () {
                 $("#preloader").hide();
             });
+            // Hide unmute button
+            video.addEventListener("volumechange", function () {
+                if (video.muted) {
+                    $("#unmute").show();
+                } else {
+                    $("#unmute").hide();
+                }
+            });
         }
     }).on(STREAM_STATUS.PLAYING, function (stream) {
         // Android Firefox may pause stream playback via MSE even if video element is muted
@@ -225,8 +236,10 @@ function playStream(session) {
             console.log("Not enough bandwidth, consider using lower video resolution or bitrate. Bandwidth " + (Math.round(networkBandwidth / 1000)) + " bitrate " + (Math.round(remoteBitrate / 1000)));
         } else if (STREAM_EVENT_TYPE.RESIZE === streamEvent.type) {
             console.log("New video size: " + streamEvent.payload.streamerVideoWidth + "x" + streamEvent.payload.streamerVideoHeight);
+        } else if (STREAM_EVENT_TYPE.UNMUTE_REQUIRED === streamEvent.type) {
+            console.log("Stream is muted by autoplay policy, user action required to unmute");
+            $("#unmute").show();
         }
-
     });
     stream.play();
 }
@@ -249,6 +262,15 @@ function setStatus(status, stream) {
     }
 }
 
+function setStreamVolume(stream, currentVolumeValue) {
+    if (stream) {
+        if (stream.isRemoteAudioMuted()) {
+            stream.unmuteRemoteAudio();
+        }
+        stream.setVolume(currentVolumeValue);
+    }
+}
+
 function validateForm() {
     var valid = true;
     $('#form :text').each(function(){