@antmedia/web_player 2.11.2 → 2.11.11

package/.github/workflows/publish-release.yml

@@ -10,23 +10,40 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      
       - uses: actions/setup-node@v3
         with:
           node-version: '16.x'
-           # Setup .npmrc file to publish to npm
           registry-url: 'https://registry.npmjs.org'
+      
       - uses: actions/setup-java@v3
         with:
           java-version: '11'
           distribution: 'adopt'
+      
       - name: Get the version
         id: get_version
         run: echo "VERSION=$(echo ${GITHUB_REF##*/} | cut -d v -f 2)" >> $GITHUB_OUTPUT
+      
       - run: npm install
+      
       - run: npm run compile
+      
       - run: npm test
-      - run: npm version ${{steps.get_version.outputs.VERSION}} --no-git-tag-version
+      
       - run: npm publish
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}]
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      
+      - name: Update Embedded Player
+        if: success()
+        run: |
+          curl -L \
+          -X POST \
+          -H "Accept: application/vnd.github.v3+json" \
+          -H "Authorization: Bearer ${{ secrets.REPO_COMMUNICATION }}" \
+          https://api.github.com/repos/ant-media/StreamApp/actions/workflows/update-embedded-player.yml/dispatches \
+          -d '{"ref":"master"}'
+
+
 

package/.github/workflows/publish-snapshot.yml

@@ -23,7 +23,7 @@ jobs:
       - run: npm run compile
       - run: npm test
       #Fix this versioning for the snapshots
-      - run: npm version 2.12.0-SNAPSHOT"-`date +"%Y-%b-%d-%I-%M"`"  --no-git-tag-version
+      - run: npm version 3.0.0-SNAPSHOT"-`date +"%Y-%b-%d-%I-%M"`"  --no-git-tag-version
       - run: npm publish --tag SNAPSHOT
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/dist/browser/web_player.js

@@ -125,6 +125,10 @@
        * 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.
        */
@@ -219,6 +223,15 @@
        * 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";
@@ -231,6 +244,7 @@
       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();
@@ -264,6 +278,8 @@
         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 = "/";
@@ -282,17 +298,16 @@
         }
         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;
@@ -350,7 +365,7 @@
       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";
@@ -366,6 +381,8 @@
       this.ptzMovement = "relative";
       this.restAPIPromise = null;
       this.isIPCamera = false;
+      this.playerEvents = WebPlayer.PLAYER_EVENTS;
+      this.backupStreamId = null;
     }
     initializeFromUrlParams() {
       var _getUrlParameter;
@@ -413,6 +430,7 @@
       this.restJwt = fetch_stream.getUrlParameter("restJwt", this.window.location.search) || this.restJwt;
       this.ptzValueStep = fetch_stream.getUrlParameter("ptzValueStep", this.window.location.search) || this.ptzValueStep;
       this.ptzMovement = fetch_stream.getUrlParameter("ptzMovement", this.window.location.search) || this.ptzMovement;
+      this.backupStreamId = fetch_stream.getUrlParameter("backupStreamId", this.window.location.search) || this.backupStreamId;
     }
     loadWebRTCComponents() {
       if (this.playOrder.includes("webrtc")) {
@@ -561,26 +579,12 @@
             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 => {
-        loglevel_min.Logger.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") {
@@ -602,7 +606,7 @@
             * If getting codec incompatible or remote description error, it will redirect HLS player.
             */
             loglevel_min.Logger.warn("notSetRemoteDescription error. Redirecting to HLS player.");
-            this.playIfExists("hls");
+            this.playIfExists("hls", this.activeStreamId);
           }
           if (this.playerListener != null) {
             this.playerListener("webrtc-error", errors);
@@ -666,72 +670,7 @@
       if (extension == "mp4" || extension == "webm" || extension == "m3u8") {
         this.makeVideoJSVisibleWhenReady();
       }
-      this.videojsPlayer.on('ended', () => {
-        //reinit to play after it ends
-        loglevel_min.Logger.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,
@@ -755,6 +694,109 @@
         });
       }
     }
+    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
+              loglevel_min.Logger.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':
+              loglevel_min.Logger.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');
@@ -847,15 +889,26 @@
         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 {
         loglevel_min.Logger.debug("tryNextTech is already scheduled no need to schedule again");
@@ -923,10 +976,10 @@
         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");
@@ -1013,7 +1066,7 @@
      * play the stream with the given tech
      * @param {string} tech
      */
-    playIfExists(tech) {
+    playIfExists(tech, streamIdToPlay) {
       var _this = this;
       return _asyncToGenerator(function* () {
         _this.currentPlayType = tech;
@@ -1021,70 +1074,73 @@
         _this.destroyDashPlayer();
         _this.setPlayerVisible(false);
         _this.containerElement.innerHTML = _this.videoHTMLContent;
-        loglevel_min.Logger.warn("Try to play the stream " + _this.streamId + " with " + _this.currentPlayType);
+        loglevel_min.Logger.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);
               loglevel_min.Logger.warn("incoming stream path: " + streamPath);
             }).catch(error => {
-              loglevel_min.Logger.warn("HLS stream resource not available for stream:" + _this.streamId + " error is " + error + ". Try next play tech");
+              loglevel_min.Logger.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);
               loglevel_min.Logger.warn("incoming stream path: " + streamPath);
             }).catch(error => {
-              loglevel_min.Logger.warn("LL-HLS stream resource not available for stream:" + _this.streamId + " error is " + error + ". Try next play tech");
+              loglevel_min.Logger.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 => {
-              loglevel_min.Logger.warn("DASH stream resource not available for stream:" + _this.streamId + " error is " + error + ". Try next play tech");
+              loglevel_min.Logger.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 => {
-              loglevel_min.Logger.warn("VOD stream resource not available for stream:" + _this.streamId + " and play type " + _this.playType[0] + ". Error is " + error);
+              loglevel_min.Logger.warn("VOD stream resource not available for stream:" + streamIdToPlay + " and play type " + _this.playType[0] + ". Error is " + error);
               if (_this.playType.length > 1) {
                 loglevel_min.Logger.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 => {
-                  loglevel_min.Logger.warn("VOD stream resource not available for stream:" + _this.streamId + " and play type error is " + error);
+                  loglevel_min.Logger.warn("VOD stream resource not available for stream:" + streamIdToPlay + " and play type error is " + error);
                 });
               }
             });
         }
       })();
     }
+    getWebsocketURLForStream(streamIdToPlay) {
+      return this.websocketBaseURL + streamIdToPlay + ".webrtc";
+    }
 
     /**
      *
@@ -1108,10 +1164,12 @@
      * 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("/")) {
@@ -1119,12 +1177,12 @@
         }
         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);
       }
     }
 
@@ -1188,7 +1246,7 @@
       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) {
         loglevel_min.Logger.info("PTZ controls are already injected");
@@ -1315,6 +1373,7 @@
       }
     }
   }
+  _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/es/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/es/{plugin-50e1316e.js → plugin-06260ef3.js}

@@ -1,4 +1,4 @@
-import videojs from './video.es-be70c095.js';
+import { v as videojs } from './video.es-0951ae41.js';
 import './_commonjsHelpers-7d1333e8.js';
 
 var version = "1.1.1";