@reactoo/watchtogether-sdk-js 2.7.96 → 2.7.98

package/example/index.html

@@ -10,6 +10,7 @@
 <div class="content">
     <video id="thevideo" class="contentVideo" autoplay playsinline controls style="width: 400px" muted="muted" src="https://assetcdn.reactoo.com/watfordFc/Norwich_2010_B_roll_2min16_mute.mp4"></video>
     <div>
+        <button onclick="window.connectRoom()">Connect</button>
         <button onclick="window.startRoom()">Connect and publish</button>
         <button onclick="window.startRoom2()">Connect and publish with screen share</button>
         <button onclick="window.startRoom3()">Connect and publish with blank screen</button>
@@ -31,15 +32,31 @@
     <script type="module">
         import WatchTogetherSDK from '../dist/watchtogether-sdk.js';
 
+        function getQueryVar(varName){
+            const queryStr = decodeURI(window.location.search) + '&';
+            const regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');
+            const val = queryStr.replace(regex, "$1");
+            return val === queryStr ? null : val;
+        }
+
         //https://studio.reactoo.com/room/edf441b3-7415-49c4-9557-273cb93bc746/LJj4W2Cz-nG3U-lb0R-TAaY-o7Thmb8xHSbE
 
         let roomId = "5703bcd6-a11e-4a73-bd14-12ed57227a8c"; // It will create room automatically if not set
         let pinHash = null;
+        let role = getQueryVar("role") || 'participant';
+
+        console.log('role', role);
 
         let participants = document.querySelector('.participants');
         var video = document.querySelector('.contentVideo');
         let constructId = 'test';
 
+        let sanitizeId = function (id) {
+            // remove ":,"
+            return id.replace(/[:]/g, '_').replace(/[,]/g, '_');
+        }
+
+
         // if(Hls.isSupported()) {
         //     var hls = new Hls();
         //     hls.loadSource('https://assetcdn.reactoo.com/watfordFc/Norwich_2010_B_roll_2min16_mute.mp4');
@@ -49,13 +66,6 @@
         //     });
         // }
 
-        function selectSubStream(handleId, substream, source) {
-            return Instance.room.getSessionByConstructId(constructId).selectSubStream(handleId, substream, source);
-        }
-
-        function overrideSimulcastSettings(handleId, mid, source, settings) {
-            return Instance.room.getSessionByConstructId(constructId).overrideSimulcastSettings(handleId, mid, source, settings);
-        }
 
         function hento() {
             //Instance.system.getSettings();
@@ -72,17 +82,13 @@
 
             removeParticipant({id: data.id})
 
-            if(!data.stream) {
-                console.log('no stream for participant');
-                return;
-            }
-
+            const sid = sanitizeId(data.id)
             for(let key in data.streamMap) {
-                let tracks = data.stream.getTracks().filter(t => data['streamMap'][key].includes(t.id));
+                let tracks = data.tracks.filter(t => data['streamMap'][key].includes(t.id));
                 if(tracks.length) {
                     let stream = new MediaStream();
                     tracks.forEach(t => stream.addTrack(t));
-                    let id = `_p${data.id} part_${data.id}_${key}`;
+                    let id = `_p${sid} part_${sid}_${key}`;
                     let el = document.createElement("video");
                     el.autoplay = true;
                     el.playsInline = true;
@@ -100,7 +106,10 @@
         }
 
         function removeParticipant(data) {
-            let id = `_p${data.id}`;
+
+            console.log('removing participant - participantData', data);
+
+            let id = `_p${sanitizeId(data.id)}`;
             let els = document.querySelectorAll(`.${id}`);
             console.log(id,els);
             els.length && els.forEach(el => el.parentNode.removeChild(el));
@@ -110,6 +119,10 @@
             Instance.room.getSessionByConstructId(constructId).disconnect()
         }
 
+        function connectRoom() {
+            Instance.room.getSessionByConstructId(constructId).connect()
+        }
+
         function startRoom() {
             let sess = Instance.room.getSessionByConstructId(constructId);
             sess.connect()
@@ -173,17 +186,6 @@
             Instance.room.getSessionByConstructId(constructId).toggleAudio()
         }
 
-        function setListenIntercomChannels(groups) {
-            Instance.room.getSessionByConstructId(constructId).setListenIntercomChannels(groups)
-        }
-
-        function setTalkIntercomChannels(groups) {
-            Instance.room.getSessionByConstructId(constructId).setTalkIntercomChannels(groups)
-        }
-
-        function setRestrictSubscribeToUserIds(userIds) {
-            Instance.room.getSessionByConstructId(constructId).setRestrictSubscribeToUserIds(userIds)
-        }
 
         function iotLogout() {
             return Instance.iot.iotLogout()
@@ -248,7 +250,7 @@
                         return r.data;
                     })
             })
