@flashphoner/websdk 2.0.242 → 2.0.244

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

@@ -1,48 +1,80 @@
-var Browser = Flashphoner.Browser;
-var remoteVideo = null;
+const Browser = Flashphoner.Browser;
+const STATS_INTERVAL = 1000;
+let remoteVideo = null;
+let playSrc = getUrlParam("src");
+let autoplay = eval(getUrlParam("autoplay")) || 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 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() {
+    if (playSrc) {
+        setValue("fullLink", decodeURIComponent(playSrc));
+    } else if (autoplay) {
+        console.warn("No HLS URL set, autoplay disabled");
+        autoplay = false;
+    }
     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()) {
+        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");
+        toggleInputs(false);
     }
 }
 
-function playBtnClick() {
-    if (validateForm()) {
-        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;
-        }
-        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");
-        }
+const playBtnClick = 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;
     }
 }
 
 
-function stopBtnClick() {
+const stopBtnClick = function() {
     if (remoteVideo != null) {
         console.log("Stop HTML5 player");
         remoteVideo.pause();
@@ -54,51 +86,220 @@ 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() {
+    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);
-    $("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
+const onStopped = function() {
+    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;
+        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");
+        enableItem("playStream");
+        enableItem("key");
+        enableItem("token");
+        enableItem("player");
     } else {
-        removeHighlight($("#playStream"));
+        disableItem("urlServer");
+        disableItem("playStream");
+        disableItem("key");
+        disableItem("token");
+        disableItem("player");
     }
+}
 
-    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] + "?src=" + videoSrc;
+        linkObject.href = href;
+        showItem(permalinkId);
+    }
+}
+
+const hideAllToAutoplay = function() {
+    hideItem("header");
+    hideItem("notifyFlash");
+    hideItem("fieldset");
+    hideItem("stats");
+}
 
-function highlightInput(input) {
-    input.closest('.form-group').addClass("has-error");
+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 removeHighlight(input) {
-    input.closest('.form-group').removeClass("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);
+    }
+}
+
+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-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">