@flashphoner/websdk 2.0.242 → 2.0.244

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

@@ -6,15 +6,23 @@ 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 playSrc = getUrlParam("src");
+let autoplay = eval(getUrlParam("autoplay")) || false;
+let playbackStats = null;
 
 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");
@@ -42,13 +50,14 @@ const onVideojsBtnClick = function () {
 
 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 );
+                loadPage("player-page.html", "playerPage", initPage);
             }).catch( err => {
                 playerPage.innerHTML = "Can't load VideoJS library stylesheet";
                 playerPage.setAttribute("class", "text-danger");
@@ -115,30 +124,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);
+    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();
@@ -154,6 +170,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
@@ -228,21 +245,27 @@ const liveBtnClick = function() {
 }
 
 const onStarted = function() {
-    toggleInputs(false);
-    enableItem("applyBtn");
-    showItem("backward");
-    toggleBackButtons(true);
-    setText("applyBtn", "Stop");
-    setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+    if (!autoplay) {
+        toggleInputs(false);
+        enableItem("applyBtn");
+        hideItem("permalink");
+        showItem("backward");
+        setText("applyBtn", "Stop");
+        setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
+        startPlaybackStats();
+    }
 }
 
 
 const onStopped = function() {
-    toggleInputs(true);
-    enableItem("applyBtn");
-    hideItem("backward");
-    setText("applyBtn", "Play");
-    setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+    if (!autoplay) {
+        toggleInputs(true);
+        enableItem("applyBtn");
+        hideItem("backward");
+        setText("applyBtn", "Play");
+        setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
+        stopPlaybackStats();
+    }
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
     }
@@ -250,10 +273,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";
@@ -261,7 +282,7 @@ const createRemoteVideo = function(parent) {
     remoteVideo.setAttribute("playsinline","");
     remoteVideo.setAttribute("webkit-playsinline","");
     parent.appendChild(remoteVideo);
-    player = initVideoJsPlayer(remoteVideo);
+    player = initVideoJsPlayer(remoteVideo, autoplay);
 }
 
 
@@ -306,22 +327,28 @@ 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
-        }
-    });
-    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
+        });
+        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;
@@ -335,15 +362,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");
+        }
     }
 }
 
@@ -361,4 +398,126 @@ const toggleInputs = function(enable) {
         disableItem("token");
         disableItem("player");
     }
+}
+
+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 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,
+        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>
 
@@ -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,6 +43,24 @@
                         </div>
                     </div>
                 </div>
+
+                <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>
+
+                <div class="row" style="margin-top:10px">
+                    <div class="col-sm-12 text-center">
+                        <a id="permalink" href="#">Permalink</a>
+                    </div>
+                </div>
+
                 <div class="row" style="margin-top: 20px">
                     <div class="col-sm-4 text-left">
                         <div id="llHlsMode" style="display: none;">
@@ -69,12 +87,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" style="margin-top: 20px; width: available; 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.244",
   "description": "Official Flashphoner WebCallServer WebSDK package",
   "main": "./src/flashphoner-core.js",
   "types": "./src/flashphoner-core.d.ts",