-            .then(r => Instance.room.createSession({constructId, roomId:r.roomId, pinHash: r.pinHash, role:'participant', options: {
+            .then(r => Instance.room.createSession({constructId, roomId:r.roomId, pinHash: r.pinHash, role:role, options: {
                     // simulcast: true,
                     // simulcastSettings: {
                     //     "default" : {
@@ -361,8 +363,8 @@
                     console.log('joined', status); // joined room
                 });
 
-                session.$on('published', ({status, hasStream}) => {
-                    console.log('published', status, hasStream); // published yourself (either with stream or dataChannel only, you're now able to sync the player)
+                session.$on('published', (status) => {
+                    console.log('published', status); // published yourself (either with stream or dataChannel only, you're now able to sync the player)
                 });
 
                 session.$on('publishing', status => {
@@ -389,6 +391,14 @@
                     removeParticipant(participant, true); // remote participant is gone
                 });
 
+                session.$on('addRemoteObserver', (participant) => {
+                    createParticipant(participant, true); // remote participant is available or updated
+                });
+
+                session.$on('removeRemoteObserver', (participant) => {
+                    removeParticipant(participant, true); // remote participant is gone
+                });
+
                 session.$on('userUpdate', (userId) => {
                     console.log('userUpdate', userId); // User "${userId}" updated it's profile, we might do a get request to see what've changed
                 });
@@ -455,6 +465,9 @@
 
             });
 
+        window.connectRoom = function () {
+            Instance.room.getSessionByConstructId(constructId).connect()
+        }
         // Make functions globally accessible
         window.startRoom = function() {
             let sess = Instance.room.getSessionByConstructId(constructId);
@@ -529,16 +542,36 @@
         }
 
         window.asset = function () {
-            const test = Instance.asset.getAssetList({  ids: ['6304b890-321a-494b-b0e6-b0cee48026cd'], instanceType: 'reactooBackup', type:'ids'})
+            Instance.asset.getAssetList({  ids: ['6304b890-321a-494b-b0e6-b0cee48026cd'], instanceType: 'reactooBackup', type:'ids'})
                     .then(r => {
                         console.log(r);
-                        return r;
                     })
-            test.then(r => {
-                console.log(r);
-            })
         }
 
+        window.selectSubstream = function (id, substream, source) {
+            let sess = Instance.room.getSessionByConstructId(constructId);
+            sess.selectSubStream(id, substream, source)
+                    .then((r) => {
+                        console.log('substream selected', r);
+                    })
+                    .catch(e => {
+                        console.log('substream select error', e);
+                    })
+        }
+
+        window.setListenIntercomChannels = function(groups) {
+            Instance.room.getSessionByConstructId(constructId).setListenIntercomChannels(groups)
+        }
+
+        window.setTalkIntercomChannels = function(groups) {
+            Instance.room.getSessionByConstructId(constructId).setTalkIntercomChannels(groups)
+        }
+
+        window.setRestrictSubscribeToUserIds = function(userIds) {
+            Instance.room.getSessionByConstructId(constructId).setRestrictSubscribeToUserIds(userIds)
+        }
+
+
     </script>
 
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.7.96",
+  "version": "2.7.98",
   "description": "Javascript SDK for Reactoo",
   "main": "dist/watchtogether-sdk.min.js",
   "module": "dist/watchtogether-sdk.min.js",
@@ -36,6 +36,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
     "@babel/preset-env": "^7.22.10",
     "babel-loader": "^9.1.3",
     "buffer": "^6.0.3",

package/src/models/asset.js

@@ -66,8 +66,7 @@ let asset =  function() {
 						if (onProgress && xhr.upload) {
 							xhr.upload.onprogress = (event) => {
 								if (event.lengthComputable) {
-									const percentComplete = (event.loaded / event.total) * 100;
-									onProgress(percentComplete, event.loaded, event.total);
+									onProgress(event.loaded, event.total);
 								}
 							};
 						}
@@ -106,6 +105,11 @@ let asset =  function() {
 	    downloadAsset: (url, options = {}) => {
 		    return this.__privates.auth.__client
 			    .then(client => client.http({url, method: 'GET', ...options}))
+	    },
+
+		createStreamAsset: (id, title, streamType, regionalPreference, ingestType, source, profile) => {
+			return this.__privates.auth.__client
+				.then(client => client.apis.asset.publishAsset({id}, {requestBody: {assetType: 'stream', title, stream: {streamType, regionalPreference, ingestType, source, profile}}}));
 	    }
     }
 };

package/src/models/room-session.js

@@ -47,6 +47,10 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 		}, 2000);
 	});
 
+	room.on('requestMuteStatus', () => {
+		___.__requestMuteStatus();
+	});
+
 	room.on('localMuted', ({type, value, source, mid}) => {
 		___.sendSystemMessage('remote_muted', {type, value, source, mid})
 	});
@@ -105,12 +109,18 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 				role
 			}, abortController?.signal)
 				.then(roomData => {
+
 					// Happens when we reroute user to a different room
 					if(roomData?.data?.reactooRoomId !== roomId) {
 						roomId = roomData.data.reactooRoomId;
 						emitter.emit('changeRoomId', roomId);
 					}
+
 					room.setRoomType(roomData.data.roomType);
+
+					const roomSettingSimulcastEnabled = !!roomData?.data?.simulcast;
+					const roomSettingSimulcastConfig = roomData?.data?.simulcast||{};
+
 					return room.connect(
 						roomData.data.roomId,
 						roomData.data.pin,
@@ -123,8 +133,8 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 						roomData.data.webrtcVersion,
 						(roomData.data.bitrate ? parseInt(roomData.data.bitrate) : 0),
 						roomData.data.recordingFilename,
-						simulcast !== null ? simulcast : !!roomData?.data?.simulcast,
-						simulcastSettings !== null ? simulcastSettings : roomData?.data?.simulcast,
+						simulcast !== null ? simulcast : roomSettingSimulcastEnabled,
+						simulcastSettings !== null ? simulcastSettings : roomSettingSimulcastConfig,
 						enableDtx !== null ? enableDtx : roomData?.data?.enableDtx,
 					)
 				})
