@reactoo/watchtogether-sdk-js 2.8.0-beta.3 → 2.8.0-beta.5

package/example/index.html

@@ -576,6 +576,10 @@
             Instance.room.getSessionByConstructId(constructId).setRestrictSubscribeToUserIds(userIds)
         }
 
+        window.restart = function () {
+            Instance.room.getSessionByConstructId(constructId).restart()
+        }
+
 
     </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.8.0-beta.3",
+  "version": "2.8.0-beta.5",
   "description": "Javascript SDK for Reactoo",
   "main": "dist/watchtogether-sdk.min.js",
   "module": "dist/watchtogether-sdk.min.js",

package/src/models/room-session.js

@@ -156,22 +156,24 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 			room.isRestarting = true;
 
 			let wasPublished = room.isPublished;
-			let handle = room._getHandle(room.handleId);
-			let stream = null;
-			if (handle?.webrtcStuff?.stream && wasPublished) {
-				stream = handle.webrtcStuff.stream;
-			}
+			let streams = room.getLocalStreams();
 
 			return this.disconnect()
 				.then(() => wait(1000)) //TODO: remove 1000ms wait by waiting for proper events from janus
 				.then(() => this.connect({reactooRoomId}))
 				.then(() => {
-					if (isObserver) {
+					if(streams.length) {
+						return streams.reduce((promise, stream) => {
+							return promise.then(() => {
+								return this.publishLocal(stream.stream, stream.source);
+							});
+						}, Promise.resolve())
+
+					} else if (wasPublished) {
 						return this.publishLocal(null);
-					} else if (stream) {
-						return this.publishLocal(stream);
-					} else
+					} else {
 						return Promise.resolve()
+					}
 				})
 				.then(() => {
 					room.isRestarting = false;

package/src/modules/wt-room-sfu.js

@@ -278,6 +278,7 @@ class RoomSession {
 		// helper flags
 
 		this.isSupposeToBeConnected = false;
+		this.isRestarting = false; // used from outside
 		this.isConnecting = false;
 		this.isEstablishingConnection = false;
 		this.isDisconnecting = false;
@@ -406,6 +407,13 @@ class RoomSession {
 		}
 	}
 
+	#hasAttendeeInCache(id) {
+		if(this.#subscriberHandle) {
+			return !!this.#subscriberHandle.webrtcStuff.userIdToDisplay[id];
+		}
+		return false
+	}
+
 	#getCachedAttendeeIds() {
 		return Object.keys(this.#subscriberHandle?.webrtcStuff?.userIdToDisplay || {});
 	}
@@ -448,7 +456,7 @@ class RoomSession {
 		});
 	}
 
-	#emitRemoteFeedUpdate(mid, {feedRemoval = false, addingTrack = false, removingTrack = false, track = null, source = null, attendee = null} = {}) {
+	#emitRemoteFeedUpdate(mid, {forceEmit = false,feedRemoval = false, addingTrack = false, removingTrack = false, track = null, source = null, attendee = null} = {}) {
 
 		const transceiverData = this.#getTransceiverDataByMid(mid);
 
@@ -462,7 +470,7 @@ class RoomSession {
 				description = JSON.parse(transceiverData.feed_description);
 			} catch (e) {}
 
