@antmedia/web_player 2.11.2 → 2.11.11

package/dist/web_player.js

@@ -415,6 +415,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.
      */
@@ -509,6 +513,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";
@@ -521,6 +534,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();
@@ -554,6 +568,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 = "/";
@@ -572,17 +588,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;
@@ -640,7 +655,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";
@@ -656,6 +671,8 @@ class WebPlayer {
     this.ptzMovement = "relative";
     this.restAPIPromise = null;
     this.isIPCamera = false;
+    this.playerEvents = WebPlayer.PLAYER_EVENTS;
+    this.backupStreamId = null;
   }
   initializeFromUrlParams() {
     var _getUrlParameter;
@@ -703,15 +720,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 Promise.resolve().then(function () { return require('./videojs-webrtc-plugin-77a9860b.js'); }).then(css => {
+      return Promise.resolve().then(function () { return require('./videojs-webrtc-plugin-5dd8808d.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 Promise.resolve().then(function () { return require('./videojs-webrtc-plugin.es-ee6d0333.js'); }).then(videojsWebrtcPluginLocal => {
+        return Promise.resolve().then(function () { return require('./videojs-webrtc-plugin.es-812e1a77.js'); }).then(videojsWebrtcPluginLocal => {
           Logger_1.info("videojs-webrtc-plugin is loaded");
         });
       });
@@ -732,12 +750,12 @@ class WebPlayer {
           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-df9af03d.js'); });
+          return Promise.resolve().then(function () { return require('./video.es-474303e7.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('./plugin-bec9dc4a.js'); });
+          return Promise.resolve().then(function () { return require('./plugin-1270024e.js'); });
         }).then(() => {
           return this.loadWebRTCComponents();
         });
@@ -851,26 +869,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") {
@@ -892,7 +896,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);
@@ -956,72 +960,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,
@@ -1045,6 +984,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');
@@ -1137,15 +1179,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");
@@ -1213,10 +1266,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");
@@ -1303,7 +1356,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;
@@ -1311,70 +1364,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";
+  }
 
   /**
    *
@@ -1398,10 +1454,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("/")) {
@@ -1409,12 +1467,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);
     }
   }
 
@@ -1478,7 +1536,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");
@@ -1605,6 +1663,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antmedia/web_player",
-  "version": "2.11.2",
+  "version": "2.11.11",
   "description": "Ant Media Server Player that can play WebRTC, HLS, DASH",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
@@ -29,7 +29,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@antmedia/videojs-webrtc-plugin": "^1.3.1",
+    "@antmedia/videojs-webrtc-plugin": "^1.3.2",
     "@antmedia/webrtc_adaptor": "^2.11.3",
     "@rollup/plugin-json": "6.1.0",
     "aframe": "1.5.0",