@reactoo/watchtogether-sdk-js 2.6.50 → 2.6.60

package/example/bulk_join_room/bulk_join_room.html

@@ -189,7 +189,7 @@
 				participantData.session = session;
 				return Promise.all([session, session.connect()])
 			})
-			.then(([session, _]) => session.publishLocal(participantData.canvas.captureStream(), {getStreamIfEmpty: false}))
+			.then(([session, _]) => session.publishLocal(participantData.canvas.captureStream(), 'camera0'))
 			.then(() => document.getElementById('joined-participants-count').value = ++joinedParticipantsCount);
 	}
 

package/example/bulk_join_room/bulk_join_room_2.html

@@ -431,7 +431,7 @@
 						.then(audioStream => {
 							participant.stream = participant.canvas.captureStream();
 							participant.stream.addTrack(audioStream.getAudioTracks()[0]);
-							return session.publishLocal(participant.stream, {getStreamIfEmpty: false});
+							return session.publishLocal(participant.stream, 'camera0');
 						});
 				});
 		});

package/example/index.html

@@ -62,7 +62,7 @@
 
         function createParticipant(data, isRemote = false) {
 
-            console.log('participantData', isRemote, data);
+            console.log('creating participant - participantData', isRemote, data);
 
             this.removeParticipant({id: data.id})
 
@@ -126,7 +126,7 @@
 
         function publishBlank() {
             let sess = Instance.room.getSessionByConstructId(constructId);
-            sess.publishLocal(null)
+            sess.publishLocal(null, 'screen')
         }
 
         function publish(vDeviceId) {
@@ -149,6 +149,14 @@
             Instance.room.getSessionByConstructId(constructId).toggleAudio()
         }
 
+        function setListenIntercomGroups(groups) {
+            Instance.room.getSessionByConstructId(constructId).setListenIntercomGroups(groups)
+        }
+
+        function setTalkIntercomGroups(groups) {
+            Instance.room.getSessionByConstructId(constructId).setTalkIntercomGroups(groups)
+        }
+
         let Instance = WatchTogetherSDK({debug:true, apiUrl: 'https://api.reactoo.com/stefan/swagger.json'})({instanceType:'reactooDemo'});
 
         Instance.auth.$on('login', () => {

package/package.json

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

package/src/modules/wt-room.js

@@ -85,10 +85,6 @@ class RoomSession {
 		return randomString;
 	}
 
-	//TODO: solve
-	// #eventList = ['error', 'kicked', 'addLocalParticipant', ,'addRemoteInstructor','addRemoteParticipant','addRemoteTalkback', 'addRemoteObserver', 'removeRemoteInstructor', 'removeLocalParticipant', 'removeRemoteParticipant', 'removeRemoteTalkback', 'removeRemoteObserver', 'localMuted', 'localHasVideo', 'localHasAudio', 'data', 'iceState', 'connectionState', 'joined', 'joining', 'dataChannel', 'disconnect', 'observerIds', 'talkbackIds', 'instructorId', 'published', 'publishing', 'remoteTrackMuted', 'streamingStatus', 'streaming', 'streamStarting'];
-	//
-
 	static sessionTypes =  {
 		'reactooroom': 'janus.plugin.reactooroom',
 		'streaming': 'janus.plugin.streaming'
@@ -198,19 +194,19 @@ class RoomSession {
 		this.isPublished = false;
 		this.isReclaiming = false;
 		this.isStreaming = false;
-
+		this.isMuted = [];
+		this.isVideoEnabled = false;
+		this.isAudioEnabed = false;
+		this._sendMessageTimout = 5000;
 		this._retries = 0;
 		this._maxRetries = 5;
 		this._keepAliveId = null;
 		this._participants = [];
-		this._talkIntercomGroups = ['all'];
-		this._listenIntercomGroups = ['all'];
+		this._talkIntercomGroups = ['participants'];
+		this._listenIntercomGroups = ['participants'];
 		this._roomType = 'watchparty';
 		this._isDataChannelOpen = false;
 		this._abortController = null;
-		this.isMuted = [];
-		this.isVideoEnabled = false;
-		this.isAudioEnabed = false;
 
 		this.userRoleSubscriptionRules = {
 			...RoomSession.userRoleSubscriptionRules,
@@ -231,6 +227,14 @@ class RoomSession {
 		return this.userRoleSubscriptionRules[localUserRole][(this._roomType || 'watchparty')].indexOf(remoteUserRole) > -1;
 	}
 
+	_intercomSubscribe = (stream) => {
+		if(stream.type === 'data') {
+			return true;
+		}
+		const intercomGroups = JSON.parse(stream.description || "[]")?.intercomGroups || [];
+		return intercomGroups.some(g => this._listenIntercomGroups.indexOf(g) > -1);
+	};
+
 	_getAddParticipantEventName(handleId) {
 
 		let handle = this._getHandle(handleId);
@@ -376,7 +380,7 @@ class RoomSession {
 						this.ws.removeEventListener('message', parseResponse);
 						this._abortController.signal.removeEventListener('abort', abortResponse);
 						reject({type: 'warning', id: 3, message: 'send timeout', data: requestData});
-					}, 5000);
+					}, this._sendMessageTimout);
 					this._abortController.signal.addEventListener('abort', abortResponse);
 					this.ws.send(JSON.stringify(requestData));
 				} else {
@@ -390,7 +394,7 @@ class RoomSession {
 				return Promise.reject(e);
 			}
 			else if(e.id === 29 && retry > 0) {
-				return wait(5000).then(() => this._send(request, ignoreResponse, dontResolveOnAck, retry - 1));
+				return wait(this._sendMessageTimout).then(() => this._send(request, ignoreResponse, dontResolveOnAck, retry - 1));
 			}
 			else if(retry > 0) {
 				return this._send(request, ignoreResponse, dontResolveOnAck, retry - 1);
@@ -499,7 +503,7 @@ class RoomSession {
 		} else if (type === "event") {
 			//none universal
 		} else if (type === 'timeout') {
-			this._log('ws timeout', json);
+			this._log('WebSockets Gateway timeout', json);
 			this.ws.close(3504, "Gateway timeout");
 		} else if (type === 'success' || type === 'error') {
 			// we're capturing those elsewhere
@@ -560,14 +564,14 @@ class RoomSession {
 							this._log('Creating user: ', userId);
 							this._createParticipant(userId, id)
 								.then(handle => {
+									this._updateParticipantsTrackData(handle.handleId, streams);
 									return this.sendMessage(handle.handleId, {
 										body: {
 											"request": "join",
 											"room": this.roomId,
 											"ptype": "subscriber",
 											"private_id": this.privateId,
-											//TODO: check which groups we want to subscribe to
-											streams: streams.filter(s => !s.disabled).map(stream => ({feed: stream.id, mid: stream.mid})),
+											streams: streams.filter(s => !s.disabled && this._intercomSubscribe(s)).map(stream => ({feed: stream.id, mid: stream.mid})),
 											//"feed": id,
 											...(this.webrtcVersion > 1000 ? {id: this.userId} : {}),
 											pin: this.pin
@@ -601,25 +605,17 @@ class RoomSession {
 							let handle = this._getHandle(null, id);
 							if(handle) {
 
-								//TODO: check which groups we want to subscribe to
-								const _sfn = (stream) => {
-									if(stream.type === 'data') {
-										return true;
-									}
-									// if stream.description is not set, we assume it's a data stream, and we shouldn't get here at all
-									const source = stream.description ? JSON.parse(stream.description)?.source : undefined;
-									if(!this.options?.restrictSources?.length) {
-										return true
-									}
-									else if(this.options?.restrictSources?.includes(source)) {
-										return true;
-									}
-									return false;
-								}
+								this._updateParticipantsTrackData(handle.handleId, streams)
+
+								let subscribe = streams
+									.filter(stream => !stream.disabled && this._intercomSubscribe(stream) && !this._isAlreadySubscribed(handle.handleId, stream))
+									.map(s => ({feed: s.id, mid: s.mid}));
+
+								let unsubscribe = streams.filter(stream => stream.disabled || !this._intercomSubscribe(stream))
+									.map(s => ({feed: s.id, mid: s.mid}));
 
-								let subscribe = streams.filter(stream => !stream.disabled && _sfn(stream) && handle.webrtcStuff.tracksMap.filter(t => t.active).findIndex(t => t.mid === stream.mid) === -1).map(s => ({feed: s.id, mid: s.mid}));
-								let unsubscribe = streams.filter(stream => stream.disabled).map(s => ({feed: s.id, mid: s.mid}));
 								this._log('Already subscribed to user: ', userId, 'Update streams', subscribe, unsubscribe);
+
 								if(subscribe.length || unsubscribe.length) {
 									this.sendMessage(handle.handleId, {
 										body: {
@@ -634,14 +630,14 @@ class RoomSession {
 								this._log('Creating user: ', userId, streams);
 								this._createParticipant(userId, id)
 									.then(handle => {
+										this._updateParticipantsTrackData(handle.handleId, streams);
 										return this.sendMessage(handle.handleId, {
 											body: {
 												"request": "join",
 												"room": this.roomId,
 												"ptype": "subscriber",
 												"private_id": this.privateId,
-												//TODO: check which groups we want to subscribe to
-												streams: streams.filter(s => !s.disabled).map(stream => ({feed: stream.id, mid: stream.mid})),
+												streams: streams.filter(s => !s.disabled && this._intercomSubscribe(s)).map(stream => ({feed: stream.id, mid: stream.mid})),
 												...(this.webrtcVersion > 1000 ? {id: this.userId} : {}),
 												pin: this.pin
 											}
@@ -706,8 +702,6 @@ class RoomSession {
 				}
 
 				if (jsep !== undefined && jsep !== null) {
-
-					console.log(msg)
 					if (this.sessiontype === 'reactooroom') {
 						this._webrtcPeer(this.handleId, jsep)
 							.catch(err => {
@@ -752,12 +746,12 @@ class RoomSession {
 
 			if (event === "updated") {
 				this._log('Remote has updated tracks', msg);
-				this._updateParticipantsTrackData(handle.handleId, msg["streams"] || []);
+				this._updateCurrentSubscriptions(handle.handleId, msg["streams"] || []);
 			}
 
 			if (event === "attached") {
 				this._log('Remote have successfully joined Room', msg);
-				this._updateParticipantsTrackData(handle.handleId, msg["streams"] || []);
+				this._updateCurrentSubscriptions(handle.handleId, msg["streams"] || []);
 				this.emit(this._getAddParticipantEventName(handle.handleId), {
 					tid: generateUUID(),
 					id: handle.handleId,
@@ -898,6 +892,7 @@ class RoomSession {
 					stream: null,
 					streamMap: {},
 					tracksMap: [],
+					currentSubscriptions: [],
 					mySdp: null,
 					mediaConstraints: null,
 					pc: null,
@@ -949,6 +944,7 @@ class RoomSession {
 					stream: null,
 					streamMap: {},
 					tracksMap: [],
+					currentSubscriptions: [],
 					mySdp: null,
 					mediaConstraints: null,
 					pc: null,
@@ -965,6 +961,36 @@ class RoomSession {
 		})
 	}
 
+	_isAlreadySubscribed(handleId, stream) {
+		let handle = this._getHandle(handleId);
+		if (!handle) {
+			this.emit('error', {
+				type: 'warning',
+				id: 15,
+				message: 'id non-existent',
+				data: [handleId, 'isAlreadySubscribed']
+			});
+			return;
+		}
+		return handle.webrtcStuff.currentSubscriptions.filter(t => t.active).findIndex(t => t.mid === stream.mid) > -1
+	}
+
+	_updateCurrentSubscriptions(handleId, streams) {
+		this._log('Updating current subscription data', handleId, streams);
+		let handle = this._getHandle(handleId);
+		if (!handle) {
+			this.emit('error', {
+				type: 'warning',
+				id: 15,
+				message: 'id non-existent',
+				data: [handleId, 'updateCurrentSubscriptions']
+			});
+			return;
+		}
+		let config = handle.webrtcStuff;
+		config.currentSubscriptions = structuredClone(streams);
+	}
+
 	_updateParticipantsTrackData(handleId, streams) {
 		this._log('Updating participants track data', handleId, streams);
 		let handle = this._getHandle(handleId);
@@ -978,7 +1004,16 @@ class RoomSession {
 			return;
 		}
 		let config = handle.webrtcStuff;
-		config.tracksMap = structuredClone(streams);
+		config.tracksMap = structuredClone(streams.map(s => ({
+			active: !s.disabled,
+			description: s.description,
+			display: s.display,
+			id: s.id,
+			mid: s.mid,
+			mindex: s.mindex,
+			codec: s.codec,
+			type: s.type,
+		})));
 	}
 
 	_updateRemoteParticipantStreamMap(handleId) {
@@ -1002,9 +1037,7 @@ class RoomSession {
 			if(tItem.active === false) {
 				return;
 			}
-
-			const source = JSON.parse(tItem.feed_description)?.source;
-
+			const source = JSON.parse(tItem.description)?.source;
 			if(!config.streamMap[source]) {
 				config.streamMap[source] = [];
 			}
@@ -1498,12 +1531,18 @@ class RoomSession {
 					if(!event.streams?.[0]?.onremovetrack) {
 						event.streams[0].onremovetrack = (ev) => {
 							this._log('Remote track removed', ev);
+							config.stream?.removeTrack(ev.track);
+
+							// check if handle still exists
+							if(!this._getHandle(handle.handleId)) {
+								return;
+							}
+
 							let transceiver = config.pc?.getTransceivers()?.find(
 								t => t.receiver.track === ev.track);
 
 							let mid = transceiver?.mid || ev.track.id;
 							let source = Object.keys(config.streamMap).find(key => config.streamMap[key].includes(ev.track.id));
-							config.stream?.removeTrack(ev.track);
 							this._updateRemoteParticipantStreamMap(handle.handleId);
 							this.emit(this._getAddParticipantEventName(handle.handleId), {
 								tid: generateUUID(),
@@ -1525,9 +1564,9 @@ class RoomSession {
 					}
 
 					if (event.track) {
+						config.stream?.addTrack(event.track);
 						let mid = event.transceiver ? event.transceiver.mid : event.track.id;
 						let source = Object.keys(config.streamMap).find(key => config.streamMap[key].includes(event.track.id));
-						config.stream?.addTrack(event.track);
 						this._updateRemoteParticipantStreamMap(handle.handleId);
 						this.emit(this._getAddParticipantEventName(handle.handleId), {
 							tid: generateUUID(),
@@ -1551,13 +1590,15 @@ class RoomSession {
 
 						event.track.onended = (ev) => {
 							this._log('Remote track ended');
-
+							config.stream?.removeTrack(ev.target);
+							// check if handle still exists
+							if(!this._getHandle(handle.handleId)) {
+								return;
+							}
 							let transceiver = config.pc?.getTransceivers()?.find(
 								t => t.receiver.track === ev.target);
-
 							let mid = transceiver?.mid || ev.target.id;
 							let source = Object.keys(config.streamMap).find(key => config.streamMap[key].includes(ev.target.id));
-							config.stream?.removeTrack(ev.target);
 							this._updateRemoteParticipantStreamMap(handle.handleId);
 							this.emit(this._getAddParticipantEventName(handle.handleId), {
 								tid: generateUUID(),
@@ -1682,10 +1723,6 @@ class RoomSession {
 				return Promise.resolve(null);
 			}
 
-			if(config.pc.signalingState === 'stable') {
-				//TODO
-			}
-
 			return config.pc.setRemoteDescription(jsep)
 				.then(() => {
 					config.remoteSdp = jsep.sdp;
@@ -2105,7 +2142,7 @@ class RoomSession {
 				videoTransceiver = transceiver;
 			}
 
-				// Reusing existing transceivers
+			// Reusing existing transceivers
 			// TODO: if we start using different codecs for different sources, we need to check for that here
 
 			else if(transceiver.currentDirection === 'inactive' && transceiver.sender?.getParameters()?.codecs?.find(c => c.mimeType.indexOf('audio') > -1) && replaceAudio && !audioTransceiver) {
@@ -2459,7 +2496,13 @@ class RoomSession {
 	}
 
 
-	setTalkIntercomGroups(groups = ['all']) {
+	setTalkIntercomGroups(groups = ['participants']) {
+
+		if(typeof groups !== 'object' || !("length" in groups)) {
+			this._log('setTalkIntercomGroups: groups must be an array');
+			groups = [groups];
+		}
+
 		this._talkIntercomGroups = structuredClone(groups);
 		let handle = this._getHandle(this.handleId);
 		if (!handle) {
@@ -2479,13 +2522,68 @@ class RoomSession {
 		return this.sendMessage(this.handleId, {
 			body: {
 				"request": "configure",
-				descriptions: descriptions
+				descriptions: descriptions,
 			}
 		})
 	}
 
-	setListenIntercomGroups(groups = ['all']) {
-		this._listenIntercomGroups = groups;
+	setListenIntercomGroups(groups = ['participants']) {
+
+		if(typeof groups !== 'object' || !("length" in groups)) {
+			this._log('setListenIntercomGroups: groups must be an array');
+			groups = [groups];
+		}
+
+		this._listenIntercomGroups = structuredClone(groups);
+		let handle = this._getHandle(this.handleId);
+		if (!handle) {
+			return Promise.resolve();
+		}
+
+		let promises = [];
+		this._participants.forEach(participant => {
+
+			if(participant.handleId === this.handleId) {
+				return;
+			}
+
+
+			let handle = this._getHandle(participant.handleId);
+			if(handle) {
+
+
+				const tracksMap = handle.webrtcStuff.tracksMap.filter(t => t.active);
+				const subscribe = [];
+				const unsubscribe = [];
+
+				tracksMap.forEach(track => {
+					if(track.type === 'data') {
+						//subscribe.push({feed: track.id, mid: track.mid})
+						return;
+					}
+					const description = JSON.parse(track.description);
+					const intercomGroups = description?.intercomGroups || [];
+
+					if(this._listenIntercomGroups.some(g => intercomGroups.includes(g))) {
+						subscribe.push({feed: track.id, mid: track.mid})
+					}
+					else {
+						unsubscribe.push({feed: track.id, mid: track.mid})
+					}
+				});
+
+				if(subscribe.length || unsubscribe.length) {
+					promises.push(this.sendMessage(handle.handleId, {
+						body: {
+							"request": "update",
+							...(subscribe.length ? {subscribe}: {}),
+							...(unsubscribe.length ? {unsubscribe}: {})
+						}
+					}));
+				}
+			}
+		});
+		return Promise.all(promises);
 	}
 
 	setRoomType(type = 'watchparty') {