-			if(!this.#shouldEmitFeedUpdate(parsedDisplay)) {
+			if(!this.#shouldEmitFeedUpdate(parsedDisplay) && !forceEmit && !removingTrack) {
 				this._log('Not emitting feed update for', display, 'because of subscription rules');
 				// we don't want to emit this event
 				return;
@@ -513,7 +521,8 @@ class RoomSession {
 			const display = this.#getDisplayById(id);
 			const parsedDisplay = decodeJanusDisplay(display);
 
-			if(!this.#shouldEmitFeedUpdate(parsedDisplay)) {
+			// we sometimes need to force emit, or emit when we unsubscribed and we're removing tracks
+			if(!this.#shouldEmitFeedUpdate(parsedDisplay, id) && !forceEmit && !removingTrack) {
 				this._log('Not emitting feed update for', display, 'because of subscription rules');
 				// we don't want to emit this event
 				return;
@@ -654,6 +663,7 @@ class RoomSession {
 			const subscribe = [];
 			const unsubscribe = [];
 			const flatSourceMap = [];
+			const forceEmitFeedRemoval = []
 
 			for (let index in publishers) {
 				if(publishers[index]["dummy"])
@@ -692,6 +702,10 @@ class RoomSession {
 						if(isSubscribed) {
 							unsubscribe.push({feed: id, mid: mid});
 							this.#removeFromSubscribeMap(id, mid);
+							// we need to get rid of feed if we we're subscribed to it
+							if(forceEmitFeedRemoval.indexOf(id) === -1) {
+								forceEmitFeedRemoval.push(id);
+							}
 						}
 						continue;
 					}
@@ -703,6 +717,9 @@ class RoomSession {
 				}
 			}
 
+			// we need to get rid of feed if we we're subscribed to it
+			forceEmitFeedRemoval.forEach(id => this.#emitRemoteFeedUpdate(null, {feedRemoval: true, forceEmit: true, attendee: {id:id}}))
+
 			// check if we're subscribed to any mid that is no longer available in sources
 
 			Object.keys(subscribedTo).forEach(id => {
@@ -784,7 +801,7 @@ class RoomSession {
 	// feed_id === id of participant
 
 	#updateTransceiverMap(handleId, streams = []) {
-		this._log('Updating current transceiver map', 'Is me: ' + handleId === this.#publisherHandle.handleId, handleId, streams);
+		this._log('Updating current transceiver map', 'Is me: ' + handleId === this.#publisherHandle?.handleId, handleId, streams);
 		let handle = this.#getHandle(handleId);
 		if (!handle) {
 			this.emit('error', {
@@ -1115,12 +1132,12 @@ class RoomSession {
 		} else if (type === "webrtcup") {
 			//none universal
 		} else if (type === "hangup") {
-			this._log('hangup on', handle.handleId, handle.handleId === this.#publisherHandle.handleId, json);
+			this._log('hangup on', handle.handleId, handle.handleId === this.handleId, json);
 			if(this.#getHandle(handle.handleId)) {
 				this.#cleanupHandle(handle.handleId, true).catch(() => {});
 			}
 		} else if (type === "detached") {
-			this._log('detached on', handle.handleId, handle.handleId === this.#publisherHandle.handleId, json);
+			this._log('detached on', handle.handleId, handle.handleId === this.handleId, json);
 			if(this.#getHandle(handle.handleId)) {
 				this.#destroyHandle(handle.handleId).catch(() => {});
 			}
@@ -1142,7 +1159,7 @@ class RoomSession {
 
 		// LOCAL
 
-		if (sender === this.#publisherHandle.handleId) {
+		if (sender === this.#publisherHandle?.handleId) {
 			if (type === "event") {
 
 				var plugindata = json["plugindata"] || {};
@@ -1213,7 +1230,7 @@ class RoomSession {
 
 
 					if (leaving === 'ok') {
-						this._log('leaving', this.#publisherHandle.handleId, 'this is us');
+						this._log('leaving', this.#publisherHandle?.handleId, 'this is us');
 						
 						this.#emitLocalFeedUpdate({feedRemoval: true});
 
@@ -1235,8 +1252,8 @@ class RoomSession {
 					}
 
 					if (unpublished === 'ok') {
-						this._log('unpublished', this.#publisherHandle.handleId, 'this is us');
-						this.#cleanupHandle(this.#publisherHandle.handleId, true).catch(() => {});
+						this._log('unpublished', this.#publisherHandle?.handleId, 'this is us');
+						this.#cleanupHandle(this.#publisherHandle?.handleId, true).catch(() => {});
 
 					} else if (unpublished) {
 						this._log('unpublished', unpublished);
@@ -1274,7 +1291,7 @@ class RoomSession {
 				}
 
 				if (jsep !== undefined && jsep !== null) {
-					this.#webrtcPeer(this.#publisherHandle.handleId, jsep)
+					this.#webrtcPeer(this.#publisherHandle?.handleId, jsep)
 						.catch(err => {
 							this.emit('error', err);
 						});
@@ -1288,7 +1305,7 @@ class RoomSession {
 
 				this._log('Configuring bitrate: ' + this.initialBitrate);
 				if (this.initialBitrate > 0) {
-					this.sendMessage(this.#publisherHandle.handleId, {
+					this.sendMessage(this.#publisherHandle?.handleId, {
 						"body": {
 							"request": "configure",
 							"bitrate": this.initialBitrate
@@ -1363,7 +1380,9 @@ class RoomSession {
 				config.dataChannelOpen = this.defaultDataChannelLabel === data?.label && data?.state === 'open';
 			}
 
-			if (handleId === this.#publisherHandle.handleId && this.defaultDataChannelLabel === data?.label) {
+
+
+			if (handleId === this.handleId && this.defaultDataChannelLabel === data?.label) {
 				this._isDataChannelOpen = data?.state === 'open';
 				this.emit('dataChannel', data?.state === 'open');
 			}
@@ -1384,13 +1403,13 @@ class RoomSession {
 					config.dataChannelOpen = false;
 				}
 			}
-			if (handleId === this.#publisherHandle.handleId && this.defaultDataChannelLabel === data.label) {
+			if (handleId === this.handleId && this.defaultDataChannelLabel === data.label) {
 				this._isDataChannelOpen = false;
 				this.emit('dataChannel', false);
 			}
 		}
 
-		if (handleId === this.#publisherHandle.handleId && type === 'message') {
+		if (handleId === this.handleId && type === 'message') {
 
 			let d = null;
 
@@ -1474,18 +1493,24 @@ class RoomSession {
 
 		try {
 			if (handle.webrtcStuff.stream) {
-				if(!this.isConnecting) {
-					handle.webrtcStuff.stream?.getTracks().forEach(track => track.stop());
+
+				if(this.isRestarting && handleId === this.handleId) {
+					handle.webrtcStuff.stream?.getTracks().forEach(track => track.onended = null);
 				}
 				else {
-					handle.webrtcStuff.stream?.getTracks().forEach(track => track.onended = null);
+					handle.webrtcStuff.stream?.getTracks().forEach(track => track.stop());
 				}
+
 			}
 			if(handle.webrtcStuff?.tracks?.length > 0) {
 				handle.webrtcStuff.tracks.forEach(track => {
 					if (track) {
-						track.stop();
-						track.onended = null;
+						if(this.isRestarting && handleId === this.handleId) {
+							track.onended = null;
+						}
+						else {
+							track.stop();
+						}
 					}
 				});
 			}
@@ -1542,7 +1567,7 @@ class RoomSession {
 			lastSwitchTime : new Map(),
 		}
 
-		if(this.#publisherHandle && handleId === this.#publisherHandle.handleId) {
+		if(this.#publisherHandle && handleId === this.#publisherHandle?.handleId) {
 			this.#emitLocalFeedUpdate({feedRemoval: true});
 		}
 		else if(this.#subscriberHandle && handleId === this.#subscriberHandle.handleId) {
@@ -1555,7 +1580,7 @@ class RoomSession {
 	}
 	
 	async #joinAsPublisher(roomId, pin, userId, display) {
-		return this.sendMessage(this.#publisherHandle.handleId, {
+		return this.sendMessage(this.#publisherHandle?.handleId, {
 			body: {
 				"request": "join", "room": roomId, "pin": pin, "ptype": "publisher", "display": display, ...(this.webrtcVersion > 1000 ? {id: userId} : {})
 			}
@@ -1642,7 +1667,7 @@ class RoomSession {
 
 	async #leaveRoom(dontWait = false) {
 		return this.isConnected
-			? this.sendMessage(this.#publisherHandle.handleId, {body: {"request": "leave"}}, dontWait)
+			? this.sendMessage(this.#publisherHandle?.handleId, {body: {"request": "leave"}}, dontWait)
 				.finally(() => {
 					this.isConnected = false;
 					this.emit('joined', false);
@@ -1976,6 +2001,27 @@ class RoomSession {
 			});
 	}
 
+	getLocalStreams() {
+		const streamMap = this.#publisherHandle?.webrtcStuff?.streamMap[this.id];
+		if(!streamMap) {
+			return [];
+		}
+		return Object.keys(streamMap).reduce((acc, source) => {
+			const sourceTrackIds = streamMap[source] ?? [];
+			const sourceRelatedTracks = this.#publisherHandle?.webrtcStuff?.tracks?.filter(t => sourceTrackIds.includes(t.id)) ?? [];
+			if(sourceRelatedTracks.length) {
+				const stream = new MediaStream();
+				sourceRelatedTracks.forEach(track => {
+					if(track) {
+						stream.addTrack(track);
+					}
+				});
+				acc.push({source, stream});
+			}
+			return acc
+		}, [])
+	}
+
 	#enableDebug() {
 		this._log = console.log.bind(console);
 	}
@@ -2366,7 +2412,7 @@ class RoomSession {
 		// removing this so we can cache ice candidates again
 		config.remoteSdp = null;
 
-		if (this.#publisherHandle.handleId === handleId) {
+		if (this.handleId === handleId) {
 			this._log('Performing local ICE restart');
 			let hasAudio = !!(config.stream && config.stream.getAudioTracks().length > 0);
 			let hasVideo = !!(config.stream && config.stream.getVideoTracks().length > 0);
@@ -2515,7 +2561,7 @@ class RoomSession {
 			.then( (response) => {
 
 				// if type offer and its me and we want dtx we mungle the sdp
-				if(handleId === this.#publisherHandle.handleId && type === 'offer' && this.enableDtx) {
+				if(handleId === this.handleId && type === 'offer' && this.enableDtx) {
 					// enable DTX
 					response.sdp = response.sdp.replace("useinbandfec=1", "useinbandfec=1;usedtx=1")
 				}
@@ -2825,7 +2871,7 @@ class RoomSession {
 		let hasAudio = !!(stream && stream.getAudioTracks().length > 0);
 		let hasVideo = !!(stream && stream.getVideoTracks().length > 0);
 
-		this.#setupTransceivers(this.#publisherHandle.handleId, [hasAudio, false, hasVideo, false, audioTransceiver, videoTransceiver]);
+		this.#setupTransceivers(this.handleId, [hasAudio, false, hasVideo, false, audioTransceiver, videoTransceiver]);
 
 		const emitEvents = () => {
 			this.isPublished = true;
@@ -2934,7 +2980,7 @@ class RoomSession {
 
 	async unpublishLocal(dontWait = false) {
 		return this.isPublished
-			? this.sendMessage(this.#publisherHandle.handleId, {body: {"request": "unpublish"}}, dontWait)
+			? this.sendMessage(this.handleId, {body: {"request": "unpublish"}}, dontWait)
 				.finally(r => {
 					this.isPublished = false;
 					this.emit('published', false);