@@ -373,8 +383,8 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 			return room.requestKeyFrame(handleId, mid);
 		},
 
-		selectSubStream: (handleId, substream, source, mid) => {
-			return room.selectSubStream(handleId, substream, source, mid, true);
+		selectSubStream: (id, substream, source, mid) => {
+			return room.selectSubStream(id, substream, source, mid, true);
 		},
 
 		setBitrateCap: (bitrate) => {
@@ -389,9 +399,6 @@ let roomSession = function ({roomId, pinHash, role, options = {}}, room, wt) {
 			}).catch(() => null)
 		},
 
-		overrideSimulcastSettings: (handleId, mid, source, settings) => {
-			return room.overrideSimulcastSettings(handleId, mid, source, settings);
-		},
 
 		sendSystemMessage: (action, value = {}, to, set_master) => {
 			return room.sendMessage(room.handleId, {

package/src/modules/wt-iot-worker5.worker.js

@@ -1,7 +1,7 @@
 import { mqtt5, iot } from 'aws-iot-device-sdk-v2';
 console.log('Worker: Starting up');
 
-let connection = null;
+let client = null;
 let currentConnectionId = 1;
 
 self.onmessage = function(event) {
@@ -37,29 +37,29 @@ function connect(params, stamp) {
     console.log('Worker: Attempting to connect');
     const { apiMqttUrl, apiMqttClientId, region, accessKeyId, secretAccessKey, sessionToken } = params;
 
-    const configBuilder = iot.AwsIotMqttConnectionConfigBuilder.new_with_websockets();
+    const configBuilder = iot.AwsIotMqtt5ClientConfigBuilder.new_with_websockets();
 
     configBuilder.with_clean_session(true);
     configBuilder.with_client_id(apiMqttClientId);
     configBuilder.with_endpoint(apiMqttUrl);
     configBuilder.with_credentials(region, accessKeyId, secretAccessKey, sessionToken);
-    configBuilder.with_keep_alive_seconds(30);
     configBuilder.with_ping_timeout_ms(3000);
-    configBuilder.with_reconnect_max_sec(5);
-    configBuilder.with_reconnect_min_sec(1);
+    configBuilder.with_connect_properties({
+        keepAliveIntervalSeconds: 30,
+        sessionExpiryIntervalSeconds: 300
+    });
 
     const config = configBuilder.build();
-    const client = new mqtt5.MqttClient(); // Use MQTT 5.0 client
 
-    connection = client.new_connection(config);
+    // MQTT5 uses a single client instance
+    client = new mqtt5.Mqtt5Client(config);
     currentConnectionId++;
 
     setupConnectionListeners(currentConnectionId);
 
-    connection.connect()
+    client.start()
         .then(() => {
             console.log('Worker: Connection successful');
-            connection.start(); // Start the client to maintain connectivity
             self.postMessage({ type: 'connect_result', data: {success: true, connectionId: currentConnectionId, stamp} });
         })
         .catch((error) => {
@@ -69,38 +69,42 @@ function connect(params, stamp) {
 }
 
 function disconnect(stamp) {
-    if (connection) {
+    if (client) {
         const connectionId = currentConnectionId;
-        connection.stop(); // Stop the client before disconnecting
-        connection.disconnect()
+        client.stop()
             .then(() => {
-                if (connectionId !== currentConnectionId) {
+                if(connectionId !== currentConnectionId) {
                     console.log('Worker: Connection Id mismatch, ignoring disconnect result', connectionId, currentConnectionId);
                     return;
                 }
                 self.postMessage({ type: 'disconnect_result', data: {success: true, stamp} });
             })
             .catch((error) => {
-                if (connectionId !== currentConnectionId) {
+                if(connectionId !== currentConnectionId) {
                     console.log('Worker: Connection Id mismatch, ignoring disconnect result', connectionId, currentConnectionId);
                     return;
                 }
                 self.postMessage({ type: 'disconnect_result', data: { success: false, error: error.message, stamp} });
             });
-        connection = null;
+        client = null;
     } else {
         self.postMessage({ type: 'disconnect_result', data: {success: true, stamp} });
     }
 }
 
 function isConnected() {
-    const connected = connection && connection.currentState === 0 && connection.desiredState === 0;
+    const connected = client && client.getIsConnected();
     self.postMessage({ type: 'is_connected_result', data:{connected} });
 }
 
 function subscribe(topic, stamp) {
-    if (connection && connection.currentState === 0 && connection.desiredState === 0) {
-        connection.subscribe(topic, mqtt5.QoS.AtLeastOnce)
+    if (client && client.getIsConnected()) {
+        const subscription = {
+            qos: mqtt5.QoS.AtLeastOnce,
+            topicFilter: topic
+        };
+
+        client.subscribe(subscription)
             .then(() => {
                 self.postMessage({ type: 'subscribe_result', data: {success: true, stamp} });
             })
@@ -113,8 +117,8 @@ function subscribe(topic, stamp) {
 }
 
 function unsubscribe(topic, stamp) {
-    if (connection && connection.currentState === 0 && connection.desiredState === 0) {
-        connection.unsubscribe(topic)
+    if (client && client.getIsConnected()) {
+        client.unsubscribe({ topicFilter: topic })
             .then(() => {
                 self.postMessage({ type: 'unsubscribe_result', data: {success: true, stamp} });
             })
@@ -127,65 +131,80 @@ function unsubscribe(topic, stamp) {
 }
 
 function send(topic, message) {
-    if (connection && connection.currentState === 0 && connection.desiredState === 0) {
-        connection.publish(topic, message, mqtt5.QoS.AtLeastOnce, false, {
-            // Example of adding user properties
-            userProperties: {
-                // Add your properties here
-            }
-        });
+    if (client && client.getIsConnected()) {
+        const publish = {
+            qos: mqtt5.QoS.AtLeastOnce,
+            topicName: topic,
+            payload: message,
+            retain: false
+        };
+        client.publish(publish);
     } else {
         console.error('Cannot send message: Not connected');
     }
 }
 
 function setupConnectionListeners(connectionId) {
-    connection.on(mqtt5.Mqtt5Client.ATTEMPTING_CONNECT, () => {
-        console.log('Worker: Attempting to connect');
-    });
-
-    connection.on(mqtt5.Mqtt5Client.CONNECTION_SUCCESS, (event) => {
-        if (connectionId !== currentConnectionId) {
-            console.log('Worker: Connection Id mismatch, ignoring connection success event', connectionId, currentConnectionId);
+    client.on('connectionSuccess', (eventData) => {
+        if(connectionId !== currentConnectionId) {
+            console.log('Worker: Connection Id mismatch, ignoring connectionSuccess event', connectionId, currentConnectionId);
             return;
         }
-        self.postMessage({ type: 'connect', connectionId: connectionId, settings: event.settings });
+        self.postMessage({
+            type: 'connection_success',
+            data: {
+                sessionPresent: eventData.sessionPresent,
+                negotiatedSettings: eventData.negotiatedSettings
+            },
+            connectionId: connectionId
+        });
     });
 
-    connection.on(mqtt5.Mqtt5Client.CONNECTION_FAILURE, (event) => {
-        if (connectionId !== currentConnectionId) {
-            console.log('Worker: Connection Id mismatch, ignoring connection failure event', connectionId, currentConnectionId);
+    client.on('connectionFailure', (error) => {
+        if(connectionId !== currentConnectionId) {
+            console.log('Worker: Connection Id mismatch, ignoring connectionFailure event', connectionId, currentConnectionId);
             return;
         }
-        self.postMessage({ type: 'connection_failure', error: event.error });
+        self.postMessage({ type: 'connection_failure', data: error, connectionId: connectionId });
     });
 
-    connection.on(mqtt5.Mqtt5Client.DISCONNECTION, (event) => {
-        if (connectionId !== currentConnectionId) {
-            console.log('Worker: Connection Id mismatch, ignoring disconnection event', connectionId, currentConnectionId);
+    client.on('disconnection', (eventData) => {
+        if(connectionId !== currentConnectionId) {
+            console.log('Worker: Connection Id mismatch, ignoring disconnect event', connectionId, currentConnectionId);
             return;
         }
-        self.postMessage({ type: 'disconnect', error: event.error });
+        self.postMessage({
+            type: 'disconnect',
+            data: { reason: eventData.errorCode },
+            connectionId: connectionId
+        });
     });
 
-    connection.on(mqtt5.Mqtt5Client.MESSAGE_RECEIVED, (event) => {
-        if (connectionId !== currentConnectionId) {
+    client.on('messageReceived', (eventData) => {
+        if(connectionId !== currentConnectionId) {
             console.log('Worker: Connection Id mismatch, ignoring message event', connectionId, currentConnectionId);
             return;
         }
-        self.postMessage({ type: 'message', data: event.message });
+        self.postMessage({
+            type: 'message',
+            data: {
+                topic: eventData.message.topicName,
+                payload: eventData.message.payload,
+                qos: eventData.message.qos,
+                retain: eventData.message.retain,
+                properties: eventData.message.properties
+            },
+            connectionId: connectionId
+        });
     });
 
-    // Additional events can be added as needed
-}
-
-// Ensure to call close when the worker is terminated or no longer needed
-function cleanup() {
-    if (connection) {
-        connection.close(); // Clean up resources
-        connection = null;
-    }
+    client.on('error', (error) => {
+        if(connectionId !== currentConnectionId) {
+            console.log('Worker: Connection Id mismatch, ignoring error event', connectionId, currentConnectionId);
+            return;
+        }
+        self.postMessage({ type: 'error', data: error });
+    });
 }
 
-// Add this at the end of the file
 console.log('Worker: Setup complete');

package/src/modules/wt-iot2.js

@@ -1,5 +1,5 @@
 import emitter from './wt-emitter';
-import { decodeJanusDisplay } from "../models/utils";
+import {decodeJanusDisplay, generateUUID} from "../models/utils";
 import Worker from './wt-iot-worker.worker.js';
 
 class Iot {
@@ -55,12 +55,12 @@ class Iot {
                 this.startCredentialsExpirationCheck(expiration);
                 this.lastConnectParams = { apiMqttUrl, apiMqttClientId, region, accessKeyId, secretAccessKey, sessionToken, expiration };
                 return new Promise((resolve, reject) => {
-                    const stamp = new Date().getTime();
+                    const stamp = new Date().getTime() +'_'+ generateUUID();
 
                     const handleConnectResult = (event) => {
 
                         if(event.stamp !== stamp) {
-                            this.log('connect event stamp mismatch', event.stamp, stamp);
+                            this.log('connect event stamp mismatch, ignoring', event.stamp, stamp);
                             return;
                         }
 
@@ -101,11 +101,11 @@ class Iot {
 
         return new Promise((resolve, reject) => {
 
-            const stamp = new Date().getTime();
+            const stamp = new Date().getTime()+'_'+ generateUUID();
 
             const handleDisconnectResult = (event) => {
                 if(event.stamp !== stamp) {
-                    this.log('disconnect event stamp mismatch', event.stamp, stamp);
+                    this.log('disconnect event stamp mismatch, ignoring', event.stamp, stamp);
                     return;
                 }
                 clearTimeout(timeoutId);
@@ -164,11 +164,11 @@ class Iot {
             }
 
             return new Promise((resolve, reject) => {
-                const stamp = new Date().getTime();
+                const stamp = new Date().getTime()+'_'+ generateUUID();
                 const handleSubscribeResult = (event) => {
 
                     if(event.stamp !== stamp) {
-                        this.log('subscribe event stamp mismatch', event.stamp, stamp);
+                        this.log('subscribe event stamp mismatch, ignoring', event.stamp, stamp);
                         return;
                     }
 
@@ -200,12 +200,12 @@ class Iot {
 
             return new Promise((resolve, reject) => {
 
-                const stamp = new Date().getTime();
+                const stamp = new Date().getTime()+'_'+ generateUUID();;
 
                 const handleUnsubscribeResult = (event) => {
 
                     if(event.stamp !== stamp) {
-                        this.log('unsubscribe event stamp mismatch', event.stamp, stamp);
+                        this.log('unsubscribe event stamp mismatch, ignoring', event.stamp, stamp);
                         return;
                     }