@flashphoner/websdk 2.0.243 → 2.0.245

package/docTemplate/README.md

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

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

@@ -1,8 +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 );
@@ -22,17 +32,37 @@ const loadPage = function(page, containerId, onLoad) {
 }
 
 const initPage =  function() {
-    setText("header", "HLS.JS Player Minimal");
-    setValue("urlServer", getHLSUrl());
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick);
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
+    }
+    if (llHlsEnabled) {
+        setCheckbox("llHlsEnabled", llHlsEnabled);
+    }
     remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.style ="background-color: lightgrey;";
     if (Hls.isSupported()) {
         console.log("Using HLS.JS " + Hls.version);
-        enableItem("applyBtn");
-        showItem("llHlsMode");
-        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
+            initVideoPlayer(remoteVideo, true);
+            playBtnClick();
+        } else {
+            setText("header", "HLS.JS Player Minimal");
+            showItem("llHlsMode");
+            displayCommonItems();
+            setUpButtons();
+            enablePlaybackStats();
+            // The player should have a maximum fixed size
+            setUpPlayerItem(false);
+            // The player can be unmuted because user should click Play button
+            initVideoPlayer(remoteVideo, false);
+        }
     } else {
         setText("notifyFlash", "Your browser doesn't support MSE technology required to play video");
         disableItem("applyBtn");
@@ -42,21 +72,20 @@ const initPage =  function() {
 
 
 const playBtnClick = function() {
-    if (validateForm()) {
-        let llHlsEnabled = getCheckbox("llHlsEnabled");
-        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) {
+        llHlsEnabled = getCheckbox("llHlsEnabled");
         hlsPlayer = new Hls(getHlsConfig(llHlsEnabled));
         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);
         onStarted();            
@@ -71,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 = {
@@ -108,20 +137,27 @@ const stopBtnClick = function() {
 
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
-    playbackStats.start();
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 function onStopped() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
-    playbackStats.stop();
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+        hideItem("quality");
+        disposeQualityLevels();
+    }
 }
 
 
@@ -166,6 +202,18 @@ const removeHighlight = function(input) {
     }
 }
 
+const initVideoPlayer = function(video, muted) {
+    if (video) {
+        video.style.backgroundColor = "black";
+        video.muted = muted;
+    }
+}
+
+const setUpButtons = function() {
+    setHandler("applyBtn", "click", playBtnClick);
+}
+
+
 const toggleInputs = function(enable) {
     if (enable) {
         enableItem("urlServer");
@@ -184,6 +232,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] + "?llhls=" + llHlsEnabled + "&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,
@@ -229,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-native/hls-native.js

@@ -1,6 +1,8 @@
 const Browser = Flashphoner.Browser;
 const STATS_INTERVAL = 1000;
 let remoteVideo = null;
+let playSrc = getUrlParam("src");
+let autoplay = eval(getUrlParam("autoplay")) || false;
 let playbackStats = null;
 
 const loadPlayerPage = function() {
@@ -21,19 +23,33 @@ const loadPage = function(page, containerId, onLoad) {
 }
 
 const initPage = function() {
-    setText("header", "HLS Native Player Minimal");
-    setValue("urlServer", getHLSUrl());
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick);
-    remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.style ="background-color: lightgrey;";
-    if (Browser.isSafariWebRTC() && Browser.isiOS()) {
-        // iOS hack when using standard controls to leave fullscreen mode
-        setWebkitFullscreenHandlers(remoteVideo);
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
     }
+    remoteVideo = document.getElementById('remoteVideo');
     if (remoteVideo.canPlayType('application/vnd.apple.mpegurl') && Browser.isSafariWebRTC()) {
-        enableItem("applyBtn");
-        playbackStats = PlaybackStats(STATS_INTERVAL);
+        console.log("Using Native HLS player");
+        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
+            initVideoPlayer(remoteVideo, true);
+            playBtnClick();
+        } else {
+            setText("header", "HLS Native 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
+            initVideoPlayer(remoteVideo, false);
+        }
     } else {
         setText("notifyFlash", "Your browser doesn't support native HLS playback");
         disableItem("applyBtn");
@@ -42,21 +58,18 @@ const initPage = function() {
 }
 
 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;
-        }
-        remoteVideo.src = videoSrc;
-        remoteVideo.addEventListener('loadedmetadata', function() {
+    let videoSrc = getVideoSrc(getValue("fullLink"));
+    if (videoSrc) {
+        remoteVideo.onloadedmetadata = () => {
             console.log("Play native HLS");
             remoteVideo.play();
             onStarted();
-        });
+        };
+        remoteVideo.onplaying = () => {
+            console.log("playing event fired");
+            displayPermalink(videoSrc);
+        };
+        remoteVideo.src = videoSrc;
     }
 }
 
@@ -74,20 +87,25 @@ const stopBtnClick = function() {
 
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
-    playbackStats.start();
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 const onStopped = function() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
-    playbackStats.stop();
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+    }
 }
 
 
@@ -132,6 +150,21 @@ const removeHighlight = function(input) {
     }
 }
 
+const initVideoPlayer = function(video, muted) {
+    if (video) {
+        video.style.backgroundColor = "black";
+        video.muted = muted;
+        if (Browser.isiOS()) {
+            // iOS hack when using standard controls to leave fullscreen mode
+            setWebkitFullscreenHandlers(video);
+        }
+    }
+}
+
+const setUpButtons = function() {
+    setHandler("applyBtn", "click", playBtnClick);
+}
+
 const toggleInputs = function(enable) {
     if (enable) {
         enableItem("urlServer");
@@ -148,6 +181,82 @@ 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] + "?src=" + videoSrc;
+        linkObject.href = href;
+        showItem(permalinkId);
+    }
+}
+
+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,