@antmedia/web_player 2.11.10 → 2.11.11

package/dist/es/web_player.js

@@ -413,6 +413,10 @@ class WebPlayer {
      * It will be taken from url parameter "mute".
      */
     _defineProperty(this, "mute", false);
+    /**
+     * controls: Toggles the visibility of player controls.
+     */
+    _defineProperty(this, "controls", true);
     /**
      * Force the Player to play with audio Auto Play might not work.
      */
@@ -507,6 +511,15 @@ class WebPlayer {
      * Is IP Camera
      */
     _defineProperty(this, "isIPCamera", void 0);
+    /**
+     * Stream id of backup stream.
+     */
+    _defineProperty(this, "backupStreamId", void 0);
+    /**
+     * activeStreamId: is the stream id that is being played currently
+     * It can be streamID or backupStreamId
+     */
+    _defineProperty(this, "activeStreamId", void 0);
     WebPlayer.DEFAULT_PLAY_ORDER = ["webrtc", "hls"];
     WebPlayer.DEFAULT_PLAY_TYPE = ["mp4", "webm"];
     WebPlayer.HLS_EXTENSION = "m3u8";
@@ -519,6 +532,7 @@ class WebPlayer {
     WebPlayer.STREAMS_FOLDER = "streams";
     WebPlayer.LL_HLS_Folder = "ll-hls";
     WebPlayer.VIDEO_PLAYER_ID = "video-player";
+    WebPlayer.PLAYER_EVENTS = ['abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'enterpictureinpicture', 'leavepictureinpicture', 'fullscreenchange', 'resize', 'audioonlymodechange', 'audiopostermodechange', 'controlsdisabled', 'controlsenabled', 'debugon', 'debugoff', 'disablepictureinpicturechanged', 'dispose', 'enterFullWindow', 'error', 'exitFullWindow', 'firstplay', 'fullscreenerror', 'languagechange', 'loadedmetadata', 'loadstart', 'playerreset', 'playerresize', 'posterchange', 'ready', 'textdata', 'useractive', 'userinactive', 'usingcustomcontrols', 'usingnativecontrols'];
 
     // Initialize default values
     this.setDefaults();
@@ -552,6 +566,8 @@ class WebPlayer {
       alert(message);
       throw new Error(message);
     }
+    //set the active stream id as stream id
+    this.activeStreamId = this.streamId;
     if (!this.httpBaseURL) {
       //this is the case where web player gets everything from url
       var appName = "/";
@@ -570,17 +586,16 @@ class WebPlayer {
       }
       path += appName;
       this.httpBaseURL = this.window.location.protocol + "//" + path;
-      this.websocketURL = "ws://" + path + this.streamId + ".webrtc";
+      this.websocketBaseURL = "ws://" + path;
       if (this.window.location.protocol.startsWith("https")) {
-        this.websocketURL = this.websocketURL.replace("ws", "wss");
+        this.websocketBaseURL = this.websocketBaseURL.replace("ws", "wss");
       }
-    } else if (!this.websocketURL) {
+    } else if (!this.websocketBaseURL) {
       //this is the case where web player gets inputs from config object
       if (!this.httpBaseURL.endsWith("/")) {
         this.httpBaseURL += "/";
       }
-      this.websocketURL = this.httpBaseURL.replace("http", "ws");
-      this.websocketURL += this.streamId + ".webrtc";
+      this.websocketBaseURL = this.httpBaseURL.replace("http", "ws");
     }
     this.dom = this.window.document;
     this.containerElement.innerHTML = this.videoHTMLContent;
@@ -638,7 +653,7 @@ class WebPlayer {
     this.aScene = null;
     this.playerListener = null;
     this.webRTCDataListener = null;
-    this.websocketURL = null;
+    this.websocketBaseURL = null;
     this.httpBaseURL = null;
     this.videoHTMLContent = STATIC_VIDEO_HTML;
     this.videoPlayerId = "video-player";
@@ -654,6 +669,8 @@ class WebPlayer {
     this.ptzMovement = "relative";
     this.restAPIPromise = null;
     this.isIPCamera = false;
+    this.playerEvents = WebPlayer.PLAYER_EVENTS;
+    this.backupStreamId = null;
   }
   initializeFromUrlParams() {
     var _getUrlParameter;
@@ -701,15 +718,16 @@ class WebPlayer {
     this.restJwt = getUrlParameter_1("restJwt", this.window.location.search) || this.restJwt;
     this.ptzValueStep = getUrlParameter_1("ptzValueStep", this.window.location.search) || this.ptzValueStep;
     this.ptzMovement = getUrlParameter_1("ptzMovement", this.window.location.search) || this.ptzMovement;
+    this.backupStreamId = getUrlParameter_1("backupStreamId", this.window.location.search) || this.backupStreamId;
   }
   loadWebRTCComponents() {
     if (this.playOrder.includes("webrtc")) {
-      return import('./videojs-webrtc-plugin-f56e1f9e.js').then(css => {
+      return import('./videojs-webrtc-plugin-7e293bd2.js').then(css => {
         Logger_1.info("videojs-webrtc-plugin.css is loaded");
         var styleElement = this.dom.createElement('style');
         styleElement.textContent = css.default.toString(); // Assuming css module exports a string
         this.dom.head.appendChild(styleElement);
-        return import('./videojs-webrtc-plugin.es-a1f9d342.js').then(videojsWebrtcPluginLocal => {
+        return import('./videojs-webrtc-plugin.es-0f1490f6.js').then(videojsWebrtcPluginLocal => {
           Logger_1.info("videojs-webrtc-plugin is loaded");
         });
       });
@@ -849,26 +867,12 @@ class WebPlayer {
           limitRenditionByPlayerDimensions: false
         }
       },
-      controls: true,
+      controls: this.controls,
       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);
-      }
-      if (this.playerListener != null) {
-        this.playerListener("error", e);
-      }
-    });
 
     //webrtc specific events
     if (extension == "webrtc") {
@@ -890,7 +894,7 @@ class WebPlayer {
           * 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.playIfExists("hls", this.activeStreamId);
         }
         if (this.playerListener != null) {
           this.playerListener("webrtc-error", errors);
@@ -954,72 +958,7 @@ class WebPlayer {
     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");
-      }
-      if (this.restJwt) {
-        this.isIpCameraBroadcast();
-      } else if (this.isIPCamera) {
-        this.injectPtzElements();
-      }
-    });
-    this.videojsPlayer.on("playing", () => {
-      if (this.playerListener != null) {
-        this.playerListener("playing");
-      }
-    });
-    this.videojsPlayer.on("timeupdate", () => {
-      if (this.playerListener != null) {
-        this.playerListener("timeupdate");
-      }
-    });
-    this.videojsPlayer.on("pause", () => {
-      if (this.playerListener != null) {
-        this.playerListener("pause");
-      }
-    });
+    this.listenPlayerEvents();
     this.iceConnected = false;
     this.videojsPlayer.src({
       src: streamUrl,
@@ -1043,6 +982,109 @@ class WebPlayer {
       });
     }
   }
+  listenPlayerEvents() {
+    this.playerEvents.forEach(event => {
+      this.videojsPlayer.on(event, eventData => {
+        switch (event) {
+          case 'play':
+            this.setPlayerVisible(true);
+            if (this.playerListener != null) {
+              this.playerListener("play");
+            }
+            if (this.restJwt) {
+              this.isIpCameraBroadcast();
+            } else if (this.isIPCamera) {
+              this.injectPtzElements();
+            }
+            break;
+          case '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], this.activeStreamId);
+              } 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], this.activeStreamId);
+                  }, 10000);
+                } else {
+                  this.playIfExists(this.playOrder[0], this.activeStreamId);
+                }
+                //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(event);
+            }
+            break;
+          case 'timeupdate':
+            if (this.playerListener != null) {
+              this.playerListener(event, eventData, {
+                currentTime: this.videojsPlayer.currentTime()
+              });
+            }
+            break;
+          case 'progress':
+            if (this.playerListener != null) {
+              this.playerListener(event, eventData, {
+                bufferedPercent: this.videojsPlayer.bufferedPercent()
+              });
+            }
+            break;
+          case 'volumechange':
+            if (this.playerListener != null) {
+              this.playerListener(event, eventData, {
+                volume: this.videojsPlayer.volume(),
+                muted: this.videojsPlayer.muted()
+              });
+            }
+            break;
+          case 'ratechange':
+            if (this.playerListener != null) {
+              this.playerListener(event, eventData, {
+                playbackRate: this.videojsPlayer.playbackRate()
+              });
+            }
+            break;
+          case 'error':
+            Logger_1.warn("There is an error in playback: ", eventData);
+            // 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);
+            }
+            if (this.playerListener != null) {
+              this.playerListener("error", eventData);
+            }
+            break;
+          default:
+            if (this.playerListener != null) {
+              this.playerListener(event, eventData);
+            }
+        }
+      });
+    });
+  }
   listenForID3MetaData() {
     this.videojsPlayer.textTracks().on('addtrack', e => {
       var metadataTrack = Array.from(this.videojsPlayer.textTracks()).find(t => t.label === 'Timed Metadata');
@@ -1135,15 +1177,26 @@ class WebPlayer {
       this.destroyDashPlayer();
       this.destroyVideoJSPlayer();
       this.setPlayerVisible(false);
-      var index = this.playOrder.indexOf(this.currentPlayType);
-      if (index == -1 || index == this.playOrder.length - 1) {
-        index = 0;
+
+      //before changing play type, let's check if there is any backup stream
+      var playTypeIndex = this.playOrder.indexOf(this.currentPlayType);
+      if (this.activeStreamId == this.streamId && this.backupStreamId != null) {
+        //update active stream id to backup stream id
+        this.activeStreamId = this.backupStreamId;
+        //don't update playTypeIndex because we're trying backup stream with the same play type
       } else {
-        index++;
+        //reset the activeStreamId back to streamId
+        this.activeStreamId = this.streamId;
+        //update the playTypeIndex to try next tech
+        if (playTypeIndex == -1 || playTypeIndex == this.playOrder.length - 1) {
+          playTypeIndex = 0;
+        } else {
+          playTypeIndex++;
+        }
       }
       this.tryNextTechTimer = setTimeout(() => {
         this.tryNextTechTimer = -1;
-        this.playIfExists(this.playOrder[index]);
+        this.playIfExists(this.playOrder[playTypeIndex], this.activeStreamId);
       }, 3000);
     } else {
       Logger_1.debug("tryNextTech is already scheduled no need to schedule again");
@@ -1211,10 +1264,10 @@ class WebPlayer {
       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]);
+          this.playIfExists(this.playOrder[0], this.activeStreamId);
         }, 10000);
       } else {
-        this.playIfExists(this.playOrder[0]);
+        this.playIfExists(this.playOrder[0], this.activeStreamId);
       }
       if (this.playerListener != null) {
         this.playerListener("ended");
@@ -1301,7 +1354,7 @@ class WebPlayer {
    * play the stream with the given tech
    * @param {string} tech
    */
-  playIfExists(tech) {
+  playIfExists(tech, streamIdToPlay) {
     var _this = this;
     return _asyncToGenerator(function* () {
       _this.currentPlayType = tech;
@@ -1309,70 +1362,73 @@ class WebPlayer {
       _this.destroyDashPlayer();
       _this.setPlayerVisible(false);
       _this.containerElement.innerHTML = _this.videoHTMLContent;
-      Logger_1.warn("Try to play the stream " + _this.streamId + " with " + _this.currentPlayType);
+      Logger_1.warn("Try to play the stream " + streamIdToPlay + " 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 => {
+          return _this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay, 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");
+            Logger_1.warn("HLS stream resource not available for stream:" + streamIdToPlay + " error is " + error + ". Try next play tech");
             _this.tryNextTech();
           });
         case "ll-hls":
-          return _this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER + "/" + WebPlayer.LL_HLS_FOLDER, _this.streamId, WebPlayer.HLS_EXTENSION).then(streamPath => {
+          return _this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER + "/" + WebPlayer.LL_HLS_FOLDER, streamIdToPlay, WebPlayer.HLS_EXTENSION).then(streamPath => {
             _this.playWithVideoJS(streamPath, WebPlayer.HLS_EXTENSION);
             Logger_1.warn("incoming stream path: " + streamPath);
           }).catch(error => {
-            Logger_1.warn("LL-HLS stream resource not available for stream:" + _this.streamId + " error is " + error + ". Try next play tech");
+            Logger_1.warn("LL-HLS stream resource not available for stream:" + streamIdToPlay + " 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 => {
+          return _this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay + "/" + streamIdToPlay, 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");
+            Logger_1.warn("DASH stream resource not available for stream:" + streamIdToPlay + " error is " + error + ". Try next play tech");
             _this.tryNextTech();
           });
         case "webrtc":
-          return _this.playWithVideoJS(_this.addSecurityParams(_this.websocketURL), WebPlayer.WEBRTC_EXTENSION);
+          return _this.playWithVideoJS(_this.addSecurityParams(_this.getWebsocketURLForStream(streamIdToPlay)), 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 lastIndexOfDot = streamIdToPlay.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);
+            extension = streamIdToPlay.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 => {
+          return _this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay, _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);
+            Logger_1.warn("VOD stream resource not available for stream:" + streamIdToPlay + " 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.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay, _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);
+                Logger_1.warn("VOD stream resource not available for stream:" + streamIdToPlay + " and play type error is " + error);
               });
             }
           });
       }
     })();
   }
