@reactoo/watchtogether-sdk-js 2.7.88 → 2.7.90

package/package.json

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

package/src/models/iot.js

@@ -255,6 +255,10 @@ let iot = function () {
             return this.iot.__promise.then(() => this.__privates.iot.send(topic,message));
         },
 
+        emitMessage: (message) => {
+            this.__privates.iot.emitMessage(message);
+        },
+
         $once: (key, callback, that) => {
             return this.__privates.iot.once(key, callback, that || this);
         },

package/src/models/room-session.js

@@ -115,6 +115,7 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 						roomData.data.roomId,
 						roomData.data.pin,
 						roomData.data.href,
+						roomData.data.protocol,
 						roomData.data.iceServers,
 						roomData.data.accessToken,
 						roomData.data.display,

package/src/modules/wt-room.js

@@ -251,6 +251,7 @@ class RoomSession {
 		this.privateId = null;
 		this.constructId = constructId || RoomSession.randomString(16);
 		this.sessionId = null;
+		this.apisecret = null;
 		this.handleId = null;
 		this.ws = null;
 		this.isRestarting = false;
@@ -276,6 +277,9 @@ class RoomSession {
 		this._sendMessageTimeout = 10000;
 		this._retries = 0;
 		this._maxRetries = 5;
+		this._keepAlivePeriod = 25000;
+		this._longPollTimeout = 60000;
+		this._maxev = 10;
 		this._keepAliveId = null;
 		this._participants = [];
 		this._restrictSubscribeToUserIds = []; // all if empty
@@ -297,6 +301,86 @@ class RoomSession {
 		}
 	}
 
+	_httpAPICall = function(url, options) {
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+
+			xhr.open(options.verb || 'POST', url);
+
+			// Set default headers
+			xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
+			if (options.verb === "POST") {
+				xhr.setRequestHeader('Content-Type', 'application/json');
+			}
+
+			// Handle credentials
+			if (options.withCredentials) {
+				xhr.withCredentials = true;
+			}
+
+			// Set timeout if specified
+			if (options.timeout) {
+				xhr.timeout = options.timeout;
+			}
+
+			// Setup handlers
+			xhr.onload = function() {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					let response;
+					try {
+						response = JSON.parse(xhr.responseText);
+					} catch(e) {
+						if (options.error) {
+							options.error('Invalid JSON', xhr.responseText);
+						}
+						reject('Invalid JSON');
+						return;
+					}
+					if (options.success) {
+						options.success(response);
+					}
+					resolve(response);
+				} else {
+					let errorText = xhr.statusText || 'HTTP Error';
+					if (options.error) {
+						options.error(errorText, xhr.responseText);
+					}
+					reject(errorText);
+				}
+			};
+
+			xhr.onerror = function() {
+				let errorText = 'Network error';
+				if (options.error) {
+					options.error(errorText, 'Is the server down?');
+				}
+				reject(errorText);
+			};
+
+			xhr.ontimeout = function() {
+				let errorText = 'Request timed out';
+				if (options.error) {
+					options.error(errorText, 'Is the server down?');
+				}
+				reject(errorText);
+			};
+
+			// Send request
+			try {
+				if (options.body) {
+					xhr.send(JSON.stringify(options.body));
+				} else {
+					xhr.send();
+				}
+			} catch(e) {
+				if (options.error) {
+					options.error('Error sending request', e);
+				}
+				reject(e);
+			}
+		});
+	}
+
 	_pushToRemoteUsersCache(userId, streams, id) {
 		const existingIndex = this._remoteUsersCache.findIndex(u => u.userId === userId);
 		if (existingIndex > -1) {
@@ -431,13 +515,34 @@ class RoomSession {
 			})
 	}
 
