@flashphoner/websdk 2.0.242 → 2.0.244

package/docTemplate/README.md

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

package/examples/demo/dependencies/js/stats.js

@@ -0,0 +1,105 @@
+/**
+ * HTML5 video playback statistics
+ */
+
+/**
+ * HTML5 statistics item
+ *
+ * @returns {object}
+ * @constructor
+ */
+const HTML5StatsItem = function() {
+    const statsItem = {
+        value: 0,
+        lastData: 0,
+        timestamp: 0,
+        init: function(value, data) {
+            statsItem.setValue(value);
+            statsItem.setLastData(data);
+        },
+        setValue: function(value) {
+            statsItem.value = value;
+        },
+        getValue: function() {
+            return statsItem.value;
+        },
+        setLastData: function(data, timestamp) {
+            statsItem.lastData = data;
+            statsItem.setTimestamp(timestamp);
+        },
+        getLastData: function() {
+            return statsItem.lastData;
+        },
+        setTimestamp: function(timestamp) {
+            statsItem.timestamp = timestamp || Date.now();
+        },
+        getTimestamp: function() {
+            return statsItem.timestamp;
+        },
+        elapsedSecs: function(timestamp) {
+            let now = timestamp || Date.now();
+            return (now - statsItem.timestamp) / 1000;
+        }
+    };
+    return statsItem;
+}
+
+const HTML5Stats = function(video) {
+    const stats = {
+        video: video || null,
+        width: 0,
+        height: 0,
+        bitrate: HTML5StatsItem(),
+        fps: HTML5StatsItem(),
+        init: function(video) {
+            stats.video = video;
+            stats.width = 0;
+            stats.height = 0;
+            stats.bitrate.init(0);
+            stats.fps.init(0);
+        },
+        collect: function() {
+            if (stats.video) {
+                let now = Date.now();
+                let quality = video.getVideoPlaybackQuality();
+
+                if (quality) {
+                    let played = quality.totalVideoFrames - quality.droppedVideoFrames;
+                    if (played !== stats.fps.getLastData()) {
+                        stats.fps.setValue((played - stats.fps.getLastData()) / stats.fps.elapsedSecs(now));
+                        stats.fps.setLastData(played, now);
+                    }
+                } else {
+                    stats.fps.setValue(undefined);
+                }
+
+                if (stats.video.webkitVideoDecodedByteCount !== undefined) {
+                    let decoded = stats.video.webkitVideoDecodedByteCount;
+                    stats.bitrate.setValue(Math.round((decoded - stats.bitrate.getLastData()) * 8 / stats.bitrate.elapsedSecs(now)));
+                    stats.bitrate.setLastData(decoded, now);
+                } else {
+                    stats.bitrate.setValue(undefined);
+                }
+
+                stats.width = stats.video.videoWidth;
+                stats.height = stats.video.videoHeight;
+
+                return true;
+            }
+            return false;
+        },
+        getWidth: function() {
+            return stats.width;
+        },
+        getHeight: function() {
+            return stats.height;
+        },
+        getFps: function() {
+            return stats.fps.getValue();
+        },
+        getBitrate: function() {
+            return stats.bitrate.getValue();
+        }
+    };
+    return stats;
+}

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

@@ -457,7 +457,12 @@ function canWebkitFullScreen(video) {
     return canFullscreen;
 }
 
