@flashphoner/websdk 2.0.244 → 2.0.246

package/docTemplate/README.md

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

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

@@ -1,11 +1,18 @@
 const Browser = Flashphoner.Browser;
 const STATS_INTERVAL = 1000;
+const QUALITY_COLORS = {
+    NONE: "",
+    AVAILABLE: "black",
+    SELECTED: "blue"
+};
+const QUALITY_AUTO = "Auto";
 let remoteVideo = null;
 let hlsPlayer = null;
 let playSrc = getUrlParam("src");
 let autoplay = eval(getUrlParam("autoplay")) || false;
 let llHlsEnabled = eval(getUrlParam("llhls")) || false;
 let playbackStats = null;
+let qualityLevels = [];
 
 const loadPlayerPage = function() {
     loadPage("../hls-player/player-page.html", "playerPage", initPage );
@@ -72,10 +79,12 @@ const playBtnClick = function() {
         hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function() {
             console.log("Play with HLS.js");
             remoteVideo.play();
+            initQualityLevels(hlsPlayer);
         });
         remoteVideo.onplaying = () => {
             console.log("playing event fired");
             displayPermalink(videoSrc);
+            displayQualitySwitch();
         }
         hlsPlayer.loadSource(videoSrc);
         hlsPlayer.attachMedia(remoteVideo);
@@ -91,7 +100,7 @@ const getHlsConfig = function(llHlsEnabled) {
         backBufferLength: 90,
         manifestLoadingTimeOut: 15000
     };
-    console.log("Low Latency HLS: "+llHlsEnabled)
+    console.log("Low Latency HLS: " + llHlsEnabled)
     if(llHlsEnabled) {
         // Here we configure HLS.JS for lower latency
         config = {
@@ -146,6 +155,8 @@ function onStopped() {
         setText("applyBtn", "Play");
         setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
         stopPlaybackStats();
+        hideItem("quality");
+        disposeQualityLevels();
     }
 }
 
@@ -248,6 +259,12 @@ const displayPermalink = function(src) {
     }
 }
 
+const displayQualitySwitch = function() {
+    if (!autoplay && qualityLevels.length) {
+        showItem("quality")
+    }
+}
+
 const hideAllToAutoplay = function() {
     hideItem("header");
     hideItem("notifyFlash");
@@ -342,4 +359,65 @@ const PlaybackStats = function(interval) {
         }
     };
     return playbackStats;
+}
+
+const initQualityLevels = function(player) {
+    if (player) {
+        let qualityDiv = document.getElementById("qualityBtns");
+        let qualityLevel;
+        for (let i = 0; i < player.levels.length; i++) {
+            qualityLevel = QualityLevel(player, player.levels[i].height, i, qualityDiv);
+            qualityLevels.push(qualityLevel);
+        }
+        if (qualityLevels.length) {
+            qualityLevel = QualityLevel(player, QUALITY_AUTO, -1, qualityDiv);
+            qualityLevels.push(qualityLevel);
+        }
+    }
+}
+
+const disposeQualityLevels = function() {
+    qualityLevels.forEach(level => {
+        if (level.button) {
+            level.button.remove();
+        }
+    });
+    qualityLevels = [];
+}
+
+const qualityBtnClick = function(button, player, index) {
+    if (player) {
+        player.currentLevel = index;
+    }
+    button.style.color = QUALITY_COLORS.SELECTED;
+    qualityLevels.forEach(item => {
+        if (item.button.id !== button.id) {
+            item.button.style.color = QUALITY_COLORS.AVAILABLE
+        }
+    });
+}
+
+const QualityLevel = function(object, levelId, index, btnParent) {
+    const btnId = "qualityBtn";
+    let button = document.createElement("button");
+    if (levelId === QUALITY_AUTO && index === -1) {
+        button.id = btnId + QUALITY_AUTO;
+        button.innerHTML = QUALITY_AUTO
+    } else {
+        button.id = btnId + index;
+        button.innerHTML = levelId;
+    }
+    button.type = "button";
+    button.className = "btn btn-default";
+    button.style.color = QUALITY_COLORS.AVAILABLE;
+    button.onclick = (event) => {
+        qualityBtnClick(button, object, index);
+    };
+    btnParent.appendChild(button);
+    const qualityLevel = {
+        level: levelId,
+        index: index,
+        button: button
+    };
+    return qualityLevel;
 }

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