-	_send(request = {}, ignoreResponse = false, dontResolveOnAck = false, retry = 0) {
-
+	_sendHTTP(request = {}, ignoreResponse = false, dontResolveOnAck = false, retry = 0) {
+		let transaction = RoomSession.randomString(12);
+		let requestData = {
+			...request,
+			transaction,
+			token: this.token,
+			...((this.sessionId && {'session_id': this.sessionId}) || {}),
+			...((this.apisecret && {'apisecret': this.apisecret}) || {})
+		};
+		this._log(requestData);
+		return this._httpAPICall(this.server, {body:requestData})
+			.then(json => {
+				if(json['janus'] !== 'success' && json['janus'] !== 'ack') {
+					// TODO: check if this can stay like this
+					// not a success not an ack ... should be error
+					return Promise.reject(json["error"])
+				}
+				return json;
+			})
+	}
+	_sendWebsockets(request = {}, ignoreResponse = false, dontResolveOnAck = false, retry = 0) {
 		let transaction = RoomSession.randomString(12);
 		let requestData = {
 			...request,
 			transaction,
-			token: this.token, ...((this.sessionId && {'session_id': this.sessionId}) || {})
+			token: this.token,
+			...((this.sessionId && {'session_id': this.sessionId}) || {}),
+			...((this.apisecret && {'apisecret': this.apisecret}) || {})
 		};
 		this._log(requestData);
 		const op = () => new Promise((resolve, reject) => {
@@ -503,6 +608,44 @@ class RoomSession {
 			}
 		})
 	}
+	_send(request = {}, ignoreResponse = false, dontResolveOnAck = false, retry = 0) {
+		if(this.useWebsockets) {
+			return this._sendWebsockets(request, ignoreResponse, dontResolveOnAck, retry);
+		}
+		else {
+			return this._sendHTTP(request, ignoreResponse, dontResolveOnAck, retry)
+		}
+	}
+
+	_longPoll() {
+		let longpoll = this.server + "/" + this.sessionId + "?rid=" + new Date().getTime();
+		if(this._maxev)
+			longpoll = longpoll + "&maxev=" + this._maxev;
+		if(this.token)
+			longpoll = longpoll + "&token=" + encodeURIComponent(this.token);
+		if(this.apisecret)
+			longpoll = longpoll + "&apisecret=" + encodeURIComponent(this.apisecret);
+
+		this._httpAPICall(longpoll, {
+			verb: 'GET',
+			timeout: this._longPollTimeout
+		})
+			.then(this._handleWsEvents.bind(this))
+			.catch(() => {
+
+				this._retries++;
+				if(this._retries > this._maxRetries) {
+					if (this.sessiontype === 'reactooroom') {
+						this.disconnect(true);
+					} else if (this.sessiontype === 'streaming') {
+						this.stopStream();
+					}
+					this.emit('error', {type: 'error', id: 33, message: 'Lost connection to server', data: null});
+				}
+
+				this._longPoll();
+			})
+	}
 
 	_connectionClosed() {
 
@@ -555,16 +698,36 @@ class RoomSession {
 
 		this._keepAliveId = setTimeout(() => {
 			this._startKeepAlive();
-		}, 10000);
+		}, this._keepAlivePeriod);
 	}
 
 	_stopKeepAlive() {
 		clearTimeout(this._keepAliveId);
 	}
 
