@antmedia/web_player 2.8.0-SNAPSHOT

package/dist/web_player.js

@@ -0,0 +1,1265 @@
+'use strict';
+
+/*
+* loglevel - https://github.com/pimterry/loglevel
+*
+* Copyright (c) 2013 Tim Perry
+* Licensed under the MIT license.
+*/
+(function (root, definition) {
+  window.log = definition();
+})(undefined, function () {
+  // Slightly dubious tricks to cut down minimized file size
+  var noop = function noop() {};
+  var undefinedType = "undefined";
+  var isIE = typeof window !== undefinedType && typeof window.navigator !== undefinedType && /Trident\/|MSIE /.test(window.navigator.userAgent);
+  var logMethods = ["trace", "debug", "info", "warn", "error"];
+
+  // Cross-browser bind equivalent that works at least back to IE6
+  function bindMethod(obj, methodName) {
+    var method = obj[methodName];
+    if (typeof method.bind === 'function') {
+      return method.bind(obj);
+    } else {
+      try {
+        return Function.prototype.bind.call(method, obj);
+      } catch (e) {
+        // Missing bind shim or IE8 + Modernizr, fallback to wrapping
+        return function () {
+          return Function.prototype.apply.apply(method, [obj, arguments]);
+        };
+      }
+    }
+  }
+
+  // Trace() doesn't print the message in IE, so for that case we need to wrap it
+  function traceForIE() {
+    if (console.log) {
+      if (console.log.apply) {
+        console.log.apply(console, arguments);
+      } else {
+        // In old IE, native console methods themselves don't have apply().
+        Function.prototype.apply.apply(console.log, [console, arguments]);
+      }
+    }
+    if (console.trace) console.trace();
+  }
+
+  // Build the best logging method possible for this env
+  // Wherever possible we want to bind, not wrap, to preserve stack traces
+  function realMethod(methodName) {
+    if (methodName === 'debug') {
+      methodName = 'log';
+    }
+    if (typeof console === undefinedType) {
+      return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
+    } else if (methodName === 'trace' && isIE) {
+      return traceForIE;
+    } else if (console[methodName] !== undefined) {
+      return bindMethod(console, methodName);
+    } else if (console.log !== undefined) {
+      return bindMethod(console, 'log');
+    } else {
+      return noop;
+    }
+  }
+
+  // These private functions always need `this` to be set properly
+
+  function replaceLoggingMethods(level, loggerName) {
+    /*jshint validthis:true */
+    for (var i = 0; i < logMethods.length; i++) {
+      var methodName = logMethods[i];
+      this[methodName] = i < level ? noop : this.methodFactory(methodName, level, loggerName);
+    }
+
+    // Define log.log as an alias for log.debug
+    this.log = this.debug;
+  }
+
+  // In old IE versions, the console isn't present until you first open it.
+  // We build realMethod() replacements here that regenerate logging methods
+  function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
+    return function () {
+      if (typeof console !== undefinedType) {
+        replaceLoggingMethods.call(this, level, loggerName);
+        this[methodName].apply(this, arguments);
+      }
+    };
+  }
+
+  // By default, we use closely bound real methods wherever possible, and
+  // otherwise we wait for a console to appear, and then try again.
+  function defaultMethodFactory(methodName, level, loggerName) {
+    /*jshint validthis:true */
+    return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments);
+  }
+  function Logger(name, defaultLevel, factory) {
+    var self = this;
+    var currentLevel;
+    defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
+    var storageKey = "loglevel";
+    if (typeof name === "string") {
+      storageKey += ":" + name;
+    } else if (typeof name === "symbol") {
+      storageKey = undefined;
+    }
+    function persistLevelIfPossible(levelNum) {
+      var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
+      if (typeof window === undefinedType || !storageKey) return;
+
+      // Use localStorage if available
+      try {
+        window.localStorage[storageKey] = levelName;
+        return;
+      } catch (ignore) {}
+
+      // Use session cookie as fallback
+      try {
+        window.document.cookie = encodeURIComponent(storageKey) + "=" + levelName + ";";
+      } catch (ignore) {}
+    }
+    function getPersistedLevel() {
+      var storedLevel;
+      if (typeof window === undefinedType || !storageKey) return;
+      try {
+        storedLevel = window.localStorage[storageKey];
+      } catch (ignore) {}
+
+      // Fallback to cookies if local storage gives us nothing
+      if (typeof storedLevel === undefinedType) {
+        try {
+          var cookie = window.document.cookie;
+          var location = cookie.indexOf(encodeURIComponent(storageKey) + "=");
+          if (location !== -1) {
+            storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+          }
+        } catch (ignore) {}
+      }
+
+      // If the stored level is not valid, treat it as if nothing was stored.
+      if (self.levels[storedLevel] === undefined) {
+        storedLevel = undefined;
+      }
+      return storedLevel;
+    }
+    function clearPersistedLevel() {
+      if (typeof window === undefinedType || !storageKey) return;
+
+      // Use localStorage if available
+      try {
+        window.localStorage.removeItem(storageKey);
+        return;
+      } catch (ignore) {}
+
+      // Use session cookie as fallback
+      try {
+        window.document.cookie = encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+      } catch (ignore) {}
+    }
+
+    /*
+     *
+     * Public logger API - see https://github.com/pimterry/loglevel for details
+     *
+     */
+
+    self.name = name;
+    self.levels = {
+      "TRACE": 0,
+      "DEBUG": 1,
+      "INFO": 2,
+      "WARN": 3,
+      "ERROR": 4,
+      "SILENT": 5
+    };
+    self.methodFactory = factory || defaultMethodFactory;
+    self.getLevel = function () {
+      return currentLevel;
+    };
+    self.setLevel = function (level, persist) {
+      if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+        level = self.levels[level.toUpperCase()];
+      }
+      if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+        currentLevel = level;
+        if (persist !== false) {
+          // defaults to true
+          persistLevelIfPossible(level);
+        }
+        replaceLoggingMethods.call(self, level, name);
+        if (typeof console === undefinedType && level < self.levels.SILENT) {
+          return "No console available for logging";
+        }
+      } else {
+        throw "log.setLevel() called with invalid level: " + level;
+      }
+    };
+    self.setDefaultLevel = function (level) {
+      defaultLevel = level;
+      if (!getPersistedLevel()) {
+        self.setLevel(level, false);
+      }
+    };
+    self.resetLevel = function () {
+      self.setLevel(defaultLevel, false);
+      clearPersistedLevel();
+    };
+    self.enableAll = function (persist) {
+      self.setLevel(self.levels.TRACE, persist);
+    };
+    self.disableAll = function (persist) {
+      self.setLevel(self.levels.SILENT, persist);
+    };
+
+    // Initialize with the right level
+    var initialLevel = getPersistedLevel();
+    if (initialLevel == null) {
+      initialLevel = defaultLevel;
+    }
+    self.setLevel(initialLevel, false);
+  }
+
+  /*
+   *
+   * Top-level API
+   *
+   */
+
+  var defaultLogger = new Logger();
+  var _loggersByName = {};
+  defaultLogger.getLogger = function getLogger(name) {
+    if (typeof name !== "symbol" && typeof name !== "string" || name === "") {
+      throw new TypeError("You must supply a name when creating a logger.");
+    }
+    var logger = _loggersByName[name];
+    if (!logger) {
+      logger = _loggersByName[name] = new Logger(name, defaultLogger.getLevel(), defaultLogger.methodFactory);
+    }
+    return logger;
+  };
+
+  // Grab the current global log variable in case of overwrite
+  var _log = typeof window !== undefinedType ? window.log : undefined;
+  defaultLogger.noConflict = function () {
+    if (typeof window !== undefinedType && window.log === defaultLogger) {
+      window.log = _log;
+    }
+    return defaultLogger;
+  };
+  defaultLogger.getLoggers = function getLoggers() {
+    return _loggersByName;
+  };
+
+  // ES6 default export, for compatibility
+  defaultLogger['default'] = defaultLogger;
+  return defaultLogger;
+});
+var Logger = window.log;
+var Logger_1 = Logger;
+
+//ask if adaptive m3u8 file
+
+if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function (searchString, position) {
+    var subjectString = this.toString();
+    if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
+      position = subjectString.length;
+    }
+    position -= searchString.length;
+    var lastIndex = subjectString.lastIndexOf(searchString, position);
+    return lastIndex !== -1 && lastIndex === position;
+  };
+}
+/**
+ * 
+ * @param {string} sParam 
+ * @param {string=} search
+ * @returns 
+ */
+function getUrlParameter(sParam, search) {
+  if (typeof search === undefined || search == null) {
+    search = window.location.search;
+  }
+  var sPageURL = decodeURIComponent(search.substring(1)),
+    sURLVariables = sPageURL.split('&'),
+    sParameterName,
+    i;
+  for (i = 0; i < sURLVariables.length; i++) {
+    sParameterName = sURLVariables[i].split('=');
+    if (sParameterName[0] === sParam) {
+      return sParameterName[1] === undefined ? true : sParameterName[1];
+    }
+  }
+}
+var getUrlParameter_1 = getUrlParameter;
+
+const STATIC_VIDEO_HTML = "<video id='video-player' class='video-js vjs-default-skin vjs-big-play-centered' controls playsinline></video>";
+class WebPlayer {
+  static DEFAULT_PLAY_ORDER = ["webrtc", "hls"];
+  static DEFAULT_PLAY_TYPE = ["mp4", "webm"];
+  static HLS_EXTENSION = "m3u8";
+  static WEBRTC_EXTENSION = "webrtc";
+  static DASH_EXTENSION = "mpd";
+
+  /**
+  * streamsFolder: streams folder. Optional. Default value is "streams"
+  */
+  static STREAMS_FOLDER = "streams";
+
+  /**
+   * Video HTML content. It's by default STATIC_VIDEO_HTML
+   */
+  videoHTMLContent;
+
+  /**
+   * video player Id. It's by default "video-player"
+   */
+  videoPlayerId;
+
+  /**
+  *  "playOrder": the order which technologies is used in playing. Optional. Default value is "webrtc,hls".
+  *	possible values are "hls,webrtc","webrtc","hls","vod","dash"
+  *   It will be taken from url parameter "playOrder".
+  */
+  playOrder;
+
+  /**
+   * currentPlayType: current play type in playOrder
+   */
+  currentPlayType;
+
+  /**
+   * "is360": if true, player will be 360 degree player. Optional. Default value is false.
+   * It will be taken from url parameter "is360".
+   */
+  is360 = false;
+
+  /**
+   * "streamId": stream id. Mandatory. If it is not set, it will be taken from url parameter "id".
+   * It will be taken from url parameter "id".
+   */
+  streamId;
+
+  /**
+   * "playType": play type. Optional.  It's used for vod. Default value is "mp4,webm".
+   * It can be "mp4,webm","webm,mp4","mp4","webm","mov" and it's used for vod.
+   * It will be taken from url parameter "playType".
+   */
+  playType;
+
+  /**
+   * "token": token. It's required when stream security for playback is enabled .
+   * It will be taken from url parameter "token".
+   */
+  token;
+
+  /**
+   * autoplay: if true, player will be started automatically. Optional. Default value is true.
+   * autoplay is false by default for mobile devices because of mobile browser's autoplay policy.
+   * It will be taken from url parameter "autoplay".
+   */
+  autoPlay = true;
+
+  /**
+   * mute: if true, player will be started muted. Optional. Default value is true.
+   * default value is true because of browser's autoplay policy.
+   * It will be taken from url parameter "mute".
+   */
+  mute = true;
+
+  /**
+   * targetLatency: target latency in seconds. Optional. Default value is 3.
+   * It will be taken from url parameter "targetLatency".
+   * It's used for dash(cmaf) playback.
+   */
+  targetLatency = 3;
+
+  /**
+   * subscriberId: subscriber id. Optional. It will be taken from url parameter "subscriberId".
+   */
+  subscriberId;
+
+  /**
+   * subscriberCode: subscriber code. Optional. It will be taken from url parameter "subscriberCode".
+   */
+  subscriberCode;
+
+  /**
+   * window: window object
+   */
+  window;
+
+  /**
+   * video player container element
+   */
+  containerElement;
+
+  /**
+   * player placeholder element
+   */
+  placeHolderElement;
+
+  /**
+   * videojs player
+   */
+  videojsPlayer;
+
+  /**
+   * dash player
+   */
+  dashPlayer;
+
+  /**
+   * Ice servers for webrtc
+   */
+  iceServers;
+
+  /**
+   * ice connection state
+   */
+  iceConnected;
+
+  /**
+   * flag to check if error callback is called
+   */
+  errorCalled;
+
+  /**
+   * scene for 360 degree player
+   */
+  aScene;
+
+  /**
+   * player listener
+   */
+  playerListener;
+
+  /**
+   * webRTCDataListener
+   */
+  webRTCDataListener;
+
+  /**
+   * Field to keep if tryNextMethod is already called
+   */
+  tryNextTechTimer;
+  constructor(configOrWindow, containerElement, placeHolderElement) {
+    WebPlayer.DEFAULT_PLAY_ORDER = ["webrtc", "hls"];
+    WebPlayer.DEFAULT_PLAY_TYPE = ["mp4", "webm"];
+    WebPlayer.HLS_EXTENSION = "m3u8";
+    WebPlayer.WEBRTC_EXTENSION = "webrtc";
+    WebPlayer.DASH_EXTENSION = "mpd";
+
+    /**
+    * streamsFolder: streams folder. Optional. Default value is "streams"
+    */
+    WebPlayer.STREAMS_FOLDER = "streams";
+    WebPlayer.VIDEO_PLAYER_ID = "video-player";
+
+    // Initialize default values
+    this.setDefaults();
+
+    // Check if the first argument is a config object or a Window object
+    if (!this.isWindow(configOrWindow)) {
+      // New config object mode
+      Logger_1.info("config object mode");
+      Object.assign(this, configOrWindow);
+      this.window = window;
+    } else {
+      // Backward compatibility mode
+      Logger_1.info("getting from url mode");
+      this.window = configOrWindow;
+
+      // Use getUrlParameter for backward compatibility
+      this.initializeFromUrlParams();
+    }
+    this.containerElement = containerElement;
+    this.placeHolderElement = placeHolderElement;
+    if (this.streamId == null) {
+      var message = "Stream id is not set.Please add your stream id to the url as a query parameter such as ?id={STREAM_ID} to the url";
+      Logger_1.error(message);
+      //TODO: we may need to show this message on directly page
+      alert(message);
+      throw new Error(message);
+    }
+    if (!this.httpBaseURL) {
+      let appName = this.window.location.pathname.substring(0, this.window.location.pathname.lastIndexOf("/") + 1);
+      let path = this.window.location.hostname + ":" + this.window.location.port + appName + this.streamId + ".webrtc";
+      this.websocketURL = "ws://" + path;
+      if (location.protocol.startsWith("https")) {
+        this.websocketURL = "wss://" + path;
+      }
+      this.httpBaseURL = location.protocol + "//" + this.window.location.hostname + ":" + this.window.location.port + appName;
+    } else if (!this.websocketURL) {
+      this.websocketURL = this.httpBaseURL.replace("http", "ws");
+      if (!this.websocketURL.endsWith("/")) {
+        this.websocketURL += "/";
+      }
+      this.websocketURL += this.streamId + ".webrtc";
+    }
+    this.dom = this.window.document;
+    this.containerElement.innerHTML = this.videoHTMLContent;
+    this.setPlayerVisible(false);
+  }
+  isWindow(configOrWindow) {
+    //accept that it's a window if it's a Window instance or it has location.href
+    //location.href is used in test environment
+    return configOrWindow instanceof Window || configOrWindow.location && configOrWindow.location.href;
+  }
+  initialize() {
+    return this.loadVideoJSComponents().then(() => {
+      return this.loadDashScript();
+    }).then(() => {
+      if (this.is360 && !window.AFRAME) {
+        return Promise.resolve().then(function () { return require('./aframe-master-42bb78a9.js'); }).then(function (n) { return n.aframeMaster; });
+      }
+    }).catch(e => {
+      Logger_1.error("Scripts are not loaded. The error is " + e);
+      throw e;
+    });
+  }
+  loadDashScript() {
+    if (this.playOrder.includes("dash") && !this.dashjsLoaded) {
+      return Promise.resolve().then(function () { return require('./dash.all.min-84806d51.js'); }).then(function (n) { return n.dash_all_min; }).then(dashjs => {
+        window.dashjs = dashjs.default;
+        this.dashjsLoaded = true;
+        console.log("dash.all.min.js is loaded");
+      });
+    } else {
+      return Promise.resolve();
+    }
+  }
+  setDefaults() {
+    this.playOrder = WebPlayer.DEFAULT_PLAY_ORDER;
+    this.currentPlayType = null;
+    this.is360 = false;
+    this.streamId = null;
+    this.playType = WebPlayer.DEFAULT_PLAY_TYPE;
+    this.token = null;
+    this.autoPlay = true;
+    this.mute = true;
+    this.targetLatency = 3;
+    this.subscriberId = null;
+    this.subscriberCode = null;
+    this.window = null;
+    this.containerElement = null;
+    this.placeHolderElement = null;
+    this.videojsPlayer = null;
+    this.dashPlayer = null;
+    this.iceServers = '[ { "urls": "stun:stun1.l.google.com:19302" } ]';
+    this.iceConnected = false;
+    this.errorCalled = false;
+    this.tryNextTechTimer = -1;
+    this.aScene = null;
+    this.playerListener = null;
+    this.webRTCDataListener = null;
+    this.websocketURL = null;
+    this.httpBaseURL = null;
+    this.videoHTMLContent = STATIC_VIDEO_HTML;
+    this.videoPlayerId = "video-player";
+    this.videojsLoaded = false;
+    this.dashjsLoaded = false;
+  }
+  initializeFromUrlParams() {
+    // Fetch parameters from URL and set to class properties
+    this.streamId = getUrlParameter_1("id", this.window.location.search) || this.streamId;
+    if (this.streamId == null) {
+      //check name variable for compatibility with older versions
+
+      this.streamId = getUrlParameter_1("name", this.window.location.search) || this.streamId;
+      if (this.streamId == null) {
+        Logger_1.warn("Please use id parameter instead of name parameter.");
+      }
+    }
+    this.is360 = getUrlParameter_1("is360", this.window.location.search) === "true" || this.is360;
+    this.playType = getUrlParameter_1("playType", this.window.location.search)?.split(',') || this.playType;
+    this.token = getUrlParameter_1("token", this.window.location.search) || this.token;
+    let autoPlayLocal = getUrlParameter_1("autoplay", this.window.location.search);
+    if (autoPlayLocal === "false") {
+      this.autoPlay = false;
+    } else {
+      this.autoPlay = true;
+    }
+    let muteLocal = getUrlParameter_1("mute", this.window.location.search);
+    if (muteLocal === "false") {
+      this.mute = false;
+    } else {
+      this.mute = true;
+    }
+    let localTargetLatency = getUrlParameter_1("targetLatency", this.window.location.search);
+    if (localTargetLatency != null) {
+      let latencyInNumber = Number(localTargetLatency);
+      if (!isNaN(latencyInNumber)) {
+        this.targetLatency = latencyInNumber;
+      } else {
+        Logger_1.warn("targetLatency parameter is not a number. It will be ignored.");
+        this.targetLatency = this.targetLatency || 3; // Default value or existing value
+      }
+    }
+    this.subscriberId = getUrlParameter_1("subscriberId", this.window.location.search) || this.subscriberId;
+    this.subscriberCode = getUrlParameter_1("subscriberCode", this.window.location.search) || this.subscriberCode;
+    let playOrder = getUrlParameter_1("playOrder", this.window.location.search);
+    this.playOrder = playOrder ? playOrder.split(',') : this.playOrder;
+  }
+  loadWebRTCComponents() {
+    if (this.playOrder.includes("webrtc")) {
+      return Promise.resolve().then(function () { return require('./videojs-webrtc-plugin-d30c3e7a.js'); }).then(css => {
+        Logger_1.info("videojs-webrtc-plugin.css is loaded");
+        const styleElement = this.dom.createElement('style');
+        styleElement.textContent = css.default.toString(); // Assuming css module exports a string
+        this.dom.head.appendChild(styleElement);
+        return Promise.resolve().then(function () { return require('./videojs-webrtc-plugin.es-ac81d249.js'); }).then(videojsWebrtcPluginLocal => {
+          Logger_1.info("videojs-webrtc-plugin is loaded");
+        });
+      });
+    } else {
+      return Promise.resolve();
+    }
+  }
+  /**
+   * load scripts dynamically
+   */
+  loadVideoJSComponents() {
+    if (this.playOrder.includes("hls") || this.playOrder.includes("vod") || this.playOrder.includes("webrtc")) {
+      //it means we're going to use videojs
+      //load videojs css
+      if (!this.videojsLoaded) {
+        return Promise.resolve().then(function () { return require('./video-js.min-7e4ae47a.js'); }).then(css => {
+          const styleElement = this.dom.createElement('style');
+          styleElement.textContent = css.default.toString(); // Assuming css module exports a string
+          this.dom.head.appendChild(styleElement);
+        }).then(() => {
+          return Promise.resolve().then(function () { return require('./video.es-72122d04.js'); }).then(function (n) { return n.video_es; });
+        }).then(videojs => {
+          window.videojs = videojs.default;
+          this.videojsLoaded = true;
+        }).then(() => {
+          return Promise.resolve().then(function () { return require('./videojs-contrib-quality-levels.es-ef3cec9e.js'); });
+        }).then(() => {
+          return Promise.resolve().then(function () { return require('./videojs-hls-quality-selector.es-562309df.js'); });
+        }).then(() => {
+          return this.loadWebRTCComponents();
+        });
+      } else {
+        return Promise.resolve();
+      }
+    } else {
+      return Promise.resolve();
+    }
+  }
+
+  /**
+   * enable 360 player
+   */
+  enable360Player() {
+    this.aScene = this.dom.createElement("a-scene");
+    var elementId = this.dom.getElementsByTagName("video")[0].id;
+    this.aScene.innerHTML = "<a-videosphere src=\"#" + elementId + "\" rotation=\"0 180 0\" style=\"background-color: antiquewhite\"></a-videosphere>";
+    this.dom.body.appendChild(this.aScene);
+  }
+
+  /**
+   * set player visibility
+   * @param {boolean} visible
+   */
+  setPlayerVisible(visible) {
+    this.containerElement.style.display = visible ? "block" : "none";
+    if (this.placeHolderElement) {
+      this.placeHolderElement.style.display = visible ? "none" : "block";
+    }
+    if (this.is360) {
+      if (visible) {
+        this.enable360Player();
+      } else if (this.aScene != null) {
+        var elements = this.dom.getElementsByTagName("a-scene");
+        while (elements.length > 0) {
+          this.dom.body.removeChild(elements[0]);
+          elements = this.dom.getElementsByTagName("a-scene");
+        }
+        this.aScene = null;
+      }
+    }
+  }
+  handleWebRTCInfoMessages(infos) {
+    if (infos["info"] == "ice_connection_state_changed") {
+      Logger_1.debug("ice connection state changed to " + infos["obj"].state);
+      if (infos["obj"].state == "completed" || infos["obj"].state == "connected") {
+        this.iceConnected = true;
+      } else if (infos["obj"].state == "failed" || infos["obj"].state == "disconnected" || infos["obj"].state == "closed") {
+        //
+        Logger_1.warn("Ice connection is not connected. tryNextTech to replay");
+        this.tryNextTech();
+      }
+    } else if (infos["info"] == "closed") {
+      //this means websocket is closed and it stops the playback - tryNextTech
+      Logger_1.warn("Websocket is closed. tryNextTech to replay");
+      this.tryNextTech();
+    } else if (infos["info"] == "resolutionChangeInfo") {
+      Logger_1.info("Resolution is changing");
+      this.videojsPlayer.pause();
+      setTimeout(() => {
+        this.videojsPlayer.play();
+      }, 1000);
+    }
+  }
+
+  /**
+   * Play the stream via videojs
+   * @param {*} streamUrl
+   * @param {*} extension
+   * @returns
+   */
+  playWithVideoJS(streamUrl, extension) {
+    var type;
+    if (extension == "mp4") {
+      type = "video/mp4";
+    } else if (extension == "webm") {
+      type = "video/webm";
+    } else if (extension == "mov") {
+      type = "video/mp4";
+      alert("Browsers do not support to play mov format");
+    } else if (extension == "avi") {
+      type = "video/mp4";
+      alert("Browsers do not support to play avi format");
+    } else if (extension == "m3u8") {
+      type = "application/x-mpegURL";
+    } else if (extension == "mpd") {
+      type = "application/dash+xml";
+    } else if (extension == "webrtc") {
+      type = "video/webrtc";
+    } else {
+      Logger_1.warn("Unknown extension: " + extension);
+      return;
+    }
+    var preview = this.streamId;
+    if (this.streamId.endsWith("_adaptive")) {
+      preview = streamId.substring(0, streamId.indexOf("_adaptive"));
+    }
+
+    //same videojs is being use for hls, vod and webrtc streams
+    this.videojsPlayer = videojs(this.videoPlayerId, {
+      poster: "previews/" + preview + ".png",
+      liveui: extension == "m3u8" ? true : false,
+      liveTracker: {
+        trackingThreshold: 0
+      },
+      html5: {
+        vhs: {
+          limitRenditionByPlayerDimensions: false
+        }
+      },
+      controls: true,
+      class: 'video-js vjs-default-skin vjs-big-play-centered',
+      muted: this.mute,
+      preload: "auto",
+      autoplay: this.autoPlay
+    });
+    this.videojsPlayer.on('error', e => {
+      Logger_1.warn("There is an error in playback: " + e);
+      // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
+      if (!this.errorCalled) {
+        this.errorCalled = true;
+        setTimeout(() => {
+          this.tryNextTech();
+          this.errorCalled = false;
+        }, 2500);
+      }
+    });
+
+    //webrtc specific events
+    if (extension == "webrtc") {
+      this.videojsPlayer.on('webrtc-info', (event, infos) => {
+        //Logger.warn("info callback: " + JSON.stringify(infos));
+        this.handleWebRTCInfoMessages(infos);
+      });
+      this.videojsPlayer.on('webrtc-error', (event, errors) => {
+        //some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
+        Logger_1.warn("error callback: " + JSON.stringify(errors));
+        if (errors["error"] == "no_stream_exist" || errors["error"] == "WebSocketNotConnected" || errors["error"] == "not_initialized_yet" || errors["error"] == "data_store_not_available" || errors["error"] == "highResourceUsage" || errors["error"] == "unauthorized_access" || errors["error"] == "user_blocked") {
+          //handle high resource usage and not authroized errors && websocket disconnected
+          //Even if webrtc adaptor has auto reconnect scenario, we dispose the videojs immediately in tryNextTech
+          // so that reconnect scenario is managed here
+
+          this.tryNextTech();
+        } else if (errors["error"] == "notSetRemoteDescription") {
+          /*
+          * If getting codec incompatible or remote description error, it will redirect HLS player.
+          */
+          Logger_1.warn("notSetRemoteDescription error. Redirecting to HLS player.");
+          this.playIfExists("hls");
+        }
+      });
+      this.videojsPlayer.on("webrtc-data-received", (event, obj) => {
+        Logger_1.warn("webrtc-data-received: " + JSON.stringify(obj));
+        if (this.webRTCDataListener != null) {
+          this.webRTCDataListener(obj);
+        }
+      });
+    }
+
+    //hls specific calls
+    if (extension == "m3u8") {
+      videojs.Vhs.xhr.beforeRequest = options => {
+        let securityParams = this.getSecurityQueryParams();
+        if (!options.uri.includes(securityParams)) {
+          if (!options.uri.endsWith("?")) {
+            options.uri = options.uri + "?";
+          }
+          options.uri += securityParams;
+        }
+        Logger_1.debug("hls request: " + options.uri);
+        return options;
+      };
+      this.videojsPlayer.ready(() => {
+        // If it's already added to player, no need to add again
+        if (typeof this.videojsPlayer.hlsQualitySelector === "function") {
+          this.videojsPlayer.hlsQualitySelector({
+            displayCurrentQuality: true
+          });
+        }
+
+        // If there is no adaptive option in m3u8 no need to show quality selector
+        let qualityLevels = this.videojsPlayer.qualityLevels();
+        qualityLevels.on('addqualitylevel', function (event) {
+          let qualityLevel = event.qualityLevel;
+          if (qualityLevel.height) {
+            qualityLevel.enabled = true;
+          } else {
+            qualityLevels.removeQualityLevel(qualityLevel);
+            qualityLevel.enabled = false;
+          }
+        });
+      });
+    }
+
+    //videojs is being used to play mp4, webm, m3u8 and webrtc
+    //make the videoJS visible when ready is called except for webrtc
+    //webrtc fires ready event all cases so we use "play" event to make the player visible
+
+    //this setting is critical to play in mobile
+    if (extension == "mp4" || extension == "webm" || extension == "m3u8") {
+      this.makeVideoJSVisibleWhenReady();
+    }
+    this.videojsPlayer.on('ended', () => {
+      //reinit to play after it ends
+      Logger_1.warn("stream is ended");
+      this.setPlayerVisible(false);
+      //for webrtc, this event can be called by two reasons
+      //1. ice connection is not established, it means that there is a networking issug
+      //2. stream is ended
+      if (this.currentPlayType != "vod") {
+        //if it's vod, it means that stream is ended and no need to replay
+
+        if (this.iceConnected) {
+          //if iceConnected is true, it means that stream is really ended for webrtc
+
+          //initialize to play again if the publishing starts again
+          this.playIfExists(this.playOrder[0]);
+        } else if (this.currentPlayType == "hls") {
+          //if it's hls, it means that stream is ended
+
+          this.setPlayerVisible(false);
+          if (this.playOrder[0] = "hls") {
+            //do not play again if it's hls because it play last seconds again, let the server clear it
+            setTimeout(() => {
+              this.playIfExists(this.playOrder[0]);
+            }, 10000);
+          } else {
+            this.playIfExists(this.playOrder[0]);
+          }
+          //TODO: what if the stream is hls vod then it always re-play
+        } else {
+          //if iceConnected is false, it means that there is a networking issue for webrtc
+          this.tryNextTech();
+        }
+      }
+      if (this.playerListener != null) {
+        this.playerListener("ended");
+      }
+    });
+
+    //webrtc plugin sends play event. On the other hand, webrtc plugin sends ready event for every scenario.
+    //so no need to trust ready event for webrt play
+    this.videojsPlayer.on("play", () => {
+      this.setPlayerVisible(true);
+      if (this.playerListener != null) {
+        this.playerListener("play");
+      }
+    });
+    this.iceConnected = false;
+    this.videojsPlayer.src({
+      src: streamUrl,
+      type: type,
+      withCredentials: true,
+      iceServers: this.iceServers,
+      reconnect: false //webrtc adaptor has auto reconnect scenario, just disable it, we manage it here
+    });
+    if (this.autoPlay) {
+      this.videojsPlayer.play().catch(e => {
+        Logger_1.warn("Problem in playback. The error is " + e);
+      });
+    }
+  }
+  makeVideoJSVisibleWhenReady() {
+    this.videojsPlayer.ready(() => {
+      this.setPlayerVisible(true);
+    });
+  }
+
+  /**
+   * check if stream exists via http
+   * @param {*} streamsfolder
+   * @param {*} streamId
+   * @param {*} extension
+   * @returns
+   */
+  checkStreamExistsViaHttp(streamsfolder, streamId, extension) {
+    var streamPath = this.httpBaseURL;
+    if (!streamId.startsWith(streamsfolder)) {
+      streamPath += streamsfolder + "/";
+    }
+    streamPath += streamId;
+    if (extension != null && extension != "") {
+      //if there is extension, add it and try if _adaptive exists
+      streamPath += "_adaptive" + "." + extension;
+    }
+    streamPath = this.addSecurityParams(streamPath);
+    return fetch(streamPath, {
+      method: 'HEAD'
+    }).then(response => {
+      if (response.status == 200) {
+        // adaptive m3u8 & mpd exists,play it
+        return new Promise(function (resolve, reject) {
+          resolve(streamPath);
+        });
+      } else {
+        //adaptive not exists, try mpd or m3u8 exists.
+        streamPath = this.httpBaseURL + streamsfolder + "/" + streamId + "." + extension;
+        streamPath = this.addSecurityParams(streamPath);
+        return fetch(streamPath, {
+          method: 'HEAD'
+        }).then(response => {
+          if (response.status == 200) {
+            return new Promise(function (resolve, reject) {
+              resolve(streamPath);
+            });
+          } else {
+            Logger_1.warn("No stream found");
+            return new Promise(function (resolve, reject) {
+              reject("resource_is_not_available");
+            });
+          }
+        });
+      }
+    });
+  }
+  addSecurityParams(streamPath) {
+    var securityParams = this.getSecurityQueryParams();
+    if (securityParams != null && securityParams != "") {
+      streamPath += "?" + securityParams;
+    }
+    return streamPath;
+  }
+
+  /**
+   * try next tech if current tech is not working
+   */
+  tryNextTech() {
+    if (this.tryNextTechTimer == -1) {
+      this.destroyDashPlayer();
+      this.destroyVideoJSPlayer();
+      this.setPlayerVisible(false);
+      var index = this.playOrder.indexOf(this.currentPlayType);
+      if (index == -1 || index == this.playOrder.length - 1) {
+        index = 0;
+      } else {
+        index++;
+      }
+      this.tryNextTechTimer = setTimeout(() => {
+        this.tryNextTechTimer = -1;
+        this.playIfExists(this.playOrder[index]);
+      }, 3000);
+    } else {
+      Logger_1.debug("tryNextTech is already scheduled no need to schedule again");
+    }
+  }
+
+  /**
+   * play stream throgugh dash player
+   * @param {string"} streamUrl
+   */
+  playViaDash(streamUrl) {
+    this.destroyDashPlayer();
+    this.dashPlayer = dashjs.MediaPlayer().create();
+    this.dashPlayer.extend("RequestModifier", () => {
+      return {
+        modifyRequestHeader: function (xhr, {
+          url
+        }) {
+          return xhr;
+        },
+        modifyRequestURL: url => {
+          var modifiedUrl = "";
+          var securityParams = this.getSecurityQueryParams();
+          if (!url.includes(securityParams)) {
+            if (!url.endsWith("?")) {
+              url += "?";
+            }
+            modifiedUrl = url + securityParams;
+            Logger_1.warn(modifiedUrl);
+            return modifiedUrl;
+          }
+          return url;
+        },
+        modifyRequest(request) {}
+      };
+    });
+    this.dashPlayer.updateSettings({
+      streaming: {
+        delay: {
+          liveDelay: this.targetLatency
+        },
+        liveCatchup: {
+          maxDrift: 0.5,
+          playbackRate: 0.5,
+          latencyThreshold: 60
+        }
+      }
+    });
+    this.dashPlayer.initialize(this.containerElement.firstChild, streamUrl, this.autoPlay);
+    this.dashPlayer.setMute(this.mute);
+    this.dashLatencyTimer = setInterval(() => {
+      Logger_1.warn("live latency: " + this.dashPlayer.getCurrentLiveLatency());
+    }, 2000);
+    this.makeDashPlayerVisibleWhenInitialized();
+    this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_PLAYING, event => {
+      Logger_1.warn("playback started");
+      this.setPlayerVisible(true);
+      if (this.playerListener != null) {
+        this.playerListener("play");
+      }
+    });
+    this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_ENDED, () => {
+      Logger_1.warn("playback ended");
+      this.destroyDashPlayer();
+      this.setPlayerVisible(false);
+      //streaming can be started again so try to play again with preferred tech
+      if (this.playOrder[0] = "dash") {
+        //do not play again if it's dash because it play last seconds again, let the server clear it
+        setTimeout(() => {
+          this.playIfExists(this.playOrder[0]);
+        }, 10000);
+      } else {
+        this.playIfExists(this.playOrder[0]);
+      }
+      if (this.playerListener != null) {
+        this.playerListener("ended");
+      }
+    });
+    this.dashPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_ERROR, event => {
+      this.tryNextTech();
+    });
+    this.dashPlayer.on(dashjs.MediaPlayer.events.ERROR, event => {
+      this.tryNextTech();
+    });
+  }
+  makeDashPlayerVisibleWhenInitialized() {
+    this.dashPlayer.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, event => {
+      Logger_1.warn("Stream initialized");
+      //make the player visible in mobile devices
+      this.setPlayerVisible(true);
+    });
+  }
+
+  /**
+   * destroy the dash player
+   */
+  destroyDashPlayer() {
+    if (this.dashPlayer) {
+      this.dashPlayer.destroy();
+      this.dashPlayer = null;
+      clearInterval(this.dashLatencyTimer);
+    }
+  }
+
+  /**
+   * destroy the videojs player
+   */
+  destroyVideoJSPlayer() {
+    if (this.videojsPlayer) {
+      this.videojsPlayer.dispose();
+      this.videojsPlayer = null;
+    }
+  }
+
+  /**
+   * Destory the player
+   */
+  destroy() {
+    this.destroyVideoJSPlayer();
+    this.destroyDashPlayer();
+  }
+
+  /**
+   * play the stream with the given tech
+   * @param {string} tech
+   */
+  async playIfExists(tech) {
+    this.currentPlayType = tech;
+    this.destroyVideoJSPlayer();
+    this.destroyDashPlayer();
+    this.setPlayerVisible(false);
+    this.containerElement.innerHTML = this.videoHTMLContent;
+    Logger_1.warn("Try to play the stream " + this.streamId + " with " + this.currentPlayType);
+    switch (this.currentPlayType) {
+      case "hls":
+        //TODO: Test case for hls
+        //1. Play stream with adaptive m3u8 for live and VoD
+        //2. Play stream with m3u8 for live and VoD
+        //3. if files are not available check nextTech is being called
+        return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId, WebPlayer.HLS_EXTENSION).then(streamPath => {
+          this.playWithVideoJS(streamPath, WebPlayer.HLS_EXTENSION);
+          Logger_1.warn("incoming stream path: " + streamPath);
+        }).catch(error => {
+          Logger_1.warn("HLS stream resource not available for stream:" + this.streamId + " error is " + error + ". Try next play tech");
+          this.tryNextTech();
+        });
+      case "dash":
+        return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId + "/" + this.streamId, WebPlayer.DASH_EXTENSION).then(streamPath => {
+          this.playViaDash(streamPath);
+        }).catch(error => {
+          Logger_1.warn("DASH stream resource not available for stream:" + this.streamId + " error is " + error + ". Try next play tech");
+          this.tryNextTech();
+        });
+      case "webrtc":
+        return this.playWithVideoJS(this.addSecurityParams(this.websocketURL), WebPlayer.WEBRTC_EXTENSION);
+      case "vod":
+        //TODO: Test case for vod
+        //1. Play stream with mp4 for VoD
+        //2. Play stream with webm for VoD
+        //3. Play stream with playOrder type
+
+        var lastIndexOfDot = this.streamId.lastIndexOf(".");
+        var extension;
+        if (lastIndexOfDot != -1) {
+          //if there is a dot in the streamId, it means that this is extension, use it. make the extension empty
+          this.playType[0] = "";
+          extension = this.streamId.substring(lastIndexOfDot + 1);
+        } else {
+          //we need to give extension to playWithVideoJS
+          extension = this.playType[0];
+        }
+        return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId, this.playType[0]).then(streamPath => {
+          //we need to give extension to playWithVideoJS
+          this.playWithVideoJS(streamPath, extension);
+        }).catch(error => {
+          Logger_1.warn("VOD stream resource not available for stream:" + this.streamId + " and play type " + this.playType[0] + ". Error is " + error);
+          if (this.playType.length > 1) {
+            Logger_1.warn("Try next play type which is " + this.playType[1] + ".");
+            this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId, this.playType[1]).then(streamPath => {
+              this.playWithVideoJS(streamPath, this.playType[1]);
+            }).catch(error => {
+              Logger_1.warn("VOD stream resource not available for stream:" + this.streamId + " and play type error is " + error);
+            });
+          }
+        });
+    }
+  }
+
+  /**
+   *
+   * @returns {String} query string for security
+   */
+  getSecurityQueryParams() {
+    var queryString = "";
+    if (this.token != null) {
+      queryString += "&token=" + this.token;
+    }
+    if (this.subscriberId != null) {
+      queryString += "&subscriberId=" + this.subscriberId;
+    }
+    if (this.subscriberCode != null) {
+      queryString += "&subscriberCode=" + this.subscriberCode;
+    }
+    return queryString;
+  }
+
+  /**
+   * play the stream with videojs player or dash player
+   */
+  play() {
+    if (this.streamId.startsWith(WebPlayer.STREAMS_FOLDER)) {
+      //start videojs player because it directly try to play stream from streams folder
+      var lastIndexOfDot = this.streamId.lastIndexOf(".");
+      var extension = this.streamId.substring(lastIndexOfDot + 1);
+      this.playOrder = ["vod"];
+      if (!this.httpBaseURL.endsWith("/")) {
+        this.httpBaseURL += "/";
+      }
+      this.containerElement.innerHTML = this.videoHTMLContent;
+      if (extension == WebPlayer.DASH_EXTENSION) {
+        this.playViaDash(this.httpBaseURL + this.addSecurityParams(this.streamId), extension);
+      } else {
+        this.playWithVideoJS(this.httpBaseURL + this.addSecurityParams(this.streamId), extension);
+      }
+    } else {
+      this.playIfExists(this.playOrder[0]);
+    }
+  }
+
+  /**
+   * mute or unmute the player
+   * @param {boolean} mutestatus true to mute the player
+   */
+  mutePlayer(mutestatus) {
+    this.mute = mutestatus;
+    if (this.videojsPlayer) {
+      this.videojsPlayer.muted(mutestatus);
+    }
+    if (this.dashPlayer) {
+      this.dashPlayer.setMute(mutestatus);
+    }
+  }
+
+  /**
+   *
+   * @returns {boolean} true if player is muted
+   */
+  isMuted() {
+    return this.mute;
+  }
+  addPlayerListener(playerListener) {
+    this.playerListener = playerListener;
+  }
+
+  /**
+   * WebRTC data listener
+   * @param {*} webRTCDataListener
+   */
+  addWebRTCDataListener(webRTCDataListener) {
+    this.webRTCDataListener = webRTCDataListener;
+  }
+
+  /**
+   *
+   * @param {*} data
+   */
+  sendWebRTCData(data) {
+    try {
+      if (this.videojsPlayer && this.currentPlayType == "webrtc") {
+        this.videojsPlayer.sendDataViaWebRTC(data);
+        return true;
+      } else {
+        Logger_1.warn("Player is not ready or playType is not WebRTC");
+      }
+    } catch (error) {
+      // Handle the error here
+      Logger_1.error("An error occurred while sending WebRTC data: ", error);
+    }
+    return false;
+  }
+}
+
+exports.STATIC_VIDEO_HTML = STATIC_VIDEO_HTML;
+exports.WebPlayer = WebPlayer;