@flashphoner/websdk 2.0.244 → 2.0.245

package/docTemplate/README.md

@@ -1,4 +1,4 @@
-Web SDK - 2.0.244
+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,11 +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 );
@@ -72,10 +79,12 @@ const playBtnClick = function() {
         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);
@@ -91,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 = {
@@ -146,6 +155,8 @@ function onStopped() {
         setText("applyBtn", "Play");
         setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
         stopPlaybackStats();
+        hideItem("quality");
+        disposeQualityLevels();
     }
 }
 
@@ -248,6 +259,12 @@ const displayPermalink = function(src) {
     }
 }
 
+const displayQualitySwitch = function() {
+    if (!autoplay && qualityLevels.length) {
+        showItem("quality")
+    }
+}
+
 const hideAllToAutoplay = function() {
     hideItem("header");
     hideItem("notifyFlash");
@@ -342,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-player/hls-player.js

@@ -7,12 +7,19 @@ const LIVE_THRESHOLD = 5;
 const LIVE_TOLERANCE = 5;
 const LIVE_UI_INTERVAL = 1000;
 const STATS_INTERVAL = 1000;
+const QUALITY_COLORS = {
+    NONE: "",
+    AVAILABLE: "black",
+    SELECTED: "blue"
+};
+const QUALITY_AUTO = "Auto";
 let player = null;
 let liveUITimer = null;
 let videojsVersion = getUrlParam("version");
 let playSrc = getUrlParam("src");
 let autoplay = eval(getUrlParam("autoplay")) || false;
 let playbackStats = null;
+let qualityLevels = [];
 
 const loadPlayerPage = function() {
     if (videojsVersion) {
@@ -44,27 +51,50 @@ const loadPlayerPage = function() {
     }
 }
 
-const onVideojsBtnClick = function () {
+const onVideojsBtnClick = function() {
     loadVideoJS(getValue("videojsInput"));
 }
 
-const loadVideoJS = function (version) {
+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);
+            loadStyles(version, playerPage);
+        }).catch( err => {
+            setText("videojsError", "Can't load VideoJS library");
+            console.error(err);
+        });
+    }
+}
+
+const loadStyles = function(version, playerPage) {
+    if (version) {
+        loadFile(version + "/video-js.css", "stylesheet").then ( data => {
+            console.log("HLS library stylesheet loaded successfully", data);
+            if (version === VIDEOJS_VERSION_TYPE.VIDEOJS7) {
+                loadQualityPlugin(version, playerPage);
+            } else {
                 hideItem("videojsInputForm");
                 loadPage("player-page.html", "playerPage", initPage);
-            }).catch( err => {
-                playerPage.innerHTML = "Can't load VideoJS library stylesheet";
-                playerPage.setAttribute("class", "text-danger");
-                console.error(err);
-            })
+            }
         }).catch( err => {
-            setText("videojsError", "Can't load VideoJS library");
+            playerPage.innerHTML = "Can't load VideoJS library stylesheet";
+            playerPage.setAttribute("class", "text-danger");
+            console.error(err);
+        });
+    }
+}
+
+const loadQualityPlugin = function(version, playerPage) {
+    if (version) {
+        loadFile(version + "/videojs-contrib-quality-levels.js", "text/javascript").then( data => {
+            console.log("HLS quality levels plugin loaded successfully", data);
+            hideItem("videojsInputForm");
+            loadPage("player-page.html", "playerPage", initPage);
+        }).catch( err => {
+            setText("videojsError", "Can't load VideoJS quality levels plugin");
             console.error(err);
         });
     }
@@ -183,6 +213,8 @@ const playBtnClick = function() {
                     stopLiveUITimer();
                 }
             }
+            initQualityLevels(player);
+            displayQualitySwitch();
         });
         player.src({
             src: videoSrc,
@@ -253,6 +285,7 @@ const onStarted = function() {
         setText("applyBtn", "Stop");
         setHandler("applyBtn", "click", stopBtnClick, playBtnClick);
         startPlaybackStats();
+        hideItem("quality");
     }
 }
 
@@ -265,6 +298,8 @@ const onStopped = function() {
         setText("applyBtn", "Play");
         setHandler("applyBtn", "click", playBtnClick, stopBtnClick);
         stopPlaybackStats();
+        hideItem("quality");
+        disposeQualityLevels();
     }
     if(!document.getElementById('remoteVideo')) {
         createRemoteVideo(document.getElementById('videoContainer'));
@@ -340,7 +375,12 @@ const initVideoJsPlayer = function(video, muted) {
                 liveTolerance: LIVE_TOLERANCE
             },
             fill: true,
-            muted: muted
+            muted: muted,
+            html5: {
+                vhs: {
+                    limitRenditionByPlayerDimensions: false
+                }
+            }
         });
         console.log("Using VideoJs " + videojs.VERSION);
         if (Browser.isSafariWebRTC() && Browser.isiOS()) {
@@ -427,6 +467,12 @@ const displayPermalink = function(src) {
     }
 }
 