-	_handleWsEvents(event) {
+	_handleWsEvents(event, skipPoll = false) {
+
+		this._retries = 0;
+
+		// we have a response from long poll, that means we need to run it again
+		if(!this.useWebsockets && !skipPoll) {
+			this._longPoll();
+		}
+
+		if(!this.useWebsockets && skipPoll) {
+			// we need to fire those events into the wild
+			this.emit('longPollEvent', event);
+		}
+
+		if(Array.isArray(event)) {
+			event.forEach(ev => this._handleWsEvents({data:ev}, true));
+			return;
+		}
+
+		let json = typeof event.data === 'string'
+			? JSON.parse(event.data)
+			: event.data;
 
-		let json = JSON.parse(event.data);
 		var sender = json["sender"];
 		var type = json["janus"];
 
@@ -1274,14 +1437,15 @@ class RoomSession {
 			: Promise.resolve();
 	}
 
-	// internal reconnect
+	_webSocketConnection(reclaim = false)  {
 
-	_reconnect() {
-
-		if (this.isReclaiming) {
-			return Promise.resolve();
+		if (this.isConnecting) {
+			return Promise.reject({type: 'warning', id: 16, message: 'connection establishment already in progress'});
 		}
 
+		this.isConnecting = true;
+		this.emit('joining', true);
+
 		if (this.ws) {
 			this._wipeListeners();
 			if (this.ws.readyState === 1) {
@@ -1289,60 +1453,153 @@ class RoomSession {
 			}
 		}
 		this._stopKeepAlive();
-		this.isReclaiming = true;
-		this.emit('joining', true);
+
 		return new Promise((resolve, reject) => {
 
-			let abortReconnect = () => {
-				this._abortController.signal.removeEventListener('abort', abortReconnect);
+			this.__connectionClosedBoundFn = this._connectionClosed.bind(this);
+			this.__handleWsEventsBoundFn = this._handleWsEvents.bind(this);
+
+			let abortConnect = () => {
+				this._abortController.signal.removeEventListener('abort', abortConnect);
 				this.ws.removeEventListener('close', this.__connectionClosedBoundFn);
 				this.ws.removeEventListener('message', this.__handleWsEventsBoundFn);
 				this.ws.onopen = null;
 				this.ws.onerror = null;
-				this.isReclaiming = false;
+				this.isConnecting = false;
 				this.emit('joining', false);
-				reject({type: 'warning', id: 17, message: 'Connection cancelled', data: e});
+				reject({type: 'warning', id: 17, message: 'Connection cancelled'});
 			};
 
 			this.ws = new WebSocket(this.server, 'janus-protocol');
-			this.__connectionClosedBoundFn = this._connectionClosed.bind(this);
-			this.__handleWsEventsBoundFn = this._handleWsEvents.bind(this);
 			this.ws.addEventListener('close', this.__connectionClosedBoundFn);
 			this.ws.addEventListener('message', this.__handleWsEventsBoundFn);
+
 			this.ws.onopen = () => {
-				this._abortController.signal.removeEventListener('abort', abortReconnect);
-				this._send({"janus": "claim"})
-					.then(json => {
-						this.sessionId = json["session_id"] ? json["session_id"] : json.data["id"];
-						this._startKeepAlive();
-						this.isReclaiming = false;
-						this.emit('joining', false);
-						this._retries = 0;
-						resolve(json);
-					})
-					.catch(error => {
-						this.isReclaiming = false;
-						this.emit('joining', false);
-						reject({type: 'error', id: 11, message: 'reconnection error', data: error})
-					});
+				this._abortController.signal.removeEventListener('abort', abortConnect);
+
+				if(!reclaim) {
+
+					this._send({"janus": "create"})
+						.then(json => {
+							this._retries = 0;
+							this.sessionId = json["session_id"] ? json["session_id"] : json.data["id"];
+							this._startKeepAlive();
+							return 1;
+						})
+						.then(() => this._createParticipant(this.userId))
+						.then(handle => {
+							this.handleId = handle.handleId;
+							return 1
+						})
+						.then(() => this._joinRoom(this.roomId, this.pin, this.userId, this.display))
+						.then(() => {
+							this._enableStatsWatch();
+							this._enableSubstreamAutoSelect();
+							this.isConnecting = false;
+							this.emit('joining', false);
+							resolve(this);
+						})
+						.catch(error => {
+							this.isConnecting = false;
+							this.emit('joining', false);
+							reject({type: error?.type === 'warning' ? 'warning' : 'error', id: 13, message: 'connection error', data: error})
+						});
+
+				}
+
+				else {
+					this._send({"janus": "claim"})
+						.then(json => {
+							this._retries = 0;
+							this.sessionId = json["session_id"] ? json["session_id"] : json.data["id"];
+							this._startKeepAlive();
+							this.isConnecting = false;
+							this.emit('joining', false);
+							resolve(json);
+						})
+						.catch(error => {
+							this.isConnecting = false;
+							this.emit('joining', false);
+							reject({type: 'error', id: 11, message: 'reconnection error', data: error})
+						});
+				}
+
 			};
 
-			// this is called before 'close' event callback so it doesn't break reconnect loop
 			this.ws.onerror = (e) => {
-				this._abortController.signal.removeEventListener('abort', abortReconnect);
-				this.isReclaiming = false;
+				this._abortController.signal.removeEventListener('abort', abortConnect);
+				this.isConnecting = false;
 				this.emit('joining', false);
-				reject({type: 'warning', id: 12, message: 'ws reconnection error', data: e});
+				reject({type: 'error', id: 14, message: 'ws connection error', data: e});
 			}
 
-			this._abortController.signal.addEventListener('abort', abortReconnect);
+			this._abortController.signal.addEventListener('abort', abortConnect);
+
 		});
 	}
 
+	_httpConnection(reclaim = false) {
+		if(!reclaim) {
+			return this._send({"janus": "create"})
+				.then(json => {
+					this._retries = 0;
+					this.sessionId = json["session_id"] ? json["session_id"] : json.data["id"];
+					this._startKeepAlive();
+					return 1;
+				})
+				.then(() => this._createParticipant(this.userId))
+				.then(handle => {
+					this.handleId = handle.handleId;
+					return 1
+				})
+				.then(() => this._joinRoom(this.roomId, this.pin, this.userId, this.display))
+				.then(() => {
+					this._enableStatsWatch();
+					this._enableSubstreamAutoSelect();
+					this._longPoll();
+					this.isConnecting = false;
+					this.emit('joining', false);
+					return Promise.resolve(this);
+				})
+				.catch(error => {
+					this.isConnecting = false;
+					this.emit('joining', false);
+					return Promise.reject({type: error?.type === 'warning' ? 'warning' : 'error', id: 13, message: 'connection error', data: error})
+				});
+		}
+		else {
+			return this._send({"janus": "claim"})
+				.then(json => {
+					this._retries = 0;
+					this.sessionId = json["session_id"] ? json["session_id"] : json.data["id"];
+					this._startKeepAlive();
+					this.isConnecting = false;
+					this.emit('joining', false);
+					return Promise.resolve(json);
+				})
+				.catch(error => {
+					this.isConnecting = false;
+					this.emit('joining', false);
+					return Promise.reject({type: 'error', id: 11, message: 'reconnection error', data: error})
+				});
+		}
+	}
+
+
+	// internal reconnect
+	_reconnect() {
+		if(this.useWebsockets) {
+			return this._webSocketConnection(true)
+		}
+		else {
+			return this._httpConnection(true)
+		}
+	}
 	connect(
 		roomId,
 		pin,
 		server,
+		protocol,
 		iceServers,
 		token,
 		display,
@@ -1359,14 +1616,11 @@ class RoomSession {
 			return Promise.reject({type: 'warning', id: 16, message: 'connection already in progress'});
 		}
 
-		if (this.ws) {
-			this._wipeListeners();
-		}
-		this._stopKeepAlive();
 		this._abortController = new AbortController();
 
 		this.sessionId = null;
 		this.server = server;
+		this.protocol = protocol;
 		this.iceServers = iceServers;
 		this.token = token;
 		this.roomId = roomId;
@@ -1376,10 +1630,10 @@ class RoomSession {
 		this.webrtcVersion = webrtcVersion;
 		this.initialBitrate = initialBitrate;
 		this.recordingFilename = recordingFilename;
-		this.isConnecting = true;
 		this.enableDtx = enableDtx;
 		this.simulcast = simulcast;
 		this.simulcastSettings = structuredClone(simulcastSettings);
+		this.useWebsockets = this.protocol === 'ws' || this.protocol === 'wss';
 
 		// sort simulcast bitrates
 		if(this.simulcastSettings && typeof this.simulcastSettings === 'object' && Object.keys(this.simulcastSettings).length) {
@@ -1393,65 +1647,12 @@ class RoomSession {
 			});
 		}
 
-		this.emit('joining', true);
-		return new Promise((resolve, reject) => {
-
-			this.ws = new WebSocket(this.server, 'janus-protocol');
-			this.__connectionClosedBoundFn = this._connectionClosed.bind(this);
-			this.__handleWsEventsBoundFn = this._handleWsEvents.bind(this);
-
-			let abortConnect = () => {
-				this._abortController.signal.removeEventListener('abort', abortConnect);
-				this.ws.removeEventListener('close', this.__connectionClosedBoundFn);
-				this.ws.removeEventListener('message', this.__handleWsEventsBoundFn);
-				this.ws.onopen = null;
-				this.ws.onerror = null;
-				this.isConnecting = false;
-				this.emit('joining', false);
-				reject({type: 'warning', id: 17, message: 'Connection cancelled'});
-			};
-
-			this.ws.addEventListener('close', this.__connectionClosedBoundFn);
-			this.ws.addEventListener('message', this.__handleWsEventsBoundFn);
-			this.ws.onopen = () => {
-				this._abortController.signal.removeEventListener('abort', abortConnect);
-				this._retries = 0;
-				this._send({"janus": "create"})
-					.then(json => {
-						this.sessionId = json["session_id"] ? json["session_id"] : json.data["id"];
-						this._startKeepAlive();
-						return 1;
-					})
-					.then(() => this._createParticipant(userId))
-					.then(handle => {
-						this.handleId = handle.handleId;
-						return 1
-					})
-					.then(() => this._joinRoom(roomId, pin, userId, display))
-					.then(() => {
-						this._enableStatsWatch();
-						this._enableSubstreamAutoSelect();
-						this.isConnecting = false;
-						this.emit('joining', false);
-						resolve(this);
-					})
-					.catch(error => {
-						this.isConnecting = false;
-						this.emit('joining', false);
-						reject({type: error?.type === 'warning' ? 'warning' : 'error', id: 13, message: 'connection error', data: error})
-					});
-			};
-
-			this.ws.onerror = (e) => {
-				this._abortController.signal.removeEventListener('abort', abortConnect);
-				this.isConnecting = false;
-				this.emit('joining', false);
-				reject({type: 'error', id: 14, message: 'ws connection error', data: e});
-			}
-
-			this._abortController.signal.addEventListener('abort', abortConnect);
-
-		});
+		if(this.useWebsockets) {
+			return this._webSocketConnection(false)
+		}
+		else {
+			return this._httpConnection(false)
+		}
 	}
 
 	disconnect() {
@@ -1789,7 +1990,7 @@ class RoomSession {
 
 	_parseVideoStats(participantsStats) {
 
-		let statsToEmitt = [];
+		let statsToEmit = [];
 
 		for (const sourceStats of participantsStats) {
 
@@ -1865,7 +2066,7 @@ class RoomSession {
 					handle.webrtcStuff.stats[mid].shift();
 				}
 
-				statsToEmitt.push({
+				statsToEmit.push({
 					handleId: participantStats.handleId,
 					stats,
 					userId: decodeJanusDisplay(handle.userId)?.userId,
@@ -1875,7 +2076,7 @@ class RoomSession {
 			}
 		}
 
-		this.emit('rtcStats', statsToEmitt);
+		this.emit('rtcStats', statsToEmit);
 	}
 
 	_getStats(type = null) {
@@ -2125,6 +2326,7 @@ class RoomSession {
 						if(event.track.kind === 'video') {
 							this.requestKeyFrame(handle.handleId, mid);
 						}
+
 						this.emit(this._getAddParticipantEventName(handle.handleId), {
 							tid: generateUUID(),
 							mid,
@@ -2831,28 +3033,11 @@ class RoomSession {
 					config.pc.addTrack(stream.getVideoTracks()[0], config.stream);
 				}
 				else {
-					if(adapter.browserDetails.browser !== 'firefox') {
-
-						// standard
-						config.pc.addTransceiver(stream.getVideoTracks()[0], {
-							direction: 'sendonly',
-							streams: [config.stream],
-							sendEncodings: structuredClone(simulcastConfigForSource?.bitrates)
-						})
-					}
-					else {
-						// firefox
-						let transceiver = config.pc.addTransceiver(stream.getVideoTracks()[0], {
-							direction: 'sendonly',
-							streams: [config.stream]
-						});
-						let sender = transceiver ? transceiver.sender : null;
-						if(sender) {
-							let parameters = sender.getParameters() || {};
-							parameters.encodings = stream.getVideoTracks()[0].sendEncodings || structuredClone(simulcastConfigForSource?.bitrates);
-							sender.setParameters(parameters);
-						}
-					}
+					config.pc.addTransceiver(stream.getVideoTracks()[0], {
+						direction: 'sendonly',
+						streams: [config.stream],
+						sendEncodings: structuredClone(simulcastConfigForSource?.bitrates)
+					})
 				}
 				needsNegotiation = true;
 			}
@@ -3224,23 +3409,31 @@ class RoomSession {
 		let config = handle.webrtcStuff;
 		return new Promise((resolve, reject) => {
 			let messageTimeoutId;
-			let abortResponse = () => {
+
+			let clearListeners = () => {
 				clearTimeout(messageTimeoutId);
 				this._abortController.signal.removeEventListener('abort', abortResponse);
-				this.ws.removeEventListener('message', parseResponse);
+				this.off('longPollEvent', parseResponse);
+				this.ws?.removeEventListener('message', parseResponse);
+			};
+
+			let abortResponse = () => {
+				clearListeners();
 				reject('aborted');
 			};
+
 			let parseResponse = (event) => {
-				let json = JSON.parse(event.data);
+				let json = typeof event.data === 'string'
+					? JSON.parse(event.data)
+					: event.data;
+
 				var sender = json["sender"];
 				if(sender === handleId) {
 					let plugindata = json["plugindata"] || {};
 					let msg = plugindata["data"] || {};
 					let substream = msg["substream"];
 					if(substream !== undefined && substream !== null && (mid !== undefined ? msg["mid"] === mid : true)) {
-						clearTimeout(messageTimeoutId);
-						this._abortController.signal.removeEventListener('abort', abortResponse);
-						this.ws.removeEventListener('message', parseResponse);
+						clearListeners();
 						resolve({substream, sender});
 					}
 				}
@@ -3280,11 +3473,11 @@ class RoomSession {
 						config.overriddenSimulcastMode[mid]['mode'] = "manual";
 					}
 
-					this.ws.addEventListener('message', parseResponse);
+					this.on('longPollEvent', parseResponse);
+					this.ws?.addEventListener('message', parseResponse);
 					this._abortController.signal.addEventListener('abort', abortResponse);
 					messageTimeoutId = setTimeout(() => {
-						this._abortController.signal.removeEventListener('abort', abortResponse);
-						this.ws.removeEventListener('message', parseResponse);
+						clearListeners();
 						reject('timeout');
 					}, 10000);