@flashphoner/websdk 2.0.243 → 2.0.245

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

@@ -7,16 +7,29 @@ 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) {
         hideItem("videojsInputForm");
-        loadVideoJS("videojs" + videojsVersion);
+        loadVideoJS(videojsVersion);
     } else {
+        if (autoplay) {
+            console.warn("No VideoJS version set, autoplay disabled");
+            autoplay = false;
+        }
         let videojsInput = document.getElementById("videojsInput");
         for (videojsType in VIDEOJS_VERSION_TYPE) {
             let option = document.createElement("option");
@@ -38,24 +51,17 @@ 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);
-                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);
-            })
+            loadStyles(version, playerPage);
         }).catch( err => {
             setText("videojsError", "Can't load VideoJS library");
             console.error(err);
@@ -63,6 +69,37 @@ const loadVideoJS = function (version) {
     }
 }
 
+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);
+        });
+    }
+}
+
+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);
+        });
+    }
+}
+
 const loadFile = function(url, type) {
     return new Promise((resolve, reject) => {
         try {
@@ -117,31 +154,37 @@ const loadPage = function(page, containerId, onLoad) {
 }
 
 const initPage = function() {
-    setText("header", "HLS VideoJS Player Minimal");
-    setValue("urlServer", getHLSUrl());
-    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);
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
+    }
     let remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.className = "video-js vjs-default-skin";
-    player = initVideoJsPlayer(remoteVideo);
-    playbackStats = PlaybackStats(STATS_INTERVAL);
+    if (autoplay) {
+        // There should not be any visible item on the page unless player
+        hideAllToAutoplay();
+        // The player should use all available page width
+        setUpPlayerItem(true);
+        // The player should be muted to automatically start playback
+        player = initVideoJsPlayer(remoteVideo, true);
+        playBtnClick();
+    } else {
+        // No autoplay, all the forms and buttons should be visible
+        setText("header", "HLS VideoJS Player Minimal");
+        displayCommonItems();
+        setUpButtons();
+        enablePlaybackStats();
+        // The player should have a maximum fixed size
+        setUpPlayerItem(false);
+        // The player can be unmuted because user should click Play button
+        player = initVideoJsPlayer(remoteVideo, false);
+    }
 }
 
 const playBtnClick = function() {
-    if (validateForm()) {
-        let streamName = getValue('playStream');
-        streamName = encodeURIComponent(streamName);
-        let videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
-        let key = getValue('key');
-        let token = getValue("token");
-        if (key.length > 0 && token.length > 0) {
-            videoSrc += "?" + key + "=" + token;
-        }
+    let videoSrc = getVideoSrc(getValue("fullLink"));
+    if (videoSrc) {
         player.on('loadedmetadata', function() {
             console.log("Play with VideoJs");
             player.play();
@@ -157,6 +200,7 @@ const playBtnClick = function() {
         });
         player.on('playing', function() {
             console.log("playing event fired");
+            displayPermalink(videoSrc);
             if (player.liveTracker) {
                 if (!player.liveTracker.isLive()) {
                     // A cratch to display live UI for the first subscriber
@@ -169,6 +213,8 @@ const playBtnClick = function() {
                     stopLiveUITimer();
                 }
             }
+            initQualityLevels(player);
+            displayQualitySwitch();
         });
         player.src({
             src: videoSrc,
@@ -231,23 +277,30 @@ const liveBtnClick = function() {
 }
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    showItem("backward");
-    toggleBackButtons(true);
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
-    playbackStats.start();
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        showItem("backward");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+        hideItem("quality");
+    }
 }
 
 
 const onStopped = function() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    hideItem("backward");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
-    playbackStats.stop();
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        hideItem("backward");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+        hideItem("quality");
+        disposeQualityLevels();
+    }
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
     }
@@ -264,7 +317,7 @@ const createRemoteVideo = function(parent) {
     remoteVideo.setAttribute("playsinline","");
     remoteVideo.setAttribute("webkit-playsinline","");
     parent.appendChild(remoteVideo);
-    player = initVideoJsPlayer(remoteVideo);
+    player = initVideoJsPlayer(remoteVideo, autoplay);
 }
 
 
@@ -309,23 +362,33 @@ const removeHighlight = function(input) {
     }
 }
 
-const initVideoJsPlayer = function(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
-        },
-        fill: true
-    });
-    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, false);
+const initVideoJsPlayer = function(video, muted) {
+    let videoJsPlayer = null;
+    if (video) {
+        video.className = "video-js vjs-default-skin";
+        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
+            },
+            fill: true,
+            muted: muted,
+            html5: {
+                vhs: {
+                    limitRenditionByPlayerDimensions: false
+                }
+            }
+        });
+        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, false);
+            }
         }
     }
     return videoJsPlayer;
@@ -339,15 +402,25 @@ const getActualVideoTag = function() {
     return null;
 }
 