-// Helper function to set item text
+/**
+ * Helper function to set item text
+ *
+ * @param id
+ * @param text
+ */
 const setText = function (id, text) {
     let item = document.getElementById(id);
     if (item) {
@@ -465,7 +470,12 @@ const setText = function (id, text) {
     }
 }
 
-// Helper functions to set/get an item value
+/**
+ * Helper function to set an item value
+ *
+ * @param id
+ * @param value
+ */
 const setValue = function (id, value) {
     let item = document.getElementById(id);
     if (item) {
@@ -473,6 +483,12 @@ const setValue = function (id, value) {
     }
 }
 
+/**
+ * Helper function to get an item value
+ *
+ * @param id
+ * @returns value
+ */
 const getValue = function (id) {
     let item = document.getElementById(id);
     if (item) {
@@ -481,7 +497,39 @@ const getValue = function (id) {
     return null;
 }
 
-// Helper functions to display/hide an item
+/**
+ * Helper function to set/unset a checkbox
+ *
+ * @param id
+ * @param value
+ */
+const setCheckbox = function (id, value) {
+    let item = document.getElementById(id);
+    if (item) {
+        item.checked = value;
+    }
+}
+
+/**
+ * Helper function to get a checkbox state
+ *
+ * @param id
+ * @returns value
+ */
+const getCheckbox = function (id) {
+    let item = document.getElementById(id);
+    if (item) {
+        return item.checked;
+    }
+    return null;
+}
+
+
+/**
+ * Helper function to display an item
+ *
+ * @param id
+ */
 const showItem = function(id) {
     let item = document.getElementById(id);
     if (item) {
@@ -489,6 +537,11 @@ const showItem = function(id) {
     }
 }
 
+/**
+ * Helper function to hide an item
+ *
+ * @param id
+ */
 const hideItem = function(id) {
     let item = document.getElementById(id);
     if (item) {
@@ -496,7 +549,11 @@ const hideItem = function(id) {
     }
 }
 
-// Helper functions to disable/enable an item
+/**
+ * Helper function to disable an item
+ *
+ * @param id
+ */
 const disableItem = function(id) {
     let item = document.getElementById(id);
     if (item) {
@@ -504,6 +561,11 @@ const disableItem = function(id) {
     }
 }
 
+/**
+ * Helper function to enable an item
+ *
+ * @param id
+ */
 const enableItem = function(id) {
     let item = document.getElementById(id);
     if (item) {
@@ -511,7 +573,14 @@ const enableItem = function(id) {
     }
 }
 
-// Set an event handler
+/**
+ * Set an event handler
+ *
+ * @param id
+ * @param event
+ * @param handler
+ * @param previous
+ */
 const setHandler = function (id, event, handler, previous = null) {
     let item = document.getElementById(id);
     if (item) {
@@ -522,7 +591,13 @@ const setHandler = function (id, event, handler, previous = null) {
     }
 }
 
-// Find a closest item
+/**
+ * Find a closest item
+ *
+ * @param id
+ * @param selector
+ * @returns {null}
+ */
 const closest = function (id, selector) {
     let currentElement = document.getElementById(id);
     let returnElement = null;
@@ -534,3 +609,17 @@ const closest = function (id, selector) {
 
     return returnElement;
 }
+
+/**
+ * Display object properties fro debugging purposes
+ *
+ * @param object
+ */
+const showProps = function (object) {
+    console.log("-------------------------------object begin");
+    for (const property in object) {
+        console.log(`${property}: ${object[property]}`);
+    }
+    console.log("-------------------------------object end");
+
+}

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

@@ -8,12 +8,9 @@
     <title>HLS.JS Player Minimal</title>
     <script type="text/javascript" src="../../../../flashphoner.js"></script>
     <script type="text/javascript" src="hls.min.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
+    <script type="text/javascript" src="../../dependencies/js/stats.js"></script>
     <script type="text/javascript" src="hls-js-player.js"></script>
-    <!-- Bootstrap JS -->
-    <script src="../../dependencies/bootstrap/js/bootstrap.js"></script>
 </head>
 <body onload="loadPlayerPage()">
 <div id="playerPage" class="container">

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

@@ -1,43 +1,82 @@
-var Browser = Flashphoner.Browser;
-var remoteVideo = null;
-var hlsPlayer = null;
+const Browser = Flashphoner.Browser;
+const STATS_INTERVAL = 1000;
+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;
 
-function loadPlayerPage() {
-    $("#playerPage").load("../hls-player/player-page.html", initPage );
+const loadPlayerPage = function() {
+    loadPage("../hls-player/player-page.html", "playerPage", initPage );
 }
 
-function initPage() {
-    $("#header").text("HLS.JS Player Minimal");
-    $("#urlServer").val(getHLSUrl());
-    $("#applyBtn").prop('disabled', true).text("Play").off('click').click(playBtnClick);
+const loadPage = function(page, containerId, onLoad) {
+    fetch(page).then(function (response) {
+        if (response.ok) {
+            return response.text();
+        }
+        throw response;
+    }).then(function (text) {
+        let container = document.getElementById(containerId);
+        container.innerHTML = text;
+        onLoad();
+    });
+}
+
+const initPage =  function() {
+    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');
     if (Hls.isSupported()) {
         console.log("Using HLS.JS " + Hls.version);
-        $("#applyBtn").prop('disabled', false);
+        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 {
-        $("#notifyFlash").text("Your browser doesn't support MSE technology required to play video");
+        setText("notifyFlash", "Your browser doesn't support MSE technology required to play video");
+        disableItem("applyBtn");
+        toggleInputs(false);
     }
-    remoteVideo = document.getElementById('remoteVideo');
-    remoteVideo.style ="background-color: lightgrey;";
-    $('#llHlsMode').show();
 }
 
 
-function playBtnClick() {
-    if (validateForm()) {
-        var llHlsEnabled = $('#llHlsEnabled').is(":checked");
-        var streamName = $('#playStream').val();
-        streamName = encodeURIComponent(streamName);
-        var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
-        var key = $('#key').val();
-        var token = $("#token").val();
-        if (key.length > 0 && token.length > 0) {
-            videoSrc += "?" + key + "=" + token;
-        }
+const playBtnClick = function() {
+    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();
         });
+        remoteVideo.onplaying = () => {
+            console.log("playing event fired");
+            displayPermalink(videoSrc);
+        }
         hlsPlayer.loadSource(videoSrc);
         hlsPlayer.attachMedia(remoteVideo);
         onStarted();            
@@ -45,8 +84,8 @@ function playBtnClick() {
 }
 
 
-function getHlsConfig(llHlsEnabled) {
-    var config = {
+const getHlsConfig = function(llHlsEnabled) {
+    let config = {
         lowLatencyMode: false,
         enableWorker: true,
         backBufferLength: 90,
@@ -71,7 +110,7 @@ function getHlsConfig(llHlsEnabled) {
 }
 
 
-function stopBtnClick() {
+const stopBtnClick = function() {
     if (hlsPlayer != null) {
         console.log("Stop HLS segments loading");
         hlsPlayer.stopLoad();
@@ -88,53 +127,219 @@ function stopBtnClick() {
 }
 
 
-function onStarted() {
-    $("#urlServer").prop('disabled', true);
-    $("#playStream").prop('disabled', true);
-    $("#key").prop('disabled', true);
-    $("#token").prop('disabled', true);
-    $("#player").prop('disabled', true);
-    $('#llHlsEnabled').prop('disabled', true);
-    $("#applyBtn").prop('disabled', false).text("Stop").off('click').click(stopBtnClick);
+const onStarted = function() {
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 function onStopped() {
-    $("#urlServer").prop('disabled', false);
-    $("#playStream").prop('disabled', false);
-    $("#key").prop('disabled', false);
-    $("#token").prop('disabled', false);
-    $("#player").prop('disabled', false);
-    $('#llHlsEnabled').prop('disabled', false);
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+    }
 }
 
 
-function validateForm() {
-    var valid = true;
-    if (!$("#urlServer").val().length) {
-        highlightInput($("#urlServer"));
+const validateForm = function() {
+    let valid = validateInput("urlServer");
+    if (valid) {
+        valid = validateInput("playStream");
+    }
+    return valid;
+}
+
+const validateInput = function(id) {
+    let value = getValue(id);
+    let valid = true;
+    if (!value || !value.length) {
+        highlightInput(id);
         valid = false;
     } else {
-        removeHighlight($("#urlServer"));
+        removeHighlight(id);
     }
-    if (!$("#playStream").val().length) {
-        highlightInput($("#playStream"));
-        valid = false;
+    return valid;
+}
+
+const highlightInput = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.add("has-error");
+        }
+    }
+}
+
+
+const removeHighlight = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.remove("has-error");
+        }
+    }
+}
+
+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");
+        enableItem("playStream");
+        enableItem("key");
+        enableItem("token");
+        enableItem("player");
+        enableItem("llHlsEnabled");
     } else {
-        removeHighlight($("#playStream"));
+        disableItem("urlServer");
+        disableItem("playStream");
+        disableItem("key");
+        disableItem("token");
+        disableItem("player");
+        disableItem("llHlsEnabled");
     }
+}
 
-    return valid;
-    
+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 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');
 
-function highlightInput(input) {
-    input.closest('.form-group').addClass("has-error");
+    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);
+    }
+}
 
-function removeHighlight(input) {
-    input.closest('.form-group').removeClass("has-error");
+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,
+        timer: null,
+        stats: null,
+        start: function() {
+            let video = remoteVideo;
+
+            playbackStats.stop();
+            stats = HTML5Stats(video);
+            playbackStats.timer = setInterval(playbackStats.displayStats, playbackStats.interval);
+            setText("videoWidth", "N/A");
+            setText("videoHeight", "N/A");
+            setText("videoRate", "N/A");
+            setText("videoFps", "N/A");
+            showItem("stats");
+        },
+        stop: function() {
+            if (playbackStats.timer) {
+                clearInterval(playbackStats.timer);
+                playbackStats.timer = null;
+            }
+            playbackStats.stats = null;
+            hideItem("stats");
+        },
+        displayStats: function() {
+            if (stats.collect()) {
+                let width = stats.getWidth();
+                let height = stats.getHeight();
+                let bitrate = stats.getBitrate();
+                let fps = stats.getFps();
+
+                setText("videoWidth", width);
+                setText("videoHeight", height);
+
+                if (bitrate !== undefined) {
+                    setText("videoRate", Math.round(bitrate));
+                }
+                if (fps !== undefined) {
+                    setText("videoFps", fps.toFixed(1));
+                }
+            }
+        }
+    };
+    return playbackStats;
+}

package/examples/demo/streaming/hls-native/hls-native.html

@@ -7,12 +7,9 @@
     <link rel="stylesheet" href="hls-native.css">
     <title>HLS Native Player Minimal</title>
     <script type="text/javascript" src="../../../../flashphoner.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-1.12.0.js"></script>
-    <script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>
     <script type="text/javascript" src="../../dependencies/js/utils.js"></script>
+    <script type="text/javascript" src="../../dependencies/js/stats.js"></script>
     <script type="text/javascript" src="hls-native.js"></script>
-    <!-- Bootstrap JS -->
-    <script src="../../dependencies/bootstrap/js/bootstrap.js"></script>
 </head>
 <body onload="loadPlayerPage()">
 <div id="playerPage" class="container">