@@ -7,12 +7,19 @@ const LIVE_THRESHOLD = 5;
 const LIVE_TOLERANCE = 5;
 const LIVE_UI_INTERVAL = 1000;
 const STATS_INTERVAL = 1000;
+const QUALITY_COLORS = {
+    NONE: "",
+    AVAILABLE: "black",
+    SELECTED: "blue"
+};
+const QUALITY_AUTO = "Auto";
 let player = null;
 let liveUITimer = null;
 let videojsVersion = getUrlParam("version");
 let playSrc = getUrlParam("src");
 let autoplay = eval(getUrlParam("autoplay")) || false;
 let playbackStats = null;
+let qualityLevels = [];
 
 const loadPlayerPage = function() {
     if (videojsVersion) {
@@ -44,27 +51,50 @@ const loadPlayerPage = function() {
     }
 }
 
-const onVideojsBtnClick = function () {
+const onVideojsBtnClick = function() {
     loadVideoJS(getValue("videojsInput"));
 }
 
-const loadVideoJS = function (version) {
+const loadVideoJS = function(version) {
     if (version) {
         videojsVersion = version;
         let playerPage = document.getElementById("playerPage");
         loadFile(version + "/video.js", "text/javascript").then( data  => {
             console.log("HLS library loaded successfully", data);
-            loadFile(version + "/video-js.css", "stylesheet").then ( data => {
-                console.log("HLS library stylesheet loaded successfully", data);
+            loadStyles(version, playerPage);
+        }).catch( err => {
+            setText("videojsError", "Can't load VideoJS library");
+            console.error(err);
+        });
+    }
+}
+
+const loadStyles = function(version, playerPage) {
+    if (version) {
+        loadFile(version + "/video-js.css", "stylesheet").then ( data => {
+            console.log("HLS library stylesheet loaded successfully", data);
+            if (version === VIDEOJS_VERSION_TYPE.VIDEOJS7) {
+                loadQualityPlugin(version, playerPage);
+            } else {
                 hideItem("videojsInputForm");
                 loadPage("player-page.html", "playerPage", initPage);
-            }).catch( err => {
-                playerPage.innerHTML = "Can't load VideoJS library stylesheet";
-                playerPage.setAttribute("class", "text-danger");
-                console.error(err);
-            })
+            }
         }).catch( err => {
-            setText("videojsError", "Can't load VideoJS library");
+            playerPage.innerHTML = "Can't load VideoJS library stylesheet";
+            playerPage.setAttribute("class", "text-danger");
+            console.error(err);
+        });
+    }
+}
+
+const loadQualityPlugin = function(version, playerPage) {
+    if (version) {
+        loadFile(version + "/videojs-contrib-quality-levels.js", "text/javascript").then( data => {
+            console.log("HLS quality levels plugin loaded successfully", data);
+            hideItem("videojsInputForm");
+            loadPage("player-page.html", "playerPage", initPage);
+        }).catch( err => {
+            setText("videojsError", "Can't load VideoJS quality levels plugin");
             console.error(err);
         });
     }
@@ -183,6 +213,8 @@ const playBtnClick = function() {
                     stopLiveUITimer();
                 }
             }
+            initQualityLevels(player);
+            displayQualitySwitch();
         });
         player.src({
             src: videoSrc,
@@ -253,6 +285,7 @@ const onStarted = function() {
         setText("applyBtn", "Stop");
         setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
         startPlaybackStats();
+        hideItem("quality");
     }
 }
 
@@ -265,6 +298,8 @@ const onStopped = function() {
         setText("applyBtn", "Play");
         setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
         stopPlaybackStats();
+        hideItem("quality");
+        disposeQualityLevels();
     }
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
@@ -340,7 +375,12 @@ const initVideoJsPlayer = function(video, muted) {
                 liveTolerance: LIVE_TOLERANCE
             },
             fill: true,
-            muted: muted
+            muted: muted,
+            html5: {
+                vhs: {
+                    limitRenditionByPlayerDimensions: false
+                }
+            }
         });
         console.log("Using VideoJs " + videojs.VERSION);
         if (Browser.isSafariWebRTC() && Browser.isiOS()) {
@@ -427,6 +467,12 @@ const displayPermalink = function(src) {
     }
 }
 