+  getWebsocketURLForStream(streamIdToPlay) {
+    return this.websocketBaseURL + streamIdToPlay + ".webrtc";
+  }
 
   /**
    *
@@ -1396,10 +1452,12 @@ class WebPlayer {
    * play the stream with videojs player or dash player
    */
   play() {
-    if (this.streamId.startsWith(WebPlayer.STREAMS_FOLDER)) {
+    //if there is a request to play, try original stream first
+    this.activeStreamId = this.streamId;
+    if (this.activeStreamId.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);
+      var lastIndexOfDot = this.activeStreamId.lastIndexOf(".");
+      var extension = this.activeStreamId.substring(lastIndexOfDot + 1);
       this.playOrder = ["vod"];
       this.currentPlayType = this.playOrder[0];
       if (!this.httpBaseURL.endsWith("/")) {
@@ -1407,12 +1465,12 @@ class WebPlayer {
       }
       this.containerElement.innerHTML = this.videoHTMLContent;
       if (extension == WebPlayer.DASH_EXTENSION) {
-        this.playViaDash(this.httpBaseURL + this.addSecurityParams(this.streamId), extension);
+        this.playViaDash(this.httpBaseURL + this.addSecurityParams(this.activeStreamId), extension);
       } else {
-        this.playWithVideoJS(this.httpBaseURL + this.addSecurityParams(this.streamId), extension);
+        this.playWithVideoJS(this.httpBaseURL + this.addSecurityParams(this.activeStreamId), extension);
       }
     } else {
-      this.playIfExists(this.playOrder[0]);
+      this.playIfExists(this.playOrder[0], this.activeStreamId);
     }
   }
 
@@ -1476,7 +1534,7 @@ class WebPlayer {
     return false;
   }
   injectPtzElements() {
-    var ptzControlsHtmlContent = "\n        <style>\n          .ptz-camera-container {\n            display: none;\n            position: absolute;\n            flex-direction: row;\n            align-items: center;\n            bottom: 30px;\n            right: 10px;\n            z-index:999;\n          }\n          .direction-arrow-container {\n            display: flex;\n            width: 200px;\n            height: 200px;\n            position: relative;\n          }\n         \n        </style>\n        <div id=\"ptz-camera-container\" class=\"ptz-camera-container\">\n          \n            <div style=\"display: flex; flex-direction: column;\">\n             <div style=\"margin-bottom:5px\">\n                <span id=\"zoom-out-button\" style=\"color: #bc1b22; font-size: 50px; font-weight: bold; user-select: none; cursor: pointer; margin-right: 5px;\">-</span>\n                <span id=\"zoom-in-button\" style=\"color: #bc1b22; font-size: 50px; font-weight: bold; cursor: pointer; margin-left: 5px; user-select: none;\">+</span>\n             </div>\n              <div id=\"direction-arrow-container\" class=\"direction-arrow-container\">\n                <img id=\"up-button\" style=\"position: absolute; width: 50px; cursor: pointer; height: 50px; left: 50%; transform: translateX(-50%);\" src=\"" + img + "\"/>\n             \n                <img id=\"left-button\" style=\"position: absolute; left: 0px; width: 50px; height: 50px; cursor: pointer; top: 50%; transform: translateY(-50%) rotate(-90deg);\" src=\"" + img + "\"/>\n                <img id=\"right-button\" style=\"position: absolute; right:0px; top: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateY(-50%) rotate(90deg);\" src=\"" + img + "\"/>\n                <img id=\"down-button\" style=\"position: absolute; bottom:0px;left: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateX(-50%) rotate(180deg);\" src=\"" + img + "\"/>\n               \n            </div>\n           \n           \n            </div>\n          </div>\n        </div>\n        ";
+    var ptzControlsHtmlContent = "\n        <style>\n          .ptz-camera-container {\n            display: none;\n            position: absolute;\n            flex-direction: row;\n            align-items: center;\n            bottom: 30px;\n            right: 10px;\n            z-index:999;\n          }\n          .direction-arrow-container {\n            display: flex;\n            width: 200px;\n            height: 200px;\n            position: relative;\n          }\n         \n        </style>\n        <div id=\"ptz-camera-container\" class=\"ptz-camera-container\">\n          \n            <div style=\"display: flex; flex-direction: column;\">\n             <div style=\"margin-bottom:5px\">\n                <span id=\"zoom-out-button\" style=\"color: #bc1b22; font-size: 50px; font-weight: bold; user-select: none; cursor: pointer; margin-right: 5px;\">-</span>\n                <span id=\"zoom-in-button\" style=\"color: #bc1b22; font-size: 50px; font-weight: bold; cursor: pointer; margin-left: 5px; user-select: none;\">+</span>\n             </div>\n              <div id=\"direction-arrow-container\" class=\"direction-arrow-container\">\n                <img id=\"up-button\" style=\"position: absolute; width: 50px; cursor: pointer; height: 50px; left: 50%; transform: translateX(-50%);\" src=\"" + img.src + "\"/>\n             \n                <img id=\"left-button\" style=\"position: absolute; left: 0px; width: 50px; height: 50px; cursor: pointer; top: 50%; transform: translateY(-50%) rotate(-90deg);\" src=\"" + img.src + "\"/>\n                <img id=\"right-button\" style=\"position: absolute; right:0px; top: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateY(-50%) rotate(90deg);\" src=\"" + img.src + "\"/>\n                <img id=\"down-button\" style=\"position: absolute; bottom:0px;left: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateX(-50%) rotate(180deg);\" src=\"" + img.src + "\"/>\n               \n            </div>\n           \n           \n            </div>\n          </div>\n        </div>\n        ";
     var ptzCameraContainer = document.getElementById("ptz-camera-container");
     if (ptzCameraContainer) {
       Logger_1.info("PTZ controls are already injected");
@@ -1603,6 +1661,7 @@ class WebPlayer {
     }
   }
 }
+_defineProperty(WebPlayer, "PLAYER_EVENTS", ['abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'enterpictureinpicture', 'leavepictureinpicture', 'fullscreenchange', 'resize', 'audioonlymodechange', 'audiopostermodechange', 'controlsdisabled', 'controlsenabled', 'debugon', 'debugoff', 'disablepictureinpicturechanged', 'dispose', 'enterFullWindow', 'error', 'exitFullWindow', 'firstplay', 'fullscreenerror', 'languagechange', 'loadedmetadata', 'loadstart', 'playerreset', 'playerresize', 'posterchange', 'ready', 'textdata', 'useractive', 'userinactive', 'usingcustomcontrols', 'usingnativecontrols']);
 _defineProperty(WebPlayer, "DEFAULT_PLAY_ORDER", ["webrtc", "hls"]);
 _defineProperty(WebPlayer, "DEFAULT_PLAY_TYPE", ["mp4", "webm"]);
 _defineProperty(WebPlayer, "HLS_EXTENSION", "m3u8");

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export declare class WebPlayer {
+    static PLAYER_EVENTS: string[];
     static DEFAULT_PLAY_ORDER: string[];
     static DEFAULT_PLAY_TYPE: string[];
     static HLS_EXTENSION: string;
@@ -63,6 +64,10 @@ export declare class WebPlayer {
      * It will be taken from url parameter "mute".
      */
     mute: boolean;
+    /**
+     * controls: Toggles the visibility of player controls.
+     */
+    controls: boolean;
     /**
      * Force the Player to play with audio Auto Play might not work.
      */
@@ -157,10 +162,19 @@ export declare class WebPlayer {
      * Is IP Camera
      */
     isIPCamera: any;
+    /**
+     * Stream id of backup stream.
+     */
+    backupStreamId: any;
+    /**
+     * activeStreamId: is the stream id that is being played currently
+     * It can be streamID or backupStreamId
+     */
+    activeStreamId: never;
     containerElementInitialDisplay: any;
     placeHolderElementInitialDisplay: any;
     httpBaseURL: string;
-    websocketURL: any;
+    websocketBaseURL: any;
     dom: any;
     isWindow(configOrWindow: any): any;
     initialize(): Promise<any>;
@@ -168,6 +182,7 @@ export declare class WebPlayer {
     dashjsLoaded: boolean | undefined;
     setDefaults(): void;
     videojsLoaded: boolean | undefined;
+    playerEvents: string[] | undefined;
     initializeFromUrlParams(): void;
     loadWebRTCComponents(): Promise<void>;
     /**
@@ -191,6 +206,7 @@ export declare class WebPlayer {
      * @returns
      */
     playWithVideoJS(streamUrl: any, extension: any): void;
+    listenPlayerEvents(): void;
     listenForID3MetaData(): void;
     makeVideoJSVisibleWhenReady(): void;
     /**
@@ -230,7 +246,8 @@ export declare class WebPlayer {
       * play the stream with the given tech
       * @param {string} tech
       */
-     playIfExists(tech: string): Promise<void>;
+     playIfExists(tech: string, streamIdToPlay: any): Promise<void>;
+     getWebsocketURLForStream(streamIdToPlay: any): string;
      /**
       *
       * @returns {String} query string for security

package/dist/{videojs-webrtc-plugin-77a9860b.js → videojs-webrtc-plugin-5dd8808d.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-var videojsWebrtcPlugin = "/*! @name @antmedia/videojs-webrtc-plugin @version 1.3.1 @license MIT */\n.vjs-custom-spinner{position:absolute;top:50%;transform:translateY(-50%) translateX(-50%);left:50%;width:80px;height:80px}.vjs-custom-spinner:after{content:\" \";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:6px solid #fff;border-color:#fff transparent;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}";
+var videojsWebrtcPlugin = "/*! @name @antmedia/videojs-webrtc-plugin @version 1.3.2 @license MIT */\n.vjs-custom-spinner{position:absolute;top:50%;transform:translateY(-50%) translateX(-50%);left:50%;width:80px;height:80px}.vjs-custom-spinner:after{content:\" \";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:6px solid #fff;border-color:#fff transparent;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}";
 
 exports.default = videojsWebrtcPlugin;

package/dist/{videojs-webrtc-plugin.es-e643c42a.js → videojs-webrtc-plugin.es-812e1a77.js}

@@ -3,7 +3,7 @@
 var video_es = require('./video.es-474303e7.js');
 require('./_commonjsHelpers-ed042b00.js');
 
-/*! @name @antmedia/videojs-webrtc-plugin @version 1.3.1 @license MIT */
+/*! @name @antmedia/videojs-webrtc-plugin @version 1.3.2 @license MIT */
 const ANT_CALLBACKS = {
   INITIALIZED: 'initialized',
   PLAY_STARTED: 'play_started',
@@ -7579,7 +7579,11 @@ class WebRTCHandler {
   leaveStreamHandler() {
     // reset stream resolutions in dropdown
     this.player.resolutions = [];
-    this.player.controlBar.getChild('ResolutionMenuButton').update();
+    // eslint-disable-next-line newline-after-var
+    const resolutionButton = this.player.controlBar.getChild('ResolutionMenuButton');
+    if (resolutionButton) {
+      resolutionButton.update();
+    }
   }
   /**
    * stream information handler.