@reactoo/watchtogether-sdk-js 2.6.95 → 2.6.97

package/example/index.html

@@ -218,13 +218,41 @@
             })
             .then(r => Instance.room.createSession({constructId, roomId:r.roomId, pinHash: r.pinHash, role:'participant', options: {
                     simulcast: true,
-                    simulcastMode: {default: 'controlled', screen: 'manual'}, // controlled, manual, auto ... key is the device source (default = all)
-                    simulcastDefaultManualSubstream: {default:0, screen: 0},  // 2 lowest quality, 0 highest quality ... key is the device source (default = all)
-                    // those are for videowall (see that 4 fps preview for producer panel)
+                    // controlled, manual, browserControlled ... key is the device source (default = all)
+                    simulcastMode: {
+                        "default": "controlled",
+                        "screen": "manual"
+                    },
+                    // 2 lowest quality, 0 highest quality ... key is the device source (default = all)
+                    simulcastDefaultManualSubstream: {
+                        "screen": 0,
+                        "default": 0
+                    },
+
                     simulcastBitrates: [
-                        { rid: 'l', active: true, maxBitrate: 180000, maxFramerate: 4, scaleResolutionDownBy: 4, priority: "low" },
-                        { rid: 'm', active: true, maxBitrate: 800000, maxFramerate: 30, scaleResolutionDownBy: 3, priority: "low" },
-                        { rid: 'h', active: true, maxBitrate: 1700000, maxFramerate: 30, priority: "low" }
+                        {
+                            "rid": "l",
+                            "active": true,
+                            "maxBitrate": 180000,
+                            "maxFramerate": 20,
+                            "scaleResolutionDownBy": 3.3333333333333335,
+                            "priority": "low"
+                        },
+                        {
+                            "rid": "m",
+                            "active": true,
+                            "maxBitrate": 500000,
+                            "maxFramerate": 25,
+                            "scaleResolutionDownBy": 1.3333333333333335,
+                            "priority": "low"
+                        },
+                        {
+                            "rid": "h",
+                            "active": true,
+                            "maxBitrate": 2000000,
+                            "maxFramerate": 30,
+                            "priority": "low"
+                        }
                     ],
                     //subscriptionRules: {participant: {videoWall: [], watchTogether: []}}
             }}))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.6.95",
+  "version": "2.6.97",
   "description": "Javascript SDK for Reactoo",
   "main": "src/index.js",
   "unpkg": "dist/watchtogether-sdk.min.js",

package/src/modules/wt-room.js

