@reactoo/watchtogether-sdk-js 2.7.97 → 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);
@@ -535,6 +548,30 @@
                     })
         }
 
+        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.97",
+  "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

@@ -107,9 +107,9 @@ let asset =  function() {
 			    .then(client => client.http({url, method: 'GET', ...options}))
 	    },
 
-		createStreamAsset: (id, streamType, title, regionalPreference, ingestType, source, profile) => {
+		createStreamAsset: (id, title, streamType, regionalPreference, ingestType, source, profile) => {
 			return this.__privates.auth.__client
-				.then(client => client.apis.asset.publishAsset({id}, {requestBody: {assetType: 'stream', streamType, title, regionalPreference, ingestType, source, profile}}));
+				.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-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;
                     }