@reactoo/watchtogether-sdk-js 2.6.14 → 2.6.21

package/example/index.html

@@ -12,8 +12,11 @@
     <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="startRoom()">Connect and publish</button>
+        <button onclick="startRoom2()">Connect and publish with screen share</button>
         <button onclick="disconnectRoom()">Disconnect</button>
         <button onclick="publish()">publish</button>
+        <button onclick="publishBlank()">publish blank</button>
+        <button onclick="publishScreen()">publish screen</button>
         <button onclick="unpublish()">unpublish</button>
         <button onclick="toggleVideo()">toggle video</button>
         <button onclick="toggleAudio()">toggle audio</button>
@@ -27,8 +30,8 @@
 
         //https://studio.reactoo.com/room/edf441b3-7415-49c4-9557-273cb93bc746/LJj4W2Cz-nG3U-lb0R-TAaY-o7Thmb8xHSbE
 
-        let roomId = 'edf441b3-7415-49c4-9557-273cb93bc746'; //It will create room automatically if not set
-        let pinHash = 'LJj4W2Cz-nG3U-lb0R-TAaY-o7Thmb8xHSbE';//'967ca05f-7fab-a205-5913-39393bbbe923';
+        let roomId = "c22ada04-6c95-4524-91d8-e915bcef2e61"; //It will create room automatically if not set
+        let pinHash = "OayoOVzK-XmWr-BTID-fVwH-eH44Tn3xSWeR";//'967ca05f-7fab-a205-5913-39393bbbe923';
 
 
         let participants = document.querySelector('.participants');
@@ -61,29 +64,39 @@
 
             console.log('participantData', isRemote, data);
 
-            let id = `part_${data.id}`;
-            let el = document.querySelector(`.${id}`);
-            if(!el) {
-                el = document.createElement("video");
-                el.autoplay = true;
-                el.playsInline = true;
-                el.muted = !isRemote;
-                el.controls = true;
-                el.className = id;
-                participants.appendChild(el);
+            this.removeParticipant({id: data.id})
+
+            if(!data.stream) {
+                return;
             }
 
-            try {
-                el.srcObject = data.stream;
-            } catch (error) {
-                el.src = URL.createObjectURL(data.stream);
+            for(let key in data.streamMap) {
+                let tracks = data.stream.getTracks().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 el = document.createElement("video");
+                    el.autoplay = true;
+                    el.playsInline = true;
+                    el.muted = !isRemote;
+                    el.controls = true;
+                    el.className = id;
+                    participants.appendChild(el);
+                    try {
+                        el.srcObject = stream;
+                    } catch (error) {
+                        el.src = URL.createObjectURL(stream);
+                    }
+                }
             }
         }
 
         function removeParticipant(data) {
-            let id = `part_${data.id}`;
-            let el = document.querySelector(`.${id}`);
-            el && el.parentNode.removeChild(el);
+            let id = `_p${data.id}`;
+            let els = document.querySelectorAll(`.${id}`);
+            console.log(id,els);
+            els.length && els.forEach(el => el.parentNode.removeChild(el));
         }
 
 
@@ -92,22 +105,42 @@
         }
 
         function startRoom() {
+            let sess = Instance.room.getSessionByConstructId(constructId);
+            sess.connect()
+                    .then(() => Instance.utils.getUserStream({hasVideo:true, hasAudio: true}))
+                    .then((stream) => sess.publishLocal(stream))
+        }
+
+        function startRoom2() {
             let sess = Instance.room.getSessionByConstructId(constructId);
             sess.connect()
                     .then(() => Instance.utils.getUserStream({hasVideo:true}))
                     .then((stream) => sess.publishLocal(stream))
+                    .then(() => Instance.utils.getDisplayMedia())
+                    .then((stream) => sess.publishLocal(stream, 'screen'))
         }
 
         function unpublish() {
             Instance.room.getSessionByConstructId(constructId).unpublishLocal()
         }
 