@@ -182,14 +182,14 @@ class RoomSession {
 		this.sessiontype = type;
 		this.initialBitrate = 0;
 		this.simulcast = false;
-		this.simulcastMode = 'controlled'; // controlled, manual, auto
+		this.simulcastMode = 'controlled'; // controlled, manual, browserControlled
 		this.simulcastDefaultManualSubstream = 0; // 0 = maximum quality
 
 		// ordered from low to high
 		this.simulcastBitrates = [
 			{ rid: 'l', active: true, maxBitrate: 180000, maxFramerate: 20, scaleResolutionDownBy: 3.3333333333333335, priority: "low" },
-			{ rid: 'm', active: true, maxBitrate: 800000, maxFramerate: 25, scaleResolutionDownBy: 1.3333333333333333, priority: "low" },
-			{ rid: 'h', active: true, maxBitrate: 1700000, maxFramerate: 30, priority: "low" },
+			{ rid: 'm', active: true, maxBitrate: 500000, maxFramerate: 25, scaleResolutionDownBy: 1.3333333333333335, priority: "low" },
+			{ rid: 'h', active: true, maxBitrate: 2000000, maxFramerate: 30, priority: "low" },
 		];
 		this.recordingFilename = null;
 		this.pluginName = RoomSession.sessionTypes[type];
@@ -209,8 +209,8 @@ class RoomSession {
 		this.isMuted = [];
 		this.isVideoEnabled = false;
 		this.isAudioEnabed = false;
-		this._statsMaxLength = 16;
-		this._upStatsLength = 15;
+		this._statsMaxLength = 31;
+		this._upStatsLength = 30;
 		this._downStatsLength = 5;
 		this._statsTimeoutStopped = true;
 		this._statsTimeoutId = null;
@@ -968,7 +968,7 @@ class RoomSession {
 					stats: {},
 					selectedSubstream: {},
 					initialSimulcastSubstreamBeenSet: {},
-					forcedAutoMode:{},
+					forcedBrowserControlledMode:{},
 				};
 
 				if (handleId === this.handleId) {
@@ -1025,7 +1025,7 @@ class RoomSession {
 					stats: {},
 					selectedSubstream: {},
 					initialSimulcastSubstreamBeenSet: {},
-					forcedAutoMode:{},
+					forcedBrowserControlledMode:{},
 				}
 			};
 			this._participants.push(handle);
@@ -1553,6 +1553,9 @@ class RoomSession {
 		loop()
 	}
 
+	// This method completely ignores temporal layers
+	// We prefer higher fps and lower resolution so if the fps in not in the range of 0.7 of the max fps we go to the next lower resolution
+
 	_enableSubstreamAutoSelect() {
 
 		if(!this.simulcast) {
@@ -1590,7 +1593,7 @@ class RoomSession {
 							? (this.simulcastMode[source] !== undefined ? this.simulcastMode[source] : this.simulcastMode['default'])
 							: this.simulcastMode;
 
-						if((simulcastMode === 'auto' || p.webrtcStuff.forcedAutoMode[mid])) {
+						if((simulcastMode === 'browserControlled' || p.webrtcStuff.forcedBrowserControlledMode[mid])) {
 							// do nothing
 						}
 						
@@ -1600,6 +1603,7 @@ class RoomSession {
 							if(defaultSelectedSubstream !== undefined && defaultSelectedSubstream !== null && defaultSelectedSubstream !== currentSubstream) {
 								this._log('Attempting to force substream quality', defaultSelectedSubstream);
 								this.selectSubStream(p.handleId, defaultSelectedSubstream, undefined, mid, false)
+									.catch((reason) => this._log(`Changing substream for mid: ${mid} failed. Reason: ${reason}`));
 							}
 						}
 
@@ -1623,18 +1627,23 @@ class RoomSession {
 
 							if(directionDecision === -1) {
 								if(currentSubstream < simulcastBitrates.length - 1) {
-									this._log('Attempting to down the quality', currentSubstream + 1);
+									this._log('Attempting to down the quality for mid: ', mid, ' quality:', currentSubstream + 1);
 									this._resetStats(p.handleId, mid);
 									this.selectSubStream(p.handleId, currentSubstream + 1, undefined, mid, false)
+										.catch((reason) => this._log(`Changing substream for mid: ${mid} failed. Reason: ${reason}`));
 								}
 							}
 							else if (directionDecision === 1) {
 								if(currentSubstream > 0) {
-									this._log('Attempting to up the quality', currentSubstream - 1);
+									this._log('Attempting to up the quality for mid: ', mid, ' quality:', currentSubstream - 1);
 									this._resetStats(p.handleId, mid);
 									this.selectSubStream(p.handleId, currentSubstream - 1, undefined, mid, false)
+										.catch((reason) => this._log(`Changing substream for mid: ${mid} failed. Reason: ${reason}`));
 								}
 							}
+							else {
+								this._log('No quality change for mid: ', mid);
+							}
 						}
 					});
 				}
@@ -1722,6 +1731,15 @@ class RoomSession {
 							}
 
 							stats.selectedSubstream = handle.webrtcStuff.selectedSubstream[participantStats.mid];
+							if(handle.webrtcStuff.forcedBrowserControlledMode[participantStats.mid]) {
+								stats.simulcastMode = 'browserControlled';
+							}
+							else {
+								stats.simulcastMode  = typeof this.simulcastMode === 'object'
+									? (this.simulcastMode[participantStats.source] !== undefined ? this.simulcastMode[participantStats.source] : this.simulcastMode['default'])
+									: this.simulcastMode;
+							}
+
 						});
 
 						// pushing stats into handle stats array but keeping only 6 last stats
@@ -2034,6 +2052,23 @@ class RoomSession {
 								track: ev.target,
 								muted: true
 							});
+
+							// questionable hotfix
+							// when a track is muted, we try to switch to lower quality substream
+
+							if(!this.simulcast) {
+								return;
+							}
+
+							const simulcastMode = typeof this.simulcastMode === 'object'
+								? (this.simulcastMode[source] !== undefined ? this.simulcastMode[source] : this.simulcastMode['default'])
+								: this.simulcastMode;
+							const {simulcastBitrates} = handle.webrtcStuff.tracksMap.find(t => t.mid === mid) || {};
+							const currentSubstream = handle.webrtcStuff.selectedSubstream[mid];
+							if(!(simulcastMode === 'browserControlled' || handle.webrtcStuff.forcedBrowserControlledMode[mid]) && ev.target.kind === 'video' && currentSubstream < simulcastBitrates.length - 1) {
+								this.selectSubStream(handle.handleId, currentSubstream + 1, undefined, mid, false)
+									.catch((reason) => this._log(`Changing substream for mid: ${mid} failed. Reason: ${reason}`));
+							}
 						};
 
 						event.track.onunmute = (ev) => {
@@ -2969,7 +3004,7 @@ class RoomSession {
 					if(substream === null) {
 
 						if(manual) {
-							config.forcedAutoMode[mid] = false
+							config.forcedBrowserControlledMode[mid] = false
 						}
 
 						resolve({substream, sender: handleId});
@@ -2977,7 +3012,7 @@ class RoomSession {
 					}
 
 					if(manual) {
-						config.forcedAutoMode[mid] = true
+						config.forcedBrowserControlledMode[mid] = true
 					}
 
 					this.ws.addEventListener('message', parseResponse);
@@ -2986,7 +3021,7 @@ class RoomSession {
 						this._abortController.signal.removeEventListener('abort', abortResponse);
 						this.ws.removeEventListener('message', parseResponse);
 						reject('timeout');
-					}, 5000);
+					}, 10000);
 
 					this.sendMessage(handleId, {
 						"body": {