+const setUpButtons = function() {
+    setHandler("applyBtn", "click", playBtnClick);
+    setHandler("backBtn10", "click", backBtnClick);
+    setHandler("backBtn30", "click", backBtnClick);
+    setHandler("backBtnMax", "click", backBtnClick);
+    setHandler("liveBtn", "click", liveBtnClick);
+}
+
 const toggleBackButtons = function(enable) {
-    if (enable) {
-        enableItem("backBtn10");
-        enableItem("backBtn30");
-        enableItem("backBtnMax");
-    } else {
-        disableItem("backBtn10");
-        disableItem("backBtn30");
-        disableItem("backBtnMax");
+    if (!autoplay) {
+        if (enable) {
+            enableItem("backBtn10");
+            enableItem("backBtn30");
+            enableItem("backBtnMax");
+        } else {
+            disableItem("backBtn10");
+            disableItem("backBtn30");
+            disableItem("backBtnMax");
+        }
     }
 }
 
@@ -367,6 +440,88 @@ const toggleInputs = function(enable) {
     }
 }
 
+const getVideoSrc = function(src) {
+    let videoSrc = src;
+    if (validateForm()) {
+        let streamName = getValue('playStream');
+        streamName = encodeURIComponent(streamName);
+        videoSrc = getValue("urlServer") + '/' + streamName + '/' + streamName + '.m3u8';
+        let key = getValue('key');
+        let token = getValue("token");
+        if (key.length > 0 && token.length > 0) {
+            videoSrc += "?" + key + "=" + token;
+        }
+    }
+    setValue("fullLink", videoSrc);
+    return videoSrc;
+}
+
+const displayPermalink = function(src) {
+    if (!autoplay) {
+        const permalinkId = "permalink";
+        let videoSrc = encodeURIComponent(src);
+        let linkObject = document.getElementById(permalinkId);
+        let href = window.location.href.split("?")[0] + "?version=" + videojsVersion + "&src=" + videoSrc;
+        linkObject.href = href;
+        showItem(permalinkId);
+    }
+}
+
+const displayQualitySwitch = function() {
+    if (!autoplay && qualityLevels.length) {
+        showItem("quality")
+    }
+}
+
+const hideAllToAutoplay = function() {
+    hideItem("header");
+    hideItem("notifyFlash");
+    hideItem("fieldset");
+    hideItem("stats");
+}
+
+const displayCommonItems = function() {
+    setValue("urlServer", getHLSUrl());
+    hideItem("permalink");
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+}
+
+const setUpPlayerItem = function(fillPage) {
+    let videoContainer = document.getElementById('videoContainer');
+    let playerPage = document.getElementById('playerPage');
+
+    if (fillPage) {
+        playerPage.classList.remove("container");
+        videoContainer.style.marginTop = "0px";
+        videoContainer.style.width = "100vw";
+        videoContainer.style.height = "100vh";
+        videoContainer.style.maxWidth = "available";
+        videoContainer.style.maxHeight = "available";
+    } else {
+        videoContainer.style.maxWidth = "852px";
+        videoContainer.style.maxHeight = "480px";
+    }
+}
+
+const enablePlaybackStats = function() {
+    if (!autoplay && !playbackStats) {
+        playbackStats = PlaybackStats(STATS_INTERVAL);
+    }
+}
+
+const startPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.start();
+    }
+}
+
+const stopPlaybackStats = function() {
+    if (!autoplay && playbackStats) {
+        playbackStats.stop();
+    }
+}
+
 const PlaybackStats = function(interval) {
     const playbackStats = {
         interval: interval || STATS_INTERVAL,
@@ -374,7 +529,6 @@ const PlaybackStats = function(interval) {
         stats: null,
         start: function() {
             let video = getActualVideoTag();
-
             playbackStats.stop();
             stats = HTML5Stats(video);
             playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval);
@@ -412,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

@@ -28,9 +28,9 @@
                 </div>
 
                 <div class="row" style="margin-top:10px">
-                    <div class="form-group">
+                    <div id="authForm" class="form-group">
                         <label class="control-label col-sm-1 fp-buttonVerticalAlign  text-left"
-                               for="playStream">Auth</label>
+                               for="key">Auth</label>
 
                         <div class="col-sm-12">
                             <div class="col-sm-4 nopadding">
@@ -43,16 +43,52 @@
                         </div>
                     </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 id="linkForm" class="form-group">
+                        <label class="control-label col-sm-12 fp-buttonVerticalAlign  text-left"
+                               for="fullLink">Or set a full HLS stream URL</label>
+
+                        <div class="col-sm-12">
+                            <input type="text" class="form-control" id="fullLink" placeholder="Full HLS link"/>
                         </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-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: 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>
+                <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>
@@ -61,15 +97,12 @@
                             </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>
     </div>
     <div class="row">
-        <div id="videoContainer" class="col-sm-12 text-center" style="margin-top: 20px; max-width: 852px; width: available; max-height: 480px; height: 56.25vw">
+        <div id="videoContainer" style="margin-top: 20px; width: available; height: 56.25vw">
             <video id="remoteVideo"
                    width="100%"
                    height="100%"