ll-hls support

ant-media · Aug 30, 2024 · e25c0ca · e25c0ca
1 parent 23b6988
commit e25c0ca
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antmedia/web_player",
-  "version": "2.9.1-SNAPSHOT",
+  "version": "2.12.0",
   "description": "Ant Media Server Player that can play WebRTC, HLS, DASH",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
@@ -29,14 +29,15 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@antmedia/videojs-webrtc-plugin": "^1.2.2",
+    "@antmedia/videojs-webrtc-plugin": "^1.2.3",
     "@antmedia/webrtc_adaptor": "2.9.1-SNAPSHOT-2024-May-17-12-21",
     "aframe": "1.5.0",
     "dashjs": "^4.7.4",
     "rimraf": "^5.0.5",
-    "video.js": "^7.18.0",
-    "videojs-contrib-quality-levels": "^2.2.1",
-    "videojs-hls-quality-selector": "^1.1.4"
+    "video.js": "^8.17.3",
+    "videojs-contrib-quality-levels": "^4.1.0",
+    "@types/videojs-contrib-quality-levels": "^2.0.4",
+    "videojs-hls-quality-selector": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.5",

diff --git a/src/web_player.js b/src/web_player.js
@@ -29,6 +29,11 @@ export class WebPlayer {
 	*/
 	static STREAMS_FOLDER = "streams";
 
+    /**
+	* lowLatencyHlsFolder: ll-hls folder. Optional. Default value is "ll-hls"
+	*/
+    static LL_HLS_FOLDER = "ll-hls";
+
 
     /**
      * Video HTML content. It's by default STATIC_VIDEO_HTML
@@ -42,7 +47,7 @@ export class WebPlayer {
 
     /**
     *  "playOrder": the order which technologies is used in playing. Optional. Default value is "webrtc,hls".
-    *	possible values are "hls,webrtc","webrtc","hls","vod","dash"
+    *	possible values are "hls,webrtc","webrtc","hls","ll-hls","vod","dash",
     *   It will be taken from url parameter "playOrder".
     */
     playOrder;
@@ -226,6 +231,8 @@ export class WebPlayer {
 		*/
 		WebPlayer.STREAMS_FOLDER = "streams";
 
+        WebPlayer.LL_HLS_Folder = "ll-hls";
+
 		WebPlayer.VIDEO_PLAYER_ID = "video-player";
 
 		// Initialize default values
@@ -478,7 +485,7 @@ export class WebPlayer {
      * load scripts dynamically
      */
     loadVideoJSComponents() {
-        if (this.playOrder.includes("hls") || this.playOrder.includes("vod") || this.playOrder.includes("webrtc")) {
+        if (this.playOrder.includes("hls") || this.playOrder.includes("ll-hls") || this.playOrder.includes("vod") || this.playOrder.includes("webrtc")) {
             //it means we're going to use videojs
             //load videojs css
 			if (!this.videojsLoaded) 
@@ -696,7 +703,7 @@ export class WebPlayer {
 
 		//hls specific calls
 		if (extension == "m3u8") {
-	        videojs.Vhs.xhr.beforeRequest = (options) => {
+	        videojs.Vhs.xhr.onRequest = (options) => {
                 const queryParams = [];
 
                 if (!options.uri.includes("subscriberId") && this.subscriberId != null) {
@@ -893,11 +900,17 @@ export class WebPlayer {
         if (!streamId.startsWith(streamsfolder)) {
             streamPath += streamsfolder + "/";
         }
-        streamPath += streamId;
+        var llHls = streamsfolder.includes(WebPlayer.LL_HLS_FOLDER);
 
-        if (extension != null && extension != "") {
-            //if there is extension, add it and try if _adaptive exists
-            streamPath += "_adaptive" + "." + extension;
+        if (llHls) {
+            // LL-HLS path
+            streamPath += `${streamId}/${streamId}__master`;
+        } else {
+            streamPath += streamId;
+        }
+
+        if (extension) {
+            streamPath += `_adaptive.${extension}`;
         }
 
         streamPath = this.addSecurityParams(streamPath);
@@ -910,8 +923,14 @@ export class WebPlayer {
                         resolve(streamPath);
                     });
                 } else {
-                    //adaptive not exists, try mpd or m3u8 exists.
-                    streamPath = this.httpBaseURL + streamsfolder + "/" + streamId + "." + extension;
+
+                    if (llHls) {
+                        streamPath = this.httpBaseURL + streamsfolder + "/" + streamId + "/"+  streamId + "__master." + extension;
+
+                    } else {
+                        streamPath = this.httpBaseURL + streamsfolder + "/" + streamId + "." + extension;
+                    }
+
                     streamPath = this.addSecurityParams(streamPath);
 
                     return fetch(streamPath, { method: 'HEAD' })
@@ -1169,6 +1188,17 @@ export class WebPlayer {
                     Logger.warn("HLS stream resource not available for stream:" + this.streamId + " 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) => {
+
+                    this.playWithVideoJS(streamPath, WebPlayer.HLS_EXTENSION);
+                    Logger.warn("incoming stream path: " + streamPath);
+
+                }).catch((error) => {
+
+                    Logger.warn("LL-HLS stream resource not available for stream:" + this.streamId + " error is " + error + ". Try next play tech");
+                    this.tryNextTech();
+                });
             case "dash":
                 return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId + "/" + this.streamId, WebPlayer.DASH_EXTENSION).then((streamPath) => {
                     this.playViaDash(streamPath);