+        function publishBlank() {
+            let sess = Instance.room.getSessionByConstructId(constructId);
+            sess.publishLocal(null)
+        }
+
         function publish(vDeviceId) {
             let sess = Instance.room.getSessionByConstructId(constructId);
             Instance.utils.getUserStream({hasVideo:true, vDeviceId})
                     .then(stream => sess.publishLocal(stream))
         }
 
+        function publishScreen(vDeviceId) {
+            let sess = Instance.room.getSessionByConstructId(constructId);
+            Instance.utils.getDisplayMedia()
+                    .then((stream) => sess.publishLocal(stream, 'screen'))
+        }
+
         function toggleVideo() {
             Instance.room.getSessionByConstructId(constructId).toggleVideo()
         }
@@ -199,19 +232,19 @@
                 });
 
                 session.$on('addLocalParticipant', (participant) => {
-                    createParticipant(participant); // our stream is available
+                    createParticipant(participant); // our participant is available or updated
                 });
 
                 session.$on('removeLocalParticipant', (participant) => {
-                    removeParticipant(participant); // our stream is gone
+                    removeParticipant(participant); // our participant is gone
                 });
 
                 session.$on('addRemoteParticipant', (participant) => {
-                    createParticipant(participant, true); // remote stream is available (someone else published himself)
+                    createParticipant(participant, true); // remote participant is available or updated
                 });
 
                 session.$on('removeRemoteParticipant', (participant) => {
-                    removeParticipant(participant, true); // remote stream is gone
+                    removeParticipant(participant, true); // remote participant is gone
                 });
 
                 session.$on('userUpdate', (userId) => {
@@ -238,12 +271,12 @@
                     console.log('remoteMuted', data); // remote participant muted it's video/audio stream
                 });
 