+const displayQualitySwitch = function() {
+    if (!autoplay && qualityLevels.length) {
+        showItem("quality")
+    }
+}
+
 const hideAllToAutoplay = function() {
     hideItem("header");
     hideItem("notifyFlash");
@@ -520,4 +566,81 @@ const PlaybackStats = function(interval) {
         }
     };
     return playbackStats;
-}
+}
+
+const initQualityLevels = function(player) {
+    if (player && !qualityLevels.length) {
+        let playerQualityLevels = player.qualityLevels();
+        if (playerQualityLevels) {
+            let qualityDiv = document.getElementById("qualityBtns");
+            let qualityLevel;
+            for (let i = 0; i < playerQualityLevels.length; i++) {
+                qualityLevel = QualityLevel(playerQualityLevels, playerQualityLevels[i].height, i, qualityDiv);
+                qualityLevels.push(qualityLevel);
+            }
+            if (qualityLevels.length) {
+                qualityLevel = QualityLevel(playerQualityLevels, QUALITY_AUTO, -1, qualityDiv);
+                qualityLevels.push(qualityLevel);
+            }
+        }
+    }
+}
+
+const disposeQualityLevels = function() {
+    qualityLevels.forEach(level => {
+        if (level.button) {
+            level.button.remove();
+        }
+    });
+    qualityLevels = [];
+}
+
+const qualityBtnClick = function(button, playerQualityLevels, index) {
+    if (playerQualityLevels && playerQualityLevels.length) {
+        let currentIndex = playerQualityLevels.selectedIndex_;
+        for (let i = 0; i < playerQualityLevels.length; i++) {
+            let qualityLevel = playerQualityLevels[i];
+            if (index === -1 || i === index) {
+                qualityLevel.enabled = true;
+            } else if (i === index) {
+                qualityLevel.enabled = true;
+                currentIndex = index;
+            } else {
+                qualityLevel.enabled = false;
+            }
+        }
+        playerQualityLevels.selectedIndex_ = currentIndex;
+        playerQualityLevels.trigger({ type: 'change', selectedIndex: currentIndex });
+    }
+    button.style.color = QUALITY_COLORS.SELECTED;
+    qualityLevels.forEach(item => {
+        if (item.button.id !== button.id) {
+            item.button.style.color = QUALITY_COLORS.AVAILABLE
+        }
+    });
+}
+
+const QualityLevel = function(object, levelId, index, btnParent) {
+    const btnId = "qualityBtn";
+    let button = document.createElement("button");
+    if (levelId === QUALITY_AUTO && index === -1) {
+        button.id = btnId + QUALITY_AUTO;
+        button.innerHTML = QUALITY_AUTO;
+    } else {
+        button.id = btnId + index;
+        button.innerHTML = levelId;
+    }
+    button.type = "button";
+    button.className = "btn btn-default";
+    button.style.color = QUALITY_COLORS.AVAILABLE;
+    button.onclick = (event) => {
+        qualityBtnClick(button, object, index);
+    };
+    btnParent.appendChild(button);
+    const qualityLevel = {
+        level: levelId,
+        index: index,
+        button: button
+    };
+    return qualityLevel;
+}

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

@@ -55,22 +55,40 @@
                     </div>
                 </div>
 
-                <div class="row" style="margin-top:10px">
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-4 text-left" 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="row" style="margin-top: 5px">
                     <div class="col-sm-12 text-center">
                         <a id="permalink" href="#">Permalink</a>
                     </div>
                 </div>
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-12 text-center">
+                        <button id="applyBtn" type="button" class="btn btn-default">Play</button>
+                    </div>
+                </div>
 
-                <div class="row" style="margin-top: 20px">
-                    <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 class="row" style="margin-top: 10px">
+                    <div class="col-sm-12" id="quality" style="display: none;">
+                        <div class="col-sm-4 text-right">
+                            <label class="form-check-label" for="qualityBtns">Quality</label>
+                        </div>
+                        <div class="col-sm-8 text-center">
+                            <div class="input-group-btn" id="qualityBtns">
+                            </div>
                         </div>
                     </div>
-                    <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>
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-12" id="backward" style="display: none;">
+                        <div class="col-sm-4 text-right">
+                            <label class="form-check-label" for="backBtnMax">Rewind back</label>
+                        </div>
+                        <div class="col-sm-8 text-center">
                             <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>
@@ -79,9 +97,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-sm-3 text-right">
-                        <button id="applyBtn" type="button" class="btn btn-default">Play</button>
-                    </div>
                 </div>
             </fieldset>
         </div>