@flashphoner/websdk 2.0.242 → 2.0.243

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.242
+Web SDK - 2.0.243
 
 [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,35 +1,54 @@
-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 playbackStats = null;
+
+const loadPlayerPage = function() {
+    loadPage("../hls-player/player-page.html", "playerPage", initPage );
+}
 
-function loadPlayerPage() {
-    $("#playerPage").load("../hls-player/player-page.html", initPage );
+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();
+    });
 }
 
-function initPage() {
-    $("#header").text("HLS.JS Player Minimal");
-    $("#urlServer").val(getHLSUrl());
-    $("#applyBtn").prop('disabled', true).text("Play").off('click').click(playBtnClick);
+const initPage =  function() {
+    setText("header", "HLS.JS Player Minimal");
+    setValue("urlServer", getHLSUrl());
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick);
+    remoteVideo = document.getElementById('remoteVideo');
+    remoteVideo.style ="background-color: lightgrey;";
     if (Hls.isSupported()) {
         console.log("Using HLS.JS " + Hls.version);
-        $("#applyBtn").prop('disabled', false);
+        enableItem("applyBtn");
+        showItem("llHlsMode");
+        playbackStats = PlaybackStats(STATS_INTERVAL);
     } 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() {
+const playBtnClick = function() {
     if (validateForm()) {
-        var llHlsEnabled = $('#llHlsEnabled').is(":checked");
-        var streamName = $('#playStream').val();
+        let llHlsEnabled = getCheckbox("llHlsEnabled");
+        let streamName = getValue("playStream");
         streamName = encodeURIComponent(streamName);
-        var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
-        var key = $('#key').val();
-        var token = $("#token").val();
+        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;
         }
@@ -45,8 +64,8 @@ function playBtnClick() {
 }
 
 
-function getHlsConfig(llHlsEnabled) {
-    var config = {
+const getHlsConfig = function(llHlsEnabled) {
+    let config = {
         lowLatencyMode: false,
         enableWorker: true,
         backBufferLength: 90,
@@ -71,7 +90,7 @@ function getHlsConfig(llHlsEnabled) {
 }
 
 
-function stopBtnClick() {
+const stopBtnClick = function() {
     if (hlsPlayer != null) {
         console.log("Stop HLS segments loading");
         hlsPlayer.stopLoad();
@@ -88,53 +107,126 @@ 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() {
+    toggleInputs(false);
+    enableItem("applyBtn");
+    setText("applyBtn", "Stop");
+    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+    playbackStats.start();
 }
 
 
 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);
+    toggleInputs(true);
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+    playbackStats.stop();
 }
 
 
-function validateForm() {
-    var valid = true;
-    if (!$("#urlServer").val().length) {
-        highlightInput($("#urlServer"));
-        valid = false;
-    } else {
-        removeHighlight($("#urlServer"));
+const validateForm = function() {
+    let valid = validateInput("urlServer");
+    if (valid) {
+        valid = validateInput("playStream");
     }
-    if (!$("#playStream").val().length) {
-        highlightInput($("#playStream"));
+    return valid;
+}
+
+const validateInput = function(id) {
+    let value = getValue(id);
+    let valid = true;
+    if (!value || !value.length) {
+        highlightInput(id);
         valid = false;
     } else {
-        removeHighlight($("#playStream"));
+        removeHighlight(id);
     }
-
     return valid;
-    
 }
 
-
-function highlightInput(input) {
-    input.closest('.form-group').addClass("has-error");
+const highlightInput = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.add("has-error");
+        }
+    }
 }
 
 
-function removeHighlight(input) {
-    input.closest('.form-group').removeClass("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 toggleInputs = function(enable) {
+    if (enable) {
+        enableItem("urlServer");
+        enableItem("playStream");
+        enableItem("key");
+        enableItem("token");
+        enableItem("player");
+        enableItem("llHlsEnabled");
+    } else {
+        disableItem("urlServer");
+        disableItem("playStream");
+        disableItem("key");
+        disableItem("token");
+        disableItem("player");
+        disableItem("llHlsEnabled");
+    }
 }
+
+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">

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

@@ -1,48 +1,67 @@
-var Browser = Flashphoner.Browser;
-var remoteVideo = null;
+const Browser = Flashphoner.Browser;
+const STATS_INTERVAL = 1000;
+let remoteVideo = null;
+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 Native Player Minimal");
-    $("#urlServer").val(getHLSUrl());
-    $("#applyBtn").prop('disabled', false).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() {
+    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 (remoteVideo.canPlayType('application/vnd.apple.mpegurl') && Browser.isSafariWebRTC()) {
+        enableItem("applyBtn");
+        playbackStats = PlaybackStats(STATS_INTERVAL);
+    } else {
+        setText("notifyFlash", "Your browser doesn't support native HLS playback");
+        disableItem("applyBtn");
+        toggleInputs(false);
+    }
 }
 
-function playBtnClick() {
+const playBtnClick = function() {
     if (validateForm()) {
-        var streamName = $('#playStream').val();
+        let streamName = getValue("playStream");
         streamName = encodeURIComponent(streamName);
-        var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
-        var key = $('#key').val();
-        var token = $("#token").val();
+        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;
         }
-        if (remoteVideo.canPlayType('application/vnd.apple.mpegurl')) {
-            remoteVideo.src = videoSrc;
-            remoteVideo.addEventListener('loadedmetadata', function() {
-                console.log("Play native HLS");
-                remoteVideo.play();
-                onStarted();
-            });
-        }
-        else {
-            $("#notifyFlash").text("Your browser doesn't support native HLS playback");
-        }
+        remoteVideo.src = videoSrc;
+        remoteVideo.addEventListener('loadedmetadata', function() {
+            console.log("Play native HLS");
+            remoteVideo.play();
+            onStarted();
+        });
     }
 }
 
 
-function stopBtnClick() {
+const stopBtnClick = function() {
     if (remoteVideo != null) {
         console.log("Stop HTML5 player");
         remoteVideo.pause();
@@ -54,51 +73,124 @@ function stopBtnClick() {
 }
 
 
-function onStarted() {
-    $("#urlServer").prop('disabled', true);
-    $("#playStream").prop('disabled', true);
-    $("#key").prop('disabled', true);
-    $("#token").prop('disabled', true);
-    $("#player").prop('disabled', true);
-    $("#applyBtn").prop('disabled', false).text("Stop").off('click').click(stopBtnClick);
+const onStarted = function() {
+    toggleInputs(false);
+    enableItem("applyBtn");
+    setText("applyBtn", "Stop");
+    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+    playbackStats.start();
 }
 
 
-function onStopped() {
-    $("#urlServer").prop('disabled', false);
-    $("#playStream").prop('disabled', false);
-    $("#key").prop('disabled', false);
-    $("#token").prop('disabled', false);
-    $("#player").prop('disabled', false);
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
+const onStopped = function() {
+    toggleInputs(true);
+    enableItem("applyBtn");
+    setText("applyBtn", "Play");
+    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+    playbackStats.stop();
 }
 
 
-function validateForm() {
-    var valid = true;
-    if (!$("#urlServer").val().length) {
-        highlightInput($("#urlServer"));
-        valid = false;
-    } else {
-        removeHighlight($("#urlServer"));
+const validateForm = function() {
+    let valid = validateInput("urlServer");
+    if (valid) {
+        valid = validateInput("playStream");
     }
-    if (!$("#playStream").val().length) {
-        highlightInput($("#playStream"));
+    return valid;
+}
+
+const validateInput = function(id) {
+    let value = getValue(id);
+    let valid = true;
+    if (!value || !value.length) {
+        highlightInput(id);
         valid = false;
     } else {
-        removeHighlight($("#playStream"));
+        removeHighlight(id);
     }
-
     return valid;
-    
 }
 
-
-function highlightInput(input) {
-    input.closest('.form-group').addClass("has-error");
+const highlightInput = function(input) {
+    let item = document.getElementById(input);
+    if (item) {
+        let parent = closest(input,'.form-group');
+        if (parent) {
+            parent.classList.add("has-error");
+        }
+    }
 }
 
 
-function removeHighlight(input) {
-    input.closest('.form-group').removeClass("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 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");
+    }
 }
+
+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-player/hls-player.html

@@ -5,14 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
     <link rel="stylesheet" href="hls-player.css">
-<!--    <link rel="stylesheet" href="video-js.css"> -->
     <title>HLS VideoJS 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-player.js"></script>
-<!--    <script type="text/javascript" src="video.js"></script> -->
 </head>
 <body onload="loadPlayerPage()">
 <div class="row form-group" id="videojsInputForm">

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

@@ -6,9 +6,11 @@ const VIDEOJS_VERSION_TYPE = {
 const LIVE_THRESHOLD = 5;
 const LIVE_TOLERANCE = 5;
 const LIVE_UI_INTERVAL = 1000;
+const STATS_INTERVAL = 1000;
 let player = null;
 let liveUITimer = null;
 let videojsVersion = getUrlParam("version");
+let playbackStats = null;
 
 const loadPlayerPage = function() {
     if (videojsVersion) {
@@ -127,6 +129,7 @@ const initPage = function() {
     let remoteVideo = document.getElementById('remoteVideo');
     remoteVideo.className = "video-js vjs-default-skin";
     player = initVideoJsPlayer(remoteVideo);
+    playbackStats = PlaybackStats(STATS_INTERVAL);
 }
 
 const playBtnClick = function() {
@@ -234,6 +237,7 @@ const onStarted = function() {
     toggleBackButtons(true);
     setText("applyBtn", "Stop");
     setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+    playbackStats.start();
 }
 
 
@@ -243,6 +247,7 @@ const onStopped = function() {
     hideItem("backward");
     setText("applyBtn", "Play");
     setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+    playbackStats.stop();
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
     }
@@ -250,10 +255,8 @@ const onStopped = function() {
 
 
 const createRemoteVideo = function(parent) {
-    remoteVideo = document.createElement("video");
+    let remoteVideo = document.createElement("video");
     remoteVideo.id = "remoteVideo";
-    remoteVideo.width=852;
-    remoteVideo.height=480;
     remoteVideo.controls="controls";
     remoteVideo.autoplay="autoplay";
     remoteVideo.type="application/vnd.apple.mpegurl";
@@ -314,7 +317,8 @@ const initVideoJsPlayer = function(video) {
         liveTracker: {
             trackingThreshold: LIVE_THRESHOLD,
             liveTolerance: LIVE_TOLERANCE
-        }
+        },
+        fill: true
     });
     console.log("Using VideoJs " + videojs.VERSION);
     if (Browser.isSafariWebRTC() && Browser.isiOS()) {
@@ -361,4 +365,51 @@ const toggleInputs = function(enable) {
         disableItem("token");
         disableItem("player");
     }
+}
+
+const PlaybackStats = function(interval) {
+    const playbackStats = {
+        interval: interval || STATS_INTERVAL,
+        timer: null,
+        stats: null,
+        start: function() {
+            let video = getActualVideoTag();
+
+            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-player/player-page.html

@@ -1,5 +1,5 @@
     <div class="row">
-        <div class="col-sm-12 text-center" style="max-width: 525px">
+        <div class="col-sm-12 text-center" style="max-width: 500px">
 
             <h2 id="header"></h2>
 
@@ -69,12 +69,42 @@
         </div>
     </div>
     <div class="row">
-        <div id="videoContainer" class="col-sm-12 text-center" style="margin-top: 20px; max-width: 852px">
-            <video id="remoteVideo" width="852" height="480"
+        <div id="videoContainer" class="col-sm-12 text-center" style="margin-top: 20px; max-width: 852px; width: available; max-height: 480px; height: 56.25vw">
+            <video id="remoteVideo"
+                   width="100%"
+                   height="100%"
                    controls="controls"
                    autoplay="autoplay"
                    playsinline="playsinline"
                    webkit-playsinline="webkit-playsinline"
                    type="application/vnd.apple.mpegurl"></video>
         </div>
+    </div>
+    <div id="stats" class="row" style="display: none;">
+        <div class="col-sm-12">
+            <div class="row" style="margin-top: 20px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoWidth">Video width</label>
+                </div>
+                <div class="col-sm-2" id="videoWidth"></div>
+            </div>
+            <div class="row" style="margin-top: 10px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoHeight">Video height</label>
+                </div>
+                <div class="col-sm-2" id="videoHeight"></div>
+            </div>
+            <div class="row" style="margin-top: 10px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoRate">Bitrate, bps</label>
+                </div>
+                <div class="col-sm-2" id="videoRate"></div>
+            </div>
+            <div class="row" style="margin-top: 10px">
+                <div class="col-sm-2">
+                    <label class="form-check-label" for="videoFps">Framerate</label>
+                </div>
+                <div class="col-sm-2" id="videoFps"></div>
+            </div>
+        </div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flashphoner/websdk",
-  "version": "2.0.242",
+  "version": "2.0.243",
   "description": "Official Flashphoner WebCallServer WebSDK package",
   "main": "./src/flashphoner-core.js",
   "types": "./src/flashphoner-core.d.ts",