+const displayQualitySwitch = function() {
+    if (!autoplay && qualityLevels.length) {
+        showItem("quality")
+    }
+}
+
 const hideAllToAutoplay = function() {
     hideItem("header");
     hideItem("notifyFlash");
@@ -520,4 +566,81 @@ const PlaybackStats = function(interval) {
         }
     };
     return playbackStats;
-}
+}
+
+const initQualityLevels = function(player) {
+    if (player && !qualityLevels.length) {
+        let playerQualityLevels = player.qualityLevels();
+        if (playerQualityLevels) {
+            let qualityDiv = document.getElementById("qualityBtns");
+            let qualityLevel;
+            for (let i = 0; i < playerQualityLevels.length; i++) {
+                qualityLevel = QualityLevel(playerQualityLevels, playerQualityLevels[i].height, i, qualityDiv);
+                qualityLevels.push(qualityLevel);
+            }
+            if (qualityLevels.length) {
+                qualityLevel = QualityLevel(playerQualityLevels, QUALITY_AUTO, -1, qualityDiv);
+                qualityLevels.push(qualityLevel);
+            }
+        }
+    }
+}
+
+const disposeQualityLevels = function() {
+    qualityLevels.forEach(level => {
+        if (level.button) {
+            level.button.remove();
+        }
+    });
+    qualityLevels = [];
+}
+
+const qualityBtnClick = function(button, playerQualityLevels, index) {
+    if (playerQualityLevels && playerQualityLevels.length) {
+        let currentIndex = playerQualityLevels.selectedIndex_;
+        for (let i = 0; i < playerQualityLevels.length; i++) {
+            let qualityLevel = playerQualityLevels[i];
+            if (index === -1 || i === index) {
+                qualityLevel.enabled = true;
+            } else if (i === index) {
+                qualityLevel.enabled = true;
+                currentIndex = index;
+            } else {
+                qualityLevel.enabled = false;
+            }
+        }
+        playerQualityLevels.selectedIndex_ = currentIndex;
+        playerQualityLevels.trigger({ type: 'change', selectedIndex: currentIndex });
+    }
+    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-player/player-page.html

@@ -55,22 +55,40 @@
                     </div>
                 </div>
 
-                <div class="row" style="margin-top:10px">
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-4 text-left" id="llHlsMode" style="display: none;">
+                        <input id="llHlsEnabled" class="form-check-input" type="checkbox" value="">
+                        <label class="form-check-label" for="llHlsEnabled">Low latency HLS</label>
+                    </div>
+                </div>
+                <div class="row" style="margin-top: 5px">
                     <div class="col-sm-12 text-center">
                         <a id="permalink" href="#">Permalink</a>
                     </div>
                 </div>
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-12 text-center">
+                        <button id="applyBtn" type="button" class="btn btn-default">Play</button>
+                    </div>
+                </div>
 
-                <div class="row" style="margin-top: 20px">
-                    <div class="col-sm-4 text-left">
-                        <div id="llHlsMode" style="display: none;">
-                            <input id="llHlsEnabled" class="form-check-input" type="checkbox" value="">
-                            <label class="form-check-label" for="llHlsEnabled">Low latency HLS</label>
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-12" id="quality" style="display: none;">
+                        <div class="col-sm-4 text-right">
+                            <label class="form-check-label" for="qualityBtns">Quality</label>
+                        </div>
+                        <div class="col-sm-8 text-center">
+                            <div class="input-group-btn" id="qualityBtns">
+                            </div>
                         </div>
                     </div>
-                    <div class="col-sm-5">
-                        <div id="backward" style="display: none;">
-                            <label class="form-check-label text-right" for="backBtnMax">&lt;&lt; seconds</label>
+                </div>
+                <div class="row" style="margin-top: 10px">
+                    <div class="col-sm-12" id="backward" style="display: none;">
+                        <div class="col-sm-4 text-right">
+                            <label class="form-check-label" for="backBtnMax">Rewind back</label>
+                        </div>
+                        <div class="col-sm-8 text-center">
                             <div class="input-group-btn">
                                 <button id="backBtnMax" type="button" class="btn btn-default">Max</button>
                                 <button id="backBtn30" type="button" class="btn btn-default">30</button>
@@ -79,9 +97,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-sm-3 text-right">
-                        <button id="applyBtn" type="button" class="btn btn-default">Play</button>
-                    </div>
                 </div>
             </fieldset>
         </div>

package/examples/demo/streaming/hls-player/videojs7/videojs-contrib-quality-levels.js

@@ -0,0 +1,308 @@
+/*! @name videojs-contrib-quality-levels @version 3.0.0 @license Apache-2.0 */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
+  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsContribQualityLevels = factory(global.videojs));
+}(this, (function (videojs) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
+
+  /**
+   * A single QualityLevel.
+   *
+   * interface QualityLevel {
+   *   readonly attribute DOMString id;
+   *            attribute DOMString label;
+   *   readonly attribute long width;
+   *   readonly attribute long height;
+   *   readonly attribute long bitrate;
+   *            attribute boolean enabled;
+   * };
+   *
+   * @class QualityLevel
+   */
+  class QualityLevel {
+    /**
+     * Creates a QualityLevel
+     *
+     * @param {Representation|Object} representation The representation of the quality level
+     * @param {string}   representation.id        Unique id of the QualityLevel
+     * @param {number=}  representation.width     Resolution width of the QualityLevel
+     * @param {number=}  representation.height    Resolution height of the QualityLevel
+     * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+     * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+     * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+     */
+    constructor(representation) {
+      let level = this; // eslint-disable-line
+
+      level.id = representation.id;
+      level.label = level.id;
+      level.width = representation.width;
+      level.height = representation.height;
+      level.bitrate = representation.bandwidth;
+      level.frameRate = representation.frameRate;
+      level.enabled_ = representation.enabled;
+      Object.defineProperty(level, 'enabled', {
+        /**
+         * Get whether the QualityLevel is enabled.
+         *
+         * @return {boolean} True if the QualityLevel is enabled.
+         */
+        get() {
+          return level.enabled_();
+        },
+
+        /**
+         * Enable or disable the QualityLevel.
+         *
+         * @param {boolean} enable true to enable QualityLevel, false to disable.
+         */
+        set(enable) {
+          level.enabled_(enable);
+        }
+
+      });
+      return level;
+    }
+
+  }
+
+  /**
+   * A list of QualityLevels.
+   *
+   * interface QualityLevelList : EventTarget {
+   *   getter QualityLevel (unsigned long index);
+   *   readonly attribute unsigned long length;
+   *   readonly attribute long selectedIndex;
+   *
+   *   void addQualityLevel(QualityLevel qualityLevel)
+   *   void removeQualityLevel(QualityLevel remove)
+   *   QualityLevel? getQualityLevelById(DOMString id);
+   *
+   *   attribute EventHandler onchange;
+   *   attribute EventHandler onaddqualitylevel;
+   *   attribute EventHandler onremovequalitylevel;
+   * };
+   *
+   * @extends videojs.EventTarget
+   * @class QualityLevelList
+   */
+
+  class QualityLevelList extends videojs__default['default'].EventTarget {
+    constructor() {
+      super();
+      let list = this; // eslint-disable-line
+
+      list.levels_ = [];
+      list.selectedIndex_ = -1;
+      /**
+       * Get the index of the currently selected QualityLevel.
+       *
+       * @returns {number} The index of the selected QualityLevel. -1 if none selected.
+       * @readonly
+       */
+
+      Object.defineProperty(list, 'selectedIndex', {
+        get() {
+          return list.selectedIndex_;
+        }
+
+      });
+      /**
+       * Get the length of the list of QualityLevels.
+       *
+       * @returns {number} The length of the list.
+       * @readonly
+       */
+
+      Object.defineProperty(list, 'length', {
+        get() {
+          return list.levels_.length;
+        }
+
+      });
+      return list;
+    }
+    /**
+     * Adds a quality level to the list.
+     *
+     * @param {Representation|Object} representation The representation of the quality level
+     * @param {string}   representation.id        Unique id of the QualityLevel
+     * @param {number=}  representation.width     Resolution width of the QualityLevel
+     * @param {number=}  representation.height    Resolution height of the QualityLevel
+     * @param {number}   representation.bandwidth Bitrate of the QualityLevel
+     * @param {number=}  representation.frameRate Frame-rate of the QualityLevel
+     * @param {Function} representation.enabled   Callback to enable/disable QualityLevel
+     * @return {QualityLevel} the QualityLevel added to the list
+     * @method addQualityLevel
+     */
+
+
+    addQualityLevel(representation) {
+      let qualityLevel = this.getQualityLevelById(representation.id); // Do not add duplicate quality levels
+
+      if (qualityLevel) {
+        return qualityLevel;
+      }
+
+      const index = this.levels_.length;
+      qualityLevel = new QualityLevel(representation);
+
+      if (!('' + index in this)) {
+        Object.defineProperty(this, index, {
+          get() {
+            return this.levels_[index];
+          }
+
+        });
+      }
+
+      this.levels_.push(qualityLevel);
+      this.trigger({
+        qualityLevel,
+        type: 'addqualitylevel'
+      });
+      return qualityLevel;
+    }
+    /**
+     * Removes a quality level from the list.
+     *
+     * @param {QualityLevel} remove QualityLevel to remove to the list.
+     * @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
+     * @method removeQualityLevel
+     */
+
+
+    removeQualityLevel(qualityLevel) {
+      let removed = null;
+
+      for (let i = 0, l = this.length; i < l; i++) {
+        if (this[i] === qualityLevel) {
+          removed = this.levels_.splice(i, 1)[0];
+
+          if (this.selectedIndex_ === i) {
+            this.selectedIndex_ = -1;
+          } else if (this.selectedIndex_ > i) {
+            this.selectedIndex_--;
+          }
+
+          break;
+        }
+      }
+
+      if (removed) {
+        this.trigger({
+          qualityLevel,
+          type: 'removequalitylevel'
+        });
+      }
+
+      return removed;
+    }
+    /**
+     * Searches for a QualityLevel with the given id.
+     *
+     * @param {string} id The id of the QualityLevel to find.
+     * @return {QualityLevel|null} The QualityLevel with id, or null if not found.
+     * @method getQualityLevelById
+     */
+
+
+    getQualityLevelById(id) {
+      for (let i = 0, l = this.length; i < l; i++) {
+        const level = this[i];
+
+        if (level.id === id) {
+          return level;
+        }
+      }
+
+      return null;
+    }
+    /**
+     * Resets the list of QualityLevels to empty
+     *
+     * @method dispose
+     */
+
+
+    dispose() {
+      this.selectedIndex_ = -1;
+      this.levels_.length = 0;
+    }
+
+  }
+  /**
+   * change - The selected QualityLevel has changed.
+   * addqualitylevel - A QualityLevel has been added to the QualityLevelList.
+   * removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
+   */
+
+
+  QualityLevelList.prototype.allowedEvents_ = {
+    change: 'change',
+    addqualitylevel: 'addqualitylevel',
+    removequalitylevel: 'removequalitylevel'
+  }; // emulate attribute EventHandler support to allow for feature detection
+
+  for (const event in QualityLevelList.prototype.allowedEvents_) {
+    QualityLevelList.prototype['on' + event] = null;
+  }
+
+  var version = "3.0.0";
+
+  const registerPlugin = videojs__default['default'].registerPlugin || videojs__default['default'].plugin;
+  /**
+   * Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
+   * event handlers.
+   *
+   * @param {Player} player Player object.
+   * @param {Object} options Plugin options object.
+   * @function initPlugin
+   */
+
+  const initPlugin = function (player, options) {
+    const originalPluginFn = player.qualityLevels;
+    const qualityLevelList = new QualityLevelList();
+
+    const disposeHandler = function () {
+      qualityLevelList.dispose();
+      player.qualityLevels = originalPluginFn;
+      player.off('dispose', disposeHandler);
+    };
+
+    player.on('dispose', disposeHandler);
+
+    player.qualityLevels = () => qualityLevelList;
+
+    player.qualityLevels.VERSION = version;
+    return qualityLevelList;
+  };
+  /**
+   * A video.js plugin.
+   *
+   * In the plugin function, the value of `this` is a video.js `Player`
+   * instance. You cannot rely on the player being in a "ready" state here,
+   * depending on how the plugin is invoked. This may or may not be important
+   * to you; if not, remove the wait for "ready"!
+   *
+   * @param {Object} options Plugin options object
+   * @function qualityLevels
+   */
+
+
+  const qualityLevels = function (options) {
+    return initPlugin(this, videojs__default['default'].mergeOptions({}, options));
+  }; // Register the plugin with video.js.
+
+
+  registerPlugin('qualityLevels', qualityLevels); // Include the version number.
+
+  qualityLevels.VERSION = version;
+
+  return qualityLevels;
+
+})));

package/package.json

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