-                session.$on('localHasVideo', (value) => {
-                    console.log('localHasVideo', value); // local stream contains video track
+                session.$on('localHasVideo', (value, source) => {
+                    console.log('localHasVideo', value, source); // local stream contains video track
                 });
 
-                session.$on('localHasAudio', (value) => {
-                    console.log('localHasAudio', value); // local stream contains audio track
+                session.$on('localHasAudio', (value, source) => {
+                    console.log('localHasAudio', value, source); // local stream contains audio track
                 });
 
                 session.$on('observerIds', (value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.6.14",
+  "version": "2.6.21",
   "description": "Javascript SDK for Reactoo",
   "main": "src/index.js",
   "unpkg": "dist/watchtogether-sdk.min.js",
@@ -42,8 +42,6 @@
     "yargs": "^10.1.2"
   },
   "dependencies": {
-    "@fingerprintjs/fingerprintjs": "^3.3.2",
-    "@fingerprintjs/fingerprintjs-pro": "^3.8.1",
     "aws-iot-device-sdk": "^2.2.11",
     "serialize-error": "9.1.0",
     "swagger-client": "3.18.0",

package/src/models/room-session.js

@@ -46,8 +46,8 @@ let roomSession = function ({roomId, pinHash, role}, room, wt) {
 		}, 2000);
 	});
 
-	room.on('localMuted', ({type, value}) => {
-		___.sendSystemMessage('remote_muted', {type, value})
+	room.on('localMuted', ({type, value, source, mid}) => {
+		___.sendSystemMessage('remote_muted', {type, value, source, mid})
 	});
 	room.on('data', (data) => {
 		___.__parseDataEvents(data);
@@ -90,10 +90,6 @@ let roomSession = function ({roomId, pinHash, role}, room, wt) {
 			return wt.room.destroySession(room.constructId)
 		},
 
-		iceRestart: function () {
-			return room._iceRestart(room.handleId);
-		},
-
 		connect: function ({reactooRoomId = null} = {}) {
 			emitter.emit('connecting', true);
 			clearTimeout(alpTimeoutId);
@@ -324,8 +320,8 @@ let roomSession = function ({roomId, pinHash, role}, room, wt) {
 			}
 		},
 
-		publishLocal: function (stream = null) {
-			return room.publishLocal(stream)
+		publishLocal: function (stream = null, source) {
+			return room.publishLocal(stream, source)
 		},
 
 		unpublishLocal: () => {
@@ -388,8 +384,20 @@ let roomSession = function ({roomId, pinHash, role}, room, wt) {
 		},
 
 		__sendMuteStatus: function () {
-			this.sendSystemMessage('remote_muted', {type: 'video', value: room.isVideoMuted});
-			this.sendSystemMessage('remote_muted', {type: 'audio', value: room.isAudioMuted});
+			for(const val of room.isMuted) {
+				this.sendSystemMessage('remote_muted', {...val});
+			}
+		},
+
+		__test: function (value) {
+			return room.sendMessage(room.handleId, {
+				body: {
+					request: "data",
+					room: room.roomId,
+					timestamp: new Date().getTime(),
+					text: JSON.stringify(value),
+				}
+			});
 		},
 
 		$on: (key, callback, that) => {

package/src/models/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 
-const getConstraints = ({
+const getUserMediaConstraints = ({
 
                             hasVideo,
                             hasAudio = true,
@@ -67,7 +67,7 @@ export default {
 
         if(stream) {
 
-            let fullConstraints = getConstraints({
+            let fullConstraints = getUserMediaConstraints({
                 hasVideo: true,
                 hasAudio: true,
                 autoGainControl, echoCancellation, noiseSuppression, channelCount, isHd, lfps
@@ -109,7 +109,7 @@ export default {
                   } = {}
     ) {
 
-        let fullConstraints = getConstraints({
+        let fullConstraints = getUserMediaConstraints({
             hasVideo, hasAudio, isHd, aDeviceId, vDeviceId, lfps, autoGainControl, echoCancellation, noiseSuppression, channelCount
         });
 
@@ -151,5 +151,20 @@ export default {
         };
 
         return navigator.mediaDevices.getUserMedia(fullConstraints);
+    },
+    getDisplayMedia() {
+
+        const constraints = {
+            video: {
+                cursor: "always",
+                displaySurface: "monitor",
+                logicalSurface: false
+            },
+            surfaceSwitching: "include",
+            selfBrowserSurface: "exclude",
+            systemAudio: "exclude",
+        };
+
+        return navigator.mediaDevices.getDisplayMedia(constraints);
     }
 }

package/src/modules/wt-fingerprint.js

@@ -0,0 +1,46 @@
+const identifierLocalStorageKey = 'reactoo-id';
+
+const getFingerPrint = function (instanceType = '', salt = '') {
+    return Promise.resolve(generateFingerprint(getRandomNumberGenerator(getId() + instanceType + salt)));
+}
+
+const generateFingerprint = function (randomNumberGenerator) {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = (randomNumberGenerator()*16)%16 | 0;
+        return (c==='x' ? r : (r&0x3|0x8)).toString(16);
+    });
+};
+
+const getId = function () {
+    let id = localStorage.getItem(identifierLocalStorageKey);
+    if (!id) {
+        id = Math.round(Math.random() * Math.pow(10, 16)) + '';
+        localStorage.setItem(identifierLocalStorageKey, id);
+    }
+    return id;
+}
+
+const getRandomNumberGenerator = function (seed) {
+    seed = (seed || Math.floor(Math.random() * 10000000000000000)) + '';
+
+    // https://stackoverflow.com/a/47593316/3162532 - xmur3
+    let i, h;
+    for (i = 0, h = 1779033703 ^ seed.length; i < seed.length; i++) {
+        h = Math.imul(h ^ seed.charCodeAt(i), 3432918353);
+        h = h << 13 | h >>> 19;
+    }
+
+    h = Math.imul(h ^ h >>> 16, 2246822507);
+    h = Math.imul(h ^ h >>> 13, 3266489909);
+    seed = (h ^ h >>> 16) >>> 0;
+
+    // https://stackoverflow.com/a/47593316/3162532 - Mulberry32
+    return function () {
+        let t = seed += 0x6D2B79F5;
+        t = Math.imul(t ^ t >>> 15, t | 1);
+        t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+        return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    };
+}
+
+export {getFingerPrint};