@whereby.com/browser-sdk 2.0.0-alpha6 → 2.0.0-alpha7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib.cjs.js +47 -36
- package/dist/lib.esm.js +47 -36
- package/dist/types.d.ts +88 -8
- package/dist/v2-alpha7.js +43 -0
- package/package.json +2 -2
- package/dist/v2-alpha6.js +0 -105
package/dist/lib.cjs.js
CHANGED
|
@@ -130,7 +130,7 @@ heresy.define("WherebyEmbed", {
|
|
|
130
130
|
if (!subdomain)
|
|
131
131
|
return this.html `Whereby: Missing subdomain attr.`;
|
|
132
132
|
const url = new URL(room, `https://${subdomain}.whereby.com`);
|
|
133
|
-
Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-
|
|
133
|
+
Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha7", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
|
|
134
134
|
// add to URL if set in any way
|
|
135
135
|
(o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
|
|
136
136
|
if (!url.searchParams.has(k) && typeof v === "string") {
|
|
@@ -293,7 +293,7 @@ class LocalMedia extends TypedLocalMediaEventTarget {
|
|
|
293
293
|
}
|
|
294
294
|
}
|
|
295
295
|
|
|
296
|
-
const initialState = {
|
|
296
|
+
const initialState$1 = {
|
|
297
297
|
cameraDeviceError: null,
|
|
298
298
|
cameraDevices: [],
|
|
299
299
|
isSettingCameraDevice: false,
|
|
@@ -334,7 +334,7 @@ function reducer$1(state, action) {
|
|
|
334
334
|
}
|
|
335
335
|
function useLocalMedia(constraints = { audio: true, video: true }) {
|
|
336
336
|
const [localMedia] = React.useState(() => new LocalMedia(constraints));
|
|
337
|
-
const [state, dispatch] = React.useReducer(reducer$1, initialState);
|
|
337
|
+
const [state, dispatch] = React.useReducer(reducer$1, initialState$1);
|
|
338
338
|
React.useEffect(() => {
|
|
339
339
|
localMedia.addEventListener("device_list_updated", (e) => {
|
|
340
340
|
const { cameraDevices, microphoneDevices, speakerDevices } = e.detail;
|
|
@@ -531,10 +531,10 @@ class ServerSocket {
|
|
|
531
531
|
}
|
|
532
532
|
|
|
533
533
|
this._socket = io__default["default"](hostName, options);
|
|
534
|
-
this._socket.on("reconnect", () => {
|
|
534
|
+
this._socket.io.on("reconnect", () => {
|
|
535
535
|
this._socket.sendBuffer = [];
|
|
536
536
|
});
|
|
537
|
-
this._socket.on("reconnect_attempt", () => {
|
|
537
|
+
this._socket.io.on("reconnect_attempt", () => {
|
|
538
538
|
if (this._wasConnectedUsingWebsocket) {
|
|
539
539
|
this._socket.io.opts.transports = ["websocket"];
|
|
540
540
|
// only fallback to polling if not safari
|
|
@@ -592,6 +592,10 @@ class ServerSocket {
|
|
|
592
592
|
);
|
|
593
593
|
}
|
|
594
594
|
|
|
595
|
+
getManager() {
|
|
596
|
+
return this._socket.io;
|
|
597
|
+
}
|
|
598
|
+
|
|
595
599
|
isConnecting() {
|
|
596
600
|
return this._socket && this._socket.connecting;
|
|
597
601
|
}
|
|
@@ -2225,10 +2229,11 @@ class VegaParser {
|
|
|
2225
2229
|
}
|
|
2226
2230
|
|
|
2227
2231
|
class VegaConnection extends EventEmitter.EventEmitter {
|
|
2228
|
-
constructor(wsUrl, logger) {
|
|
2232
|
+
constructor(wsUrl, logger, protocol = "whereby-sfu#v4") {
|
|
2229
2233
|
super();
|
|
2230
2234
|
|
|
2231
2235
|
this.wsUrl = wsUrl;
|
|
2236
|
+
this.protocol = protocol;
|
|
2232
2237
|
this.logger = logger;
|
|
2233
2238
|
|
|
2234
2239
|
// This is the map of sent requests that are waiting for a response
|
|
@@ -2237,7 +2242,7 @@ class VegaConnection extends EventEmitter.EventEmitter {
|
|
|
2237
2242
|
}
|
|
2238
2243
|
|
|
2239
2244
|
_setupSocket() {
|
|
2240
|
-
this.socket = new WebSocket(this.wsUrl,
|
|
2245
|
+
this.socket = new WebSocket(this.wsUrl, this.protocol);
|
|
2241
2246
|
this.socket.onopen = this._onOpen.bind(this);
|
|
2242
2247
|
this.socket.onmessage = this._onMessage.bind(this);
|
|
2243
2248
|
this.socket.onclose = this._onClose.bind(this);
|
|
@@ -2257,7 +2262,9 @@ class VegaConnection extends EventEmitter.EventEmitter {
|
|
|
2257
2262
|
}
|
|
2258
2263
|
|
|
2259
2264
|
close() {
|
|
2260
|
-
this.socket
|
|
2265
|
+
if (!this.socket) return;
|
|
2266
|
+
|
|
2267
|
+
this.socket.close();
|
|
2261
2268
|
}
|
|
2262
2269
|
|
|
2263
2270
|
_onOpen() {
|
|
@@ -2269,11 +2276,15 @@ class VegaConnection extends EventEmitter.EventEmitter {
|
|
|
2269
2276
|
_onMessage(event) {
|
|
2270
2277
|
const socketMessage = VegaParser.parse(event.data);
|
|
2271
2278
|
|
|
2279
|
+
if (!socketMessage) {
|
|
2280
|
+
return this.logger.log("VegaConnectionManager: Received invalid message", event.data);
|
|
2281
|
+
}
|
|
2282
|
+
|
|
2272
2283
|
this.logger.log("VegaConnectionManager: Received message", socketMessage);
|
|
2273
2284
|
|
|
2274
|
-
if (socketMessage
|
|
2285
|
+
if (socketMessage.response) {
|
|
2275
2286
|
this._handleResponse(socketMessage);
|
|
2276
|
-
} else if (socketMessage
|
|
2287
|
+
} else if (socketMessage.message) {
|
|
2277
2288
|
this.emit("message", socketMessage);
|
|
2278
2289
|
}
|
|
2279
2290
|
}
|
|
@@ -2380,7 +2391,7 @@ const VIDEO_SETTINGS_VP9 = {
|
|
|
2380
2391
|
codecOptions: {
|
|
2381
2392
|
videoGoogleStartBitrate: 500,
|
|
2382
2393
|
},
|
|
2383
|
-
encodings: [{ scalabilityMode: "
|
|
2394
|
+
encodings: [{ scalabilityMode: "L3T2_KEY", networkPriority: "high" }],
|
|
2384
2395
|
};
|
|
2385
2396
|
|
|
2386
2397
|
const SCREEN_SHARE_SETTINGS = {
|
|
@@ -2389,13 +2400,13 @@ const SCREEN_SHARE_SETTINGS = {
|
|
|
2389
2400
|
|
|
2390
2401
|
const SCREEN_SHARE_SIMULCAST_SETTINGS = {
|
|
2391
2402
|
encodings: [
|
|
2392
|
-
{ dtx: true, maxBitrate: 500000 },
|
|
2393
|
-
{ dtx: true, maxBitrate: 1500000 },
|
|
2403
|
+
{ scaleResolutionDownBy: 2, dtx: true, maxBitrate: 500000 },
|
|
2404
|
+
{ scaleResolutionDownBy: 1, dtx: true, maxBitrate: 1500000 },
|
|
2394
2405
|
],
|
|
2395
2406
|
};
|
|
2396
2407
|
|
|
2397
2408
|
const SCREEN_SHARE_SETTINGS_VP9 = {
|
|
2398
|
-
encodings: [{ scalabilityMode: "
|
|
2409
|
+
encodings: [{ scalabilityMode: "L1T1", dtx: true, networkPriority: "high" }],
|
|
2399
2410
|
};
|
|
2400
2411
|
|
|
2401
2412
|
const getMediaSettings = (kind, isScreenShare, features) => {
|
|
@@ -2411,8 +2422,8 @@ const getMediaSettings = (kind, isScreenShare, features) => {
|
|
|
2411
2422
|
|
|
2412
2423
|
return SCREEN_SHARE_SETTINGS;
|
|
2413
2424
|
} else {
|
|
2414
|
-
if (lowDataModeEnabled) return VIDEO_SETTINGS_SD;
|
|
2415
2425
|
if (vp9On) return VIDEO_SETTINGS_VP9;
|
|
2426
|
+
if (lowDataModeEnabled) return VIDEO_SETTINGS_SD;
|
|
2416
2427
|
|
|
2417
2428
|
return VIDEO_SETTINGS_HD;
|
|
2418
2429
|
}
|
|
@@ -5271,7 +5282,7 @@ const SIGNAL_BASE_URL = "wss://signal.appearin.net";
|
|
|
5271
5282
|
const NON_PERSON_ROLES = ["recorder", "streamer"];
|
|
5272
5283
|
function createSocket() {
|
|
5273
5284
|
const parsedUrl = new URL(SIGNAL_BASE_URL);
|
|
5274
|
-
const path = `${parsedUrl.pathname.replace(/^\/$/, "")}/protocol/socket.io/
|
|
5285
|
+
const path = `${parsedUrl.pathname.replace(/^\/$/, "")}/protocol/socket.io/v4`;
|
|
5275
5286
|
const SOCKET_HOST = parsedUrl.origin;
|
|
5276
5287
|
const socketConf = {
|
|
5277
5288
|
host: SOCKET_HOST,
|
|
@@ -5479,8 +5490,6 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5479
5490
|
if (this._ownsLocalMedia) {
|
|
5480
5491
|
yield this.localMedia.start();
|
|
5481
5492
|
}
|
|
5482
|
-
// TODO: Get room permissions
|
|
5483
|
-
// TODO: Get room features
|
|
5484
5493
|
const webrtcProvider = {
|
|
5485
5494
|
getMediaConstraints: () => ({
|
|
5486
5495
|
audio: this.localMedia.isMicrophoneEnabled(),
|
|
@@ -5512,11 +5521,12 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5512
5521
|
}
|
|
5513
5522
|
// Identify device on signal connection
|
|
5514
5523
|
const deviceCredentials = yield this.credentialsService.getCredentials();
|
|
5524
|
+
this.signalSocket.connect();
|
|
5515
5525
|
// TODO: Handle connection and failed connection properly
|
|
5516
|
-
|
|
5526
|
+
this.signalSocket.on("connect", () => {
|
|
5517
5527
|
this.logger.log("Connected to signal socket");
|
|
5518
5528
|
this.signalSocket.emit("identify_device", { deviceCredentials });
|
|
5519
|
-
}
|
|
5529
|
+
});
|
|
5520
5530
|
this.signalSocket.once("device_identified", () => {
|
|
5521
5531
|
this.signalSocket.emit("join_room", {
|
|
5522
5532
|
avatarUrl: null,
|
|
@@ -5593,6 +5603,11 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5593
5603
|
}
|
|
5594
5604
|
}
|
|
5595
5605
|
|
|
5606
|
+
const initialState = {
|
|
5607
|
+
isJoining: false,
|
|
5608
|
+
joinError: null,
|
|
5609
|
+
remoteParticipants: [],
|
|
5610
|
+
};
|
|
5596
5611
|
function updateParticipant(remoteParticipants, participantId, updates) {
|
|
5597
5612
|
const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
|
|
5598
5613
|
if (!existingParticipant) {
|
|
@@ -5636,19 +5651,14 @@ function reducer(state, action) {
|
|
|
5636
5651
|
default:
|
|
5637
5652
|
throw state;
|
|
5638
5653
|
}
|
|
5639
|
-
}
|
|
5640
|
-
|
|
5654
|
+
}
|
|
5641
5655
|
function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
5642
|
-
const [roomConnection
|
|
5643
|
-
const [state, dispatch] = React.useReducer(reducer, { remoteParticipants: [] });
|
|
5644
|
-
React.useEffect(() => {
|
|
5656
|
+
const [roomConnection] = React.useState(() => {
|
|
5645
5657
|
var _a;
|
|
5646
|
-
|
|
5647
|
-
}
|
|
5658
|
+
return new RoomConnection(roomUrl, Object.assign(Object.assign({}, roomConnectionOptions), { localMedia: ((_a = roomConnectionOptions === null || roomConnectionOptions === void 0 ? void 0 : roomConnectionOptions.localMedia) === null || _a === void 0 ? void 0 : _a._ref) || undefined }));
|
|
5659
|
+
});
|
|
5660
|
+
const [state, dispatch] = React.useReducer(reducer, initialState);
|
|
5648
5661
|
React.useEffect(() => {
|
|
5649
|
-
if (!roomConnection) {
|
|
5650
|
-
return;
|
|
5651
|
-
}
|
|
5652
5662
|
roomConnection.addEventListener("participant_audio_enabled", (e) => {
|
|
5653
5663
|
const { participantId, isAudioEnabled } = e.detail;
|
|
5654
5664
|
dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
|
|
@@ -5681,10 +5691,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5681
5691
|
return () => {
|
|
5682
5692
|
roomConnection.leave();
|
|
5683
5693
|
};
|
|
5684
|
-
}, [
|
|
5685
|
-
return
|
|
5694
|
+
}, []);
|
|
5695
|
+
return {
|
|
5686
5696
|
state,
|
|
5687
|
-
{
|
|
5697
|
+
actions: {
|
|
5688
5698
|
toggleCamera: (enabled) => {
|
|
5689
5699
|
roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleCameraEnabled(enabled);
|
|
5690
5700
|
},
|
|
@@ -5696,13 +5706,14 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5696
5706
|
dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
|
|
5697
5707
|
},
|
|
5698
5708
|
},
|
|
5699
|
-
{
|
|
5709
|
+
components: {
|
|
5700
5710
|
VideoView,
|
|
5701
5711
|
},
|
|
5702
|
-
|
|
5712
|
+
_ref: roomConnection,
|
|
5713
|
+
};
|
|
5703
5714
|
}
|
|
5704
5715
|
|
|
5705
|
-
const sdkVersion = "2.0.0-
|
|
5716
|
+
const sdkVersion = "2.0.0-alpha7";
|
|
5706
5717
|
|
|
5707
5718
|
exports.VideoView = VideoView;
|
|
5708
5719
|
exports.sdkVersion = sdkVersion;
|
package/dist/lib.esm.js
CHANGED
|
@@ -115,7 +115,7 @@ define("WherebyEmbed", {
|
|
|
115
115
|
if (!subdomain)
|
|
116
116
|
return this.html `Whereby: Missing subdomain attr.`;
|
|
117
117
|
const url = new URL(room, `https://${subdomain}.whereby.com`);
|
|
118
|
-
Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-
|
|
118
|
+
Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha7", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
|
|
119
119
|
// add to URL if set in any way
|
|
120
120
|
(o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
|
|
121
121
|
if (!url.searchParams.has(k) && typeof v === "string") {
|
|
@@ -278,7 +278,7 @@ class LocalMedia extends TypedLocalMediaEventTarget {
|
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
|
|
281
|
-
const initialState = {
|
|
281
|
+
const initialState$1 = {
|
|
282
282
|
cameraDeviceError: null,
|
|
283
283
|
cameraDevices: [],
|
|
284
284
|
isSettingCameraDevice: false,
|
|
@@ -319,7 +319,7 @@ function reducer$1(state, action) {
|
|
|
319
319
|
}
|
|
320
320
|
function useLocalMedia(constraints = { audio: true, video: true }) {
|
|
321
321
|
const [localMedia] = useState(() => new LocalMedia(constraints));
|
|
322
|
-
const [state, dispatch] = useReducer(reducer$1, initialState);
|
|
322
|
+
const [state, dispatch] = useReducer(reducer$1, initialState$1);
|
|
323
323
|
useEffect(() => {
|
|
324
324
|
localMedia.addEventListener("device_list_updated", (e) => {
|
|
325
325
|
const { cameraDevices, microphoneDevices, speakerDevices } = e.detail;
|
|
@@ -516,10 +516,10 @@ class ServerSocket {
|
|
|
516
516
|
}
|
|
517
517
|
|
|
518
518
|
this._socket = io(hostName, options);
|
|
519
|
-
this._socket.on("reconnect", () => {
|
|
519
|
+
this._socket.io.on("reconnect", () => {
|
|
520
520
|
this._socket.sendBuffer = [];
|
|
521
521
|
});
|
|
522
|
-
this._socket.on("reconnect_attempt", () => {
|
|
522
|
+
this._socket.io.on("reconnect_attempt", () => {
|
|
523
523
|
if (this._wasConnectedUsingWebsocket) {
|
|
524
524
|
this._socket.io.opts.transports = ["websocket"];
|
|
525
525
|
// only fallback to polling if not safari
|
|
@@ -577,6 +577,10 @@ class ServerSocket {
|
|
|
577
577
|
);
|
|
578
578
|
}
|
|
579
579
|
|
|
580
|
+
getManager() {
|
|
581
|
+
return this._socket.io;
|
|
582
|
+
}
|
|
583
|
+
|
|
580
584
|
isConnecting() {
|
|
581
585
|
return this._socket && this._socket.connecting;
|
|
582
586
|
}
|
|
@@ -2210,10 +2214,11 @@ class VegaParser {
|
|
|
2210
2214
|
}
|
|
2211
2215
|
|
|
2212
2216
|
class VegaConnection extends EventEmitter {
|
|
2213
|
-
constructor(wsUrl, logger) {
|
|
2217
|
+
constructor(wsUrl, logger, protocol = "whereby-sfu#v4") {
|
|
2214
2218
|
super();
|
|
2215
2219
|
|
|
2216
2220
|
this.wsUrl = wsUrl;
|
|
2221
|
+
this.protocol = protocol;
|
|
2217
2222
|
this.logger = logger;
|
|
2218
2223
|
|
|
2219
2224
|
// This is the map of sent requests that are waiting for a response
|
|
@@ -2222,7 +2227,7 @@ class VegaConnection extends EventEmitter {
|
|
|
2222
2227
|
}
|
|
2223
2228
|
|
|
2224
2229
|
_setupSocket() {
|
|
2225
|
-
this.socket = new WebSocket(this.wsUrl,
|
|
2230
|
+
this.socket = new WebSocket(this.wsUrl, this.protocol);
|
|
2226
2231
|
this.socket.onopen = this._onOpen.bind(this);
|
|
2227
2232
|
this.socket.onmessage = this._onMessage.bind(this);
|
|
2228
2233
|
this.socket.onclose = this._onClose.bind(this);
|
|
@@ -2242,7 +2247,9 @@ class VegaConnection extends EventEmitter {
|
|
|
2242
2247
|
}
|
|
2243
2248
|
|
|
2244
2249
|
close() {
|
|
2245
|
-
this.socket
|
|
2250
|
+
if (!this.socket) return;
|
|
2251
|
+
|
|
2252
|
+
this.socket.close();
|
|
2246
2253
|
}
|
|
2247
2254
|
|
|
2248
2255
|
_onOpen() {
|
|
@@ -2254,11 +2261,15 @@ class VegaConnection extends EventEmitter {
|
|
|
2254
2261
|
_onMessage(event) {
|
|
2255
2262
|
const socketMessage = VegaParser.parse(event.data);
|
|
2256
2263
|
|
|
2264
|
+
if (!socketMessage) {
|
|
2265
|
+
return this.logger.log("VegaConnectionManager: Received invalid message", event.data);
|
|
2266
|
+
}
|
|
2267
|
+
|
|
2257
2268
|
this.logger.log("VegaConnectionManager: Received message", socketMessage);
|
|
2258
2269
|
|
|
2259
|
-
if (socketMessage
|
|
2270
|
+
if (socketMessage.response) {
|
|
2260
2271
|
this._handleResponse(socketMessage);
|
|
2261
|
-
} else if (socketMessage
|
|
2272
|
+
} else if (socketMessage.message) {
|
|
2262
2273
|
this.emit("message", socketMessage);
|
|
2263
2274
|
}
|
|
2264
2275
|
}
|
|
@@ -2365,7 +2376,7 @@ const VIDEO_SETTINGS_VP9 = {
|
|
|
2365
2376
|
codecOptions: {
|
|
2366
2377
|
videoGoogleStartBitrate: 500,
|
|
2367
2378
|
},
|
|
2368
|
-
encodings: [{ scalabilityMode: "
|
|
2379
|
+
encodings: [{ scalabilityMode: "L3T2_KEY", networkPriority: "high" }],
|
|
2369
2380
|
};
|
|
2370
2381
|
|
|
2371
2382
|
const SCREEN_SHARE_SETTINGS = {
|
|
@@ -2374,13 +2385,13 @@ const SCREEN_SHARE_SETTINGS = {
|
|
|
2374
2385
|
|
|
2375
2386
|
const SCREEN_SHARE_SIMULCAST_SETTINGS = {
|
|
2376
2387
|
encodings: [
|
|
2377
|
-
{ dtx: true, maxBitrate: 500000 },
|
|
2378
|
-
{ dtx: true, maxBitrate: 1500000 },
|
|
2388
|
+
{ scaleResolutionDownBy: 2, dtx: true, maxBitrate: 500000 },
|
|
2389
|
+
{ scaleResolutionDownBy: 1, dtx: true, maxBitrate: 1500000 },
|
|
2379
2390
|
],
|
|
2380
2391
|
};
|
|
2381
2392
|
|
|
2382
2393
|
const SCREEN_SHARE_SETTINGS_VP9 = {
|
|
2383
|
-
encodings: [{ scalabilityMode: "
|
|
2394
|
+
encodings: [{ scalabilityMode: "L1T1", dtx: true, networkPriority: "high" }],
|
|
2384
2395
|
};
|
|
2385
2396
|
|
|
2386
2397
|
const getMediaSettings = (kind, isScreenShare, features) => {
|
|
@@ -2396,8 +2407,8 @@ const getMediaSettings = (kind, isScreenShare, features) => {
|
|
|
2396
2407
|
|
|
2397
2408
|
return SCREEN_SHARE_SETTINGS;
|
|
2398
2409
|
} else {
|
|
2399
|
-
if (lowDataModeEnabled) return VIDEO_SETTINGS_SD;
|
|
2400
2410
|
if (vp9On) return VIDEO_SETTINGS_VP9;
|
|
2411
|
+
if (lowDataModeEnabled) return VIDEO_SETTINGS_SD;
|
|
2401
2412
|
|
|
2402
2413
|
return VIDEO_SETTINGS_HD;
|
|
2403
2414
|
}
|
|
@@ -5256,7 +5267,7 @@ const SIGNAL_BASE_URL = "wss://signal.appearin.net";
|
|
|
5256
5267
|
const NON_PERSON_ROLES = ["recorder", "streamer"];
|
|
5257
5268
|
function createSocket() {
|
|
5258
5269
|
const parsedUrl = new URL(SIGNAL_BASE_URL);
|
|
5259
|
-
const path = `${parsedUrl.pathname.replace(/^\/$/, "")}/protocol/socket.io/
|
|
5270
|
+
const path = `${parsedUrl.pathname.replace(/^\/$/, "")}/protocol/socket.io/v4`;
|
|
5260
5271
|
const SOCKET_HOST = parsedUrl.origin;
|
|
5261
5272
|
const socketConf = {
|
|
5262
5273
|
host: SOCKET_HOST,
|
|
@@ -5464,8 +5475,6 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5464
5475
|
if (this._ownsLocalMedia) {
|
|
5465
5476
|
yield this.localMedia.start();
|
|
5466
5477
|
}
|
|
5467
|
-
// TODO: Get room permissions
|
|
5468
|
-
// TODO: Get room features
|
|
5469
5478
|
const webrtcProvider = {
|
|
5470
5479
|
getMediaConstraints: () => ({
|
|
5471
5480
|
audio: this.localMedia.isMicrophoneEnabled(),
|
|
@@ -5497,11 +5506,12 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5497
5506
|
}
|
|
5498
5507
|
// Identify device on signal connection
|
|
5499
5508
|
const deviceCredentials = yield this.credentialsService.getCredentials();
|
|
5509
|
+
this.signalSocket.connect();
|
|
5500
5510
|
// TODO: Handle connection and failed connection properly
|
|
5501
|
-
|
|
5511
|
+
this.signalSocket.on("connect", () => {
|
|
5502
5512
|
this.logger.log("Connected to signal socket");
|
|
5503
5513
|
this.signalSocket.emit("identify_device", { deviceCredentials });
|
|
5504
|
-
}
|
|
5514
|
+
});
|
|
5505
5515
|
this.signalSocket.once("device_identified", () => {
|
|
5506
5516
|
this.signalSocket.emit("join_room", {
|
|
5507
5517
|
avatarUrl: null,
|
|
@@ -5578,6 +5588,11 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5578
5588
|
}
|
|
5579
5589
|
}
|
|
5580
5590
|
|
|
5591
|
+
const initialState = {
|
|
5592
|
+
isJoining: false,
|
|
5593
|
+
joinError: null,
|
|
5594
|
+
remoteParticipants: [],
|
|
5595
|
+
};
|
|
5581
5596
|
function updateParticipant(remoteParticipants, participantId, updates) {
|
|
5582
5597
|
const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
|
|
5583
5598
|
if (!existingParticipant) {
|
|
@@ -5621,19 +5636,14 @@ function reducer(state, action) {
|
|
|
5621
5636
|
default:
|
|
5622
5637
|
throw state;
|
|
5623
5638
|
}
|
|
5624
|
-
}
|
|
5625
|
-
|
|
5639
|
+
}
|
|
5626
5640
|
function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
5627
|
-
const [roomConnection
|
|
5628
|
-
const [state, dispatch] = useReducer(reducer, { remoteParticipants: [] });
|
|
5629
|
-
useEffect(() => {
|
|
5641
|
+
const [roomConnection] = useState(() => {
|
|
5630
5642
|
var _a;
|
|
5631
|
-
|
|
5632
|
-
}
|
|
5643
|
+
return new RoomConnection(roomUrl, Object.assign(Object.assign({}, roomConnectionOptions), { localMedia: ((_a = roomConnectionOptions === null || roomConnectionOptions === void 0 ? void 0 : roomConnectionOptions.localMedia) === null || _a === void 0 ? void 0 : _a._ref) || undefined }));
|
|
5644
|
+
});
|
|
5645
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
|
5633
5646
|
useEffect(() => {
|
|
5634
|
-
if (!roomConnection) {
|
|
5635
|
-
return;
|
|
5636
|
-
}
|
|
5637
5647
|
roomConnection.addEventListener("participant_audio_enabled", (e) => {
|
|
5638
5648
|
const { participantId, isAudioEnabled } = e.detail;
|
|
5639
5649
|
dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
|
|
@@ -5666,10 +5676,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5666
5676
|
return () => {
|
|
5667
5677
|
roomConnection.leave();
|
|
5668
5678
|
};
|
|
5669
|
-
}, [
|
|
5670
|
-
return
|
|
5679
|
+
}, []);
|
|
5680
|
+
return {
|
|
5671
5681
|
state,
|
|
5672
|
-
{
|
|
5682
|
+
actions: {
|
|
5673
5683
|
toggleCamera: (enabled) => {
|
|
5674
5684
|
roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleCameraEnabled(enabled);
|
|
5675
5685
|
},
|
|
@@ -5681,12 +5691,13 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5681
5691
|
dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
|
|
5682
5692
|
},
|
|
5683
5693
|
},
|
|
5684
|
-
{
|
|
5694
|
+
components: {
|
|
5685
5695
|
VideoView,
|
|
5686
5696
|
},
|
|
5687
|
-
|
|
5697
|
+
_ref: roomConnection,
|
|
5698
|
+
};
|
|
5688
5699
|
}
|
|
5689
5700
|
|
|
5690
|
-
const sdkVersion = "2.0.0-
|
|
5701
|
+
const sdkVersion = "2.0.0-alpha7";
|
|
5691
5702
|
|
|
5692
5703
|
export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };
|
package/dist/types.d.ts
CHANGED
|
@@ -158,15 +158,92 @@ interface RoomConnectionOptions {
|
|
|
158
158
|
roomKey?: string;
|
|
159
159
|
logger?: Logger;
|
|
160
160
|
localMedia?: LocalMedia;
|
|
161
|
+
}
|
|
162
|
+
type RoomJoinedEvent = {
|
|
163
|
+
localParticipant: LocalParticipant;
|
|
164
|
+
remoteParticipants: RemoteParticipant[];
|
|
165
|
+
};
|
|
166
|
+
type ParticipantJoinedEvent = {
|
|
167
|
+
remoteParticipant: RemoteParticipant;
|
|
168
|
+
};
|
|
169
|
+
type ParticipantLeftEvent = {
|
|
170
|
+
participantId: string;
|
|
171
|
+
};
|
|
172
|
+
type ParticipantStreamAddedEvent = {
|
|
173
|
+
participantId: string;
|
|
174
|
+
stream: MediaStream;
|
|
175
|
+
};
|
|
176
|
+
type ParticipantAudioEnabledEvent = {
|
|
177
|
+
participantId: string;
|
|
178
|
+
isAudioEnabled: boolean;
|
|
179
|
+
};
|
|
180
|
+
type ParticipantVideoEnabledEvent = {
|
|
181
|
+
participantId: string;
|
|
182
|
+
isVideoEnabled: boolean;
|
|
183
|
+
};
|
|
184
|
+
type ParticipantMetadataChangedEvent = {
|
|
185
|
+
participantId: string;
|
|
186
|
+
displayName: string;
|
|
187
|
+
};
|
|
188
|
+
interface RoomEventsMap {
|
|
189
|
+
participant_audio_enabled: CustomEvent<ParticipantAudioEnabledEvent>;
|
|
190
|
+
participant_joined: CustomEvent<ParticipantJoinedEvent>;
|
|
191
|
+
participant_left: CustomEvent<ParticipantLeftEvent>;
|
|
192
|
+
participant_metadata_changed: CustomEvent<ParticipantMetadataChangedEvent>;
|
|
193
|
+
participant_stream_added: CustomEvent<ParticipantStreamAddedEvent>;
|
|
194
|
+
participant_video_enabled: CustomEvent<ParticipantVideoEnabledEvent>;
|
|
195
|
+
room_joined: CustomEvent<RoomJoinedEvent>;
|
|
196
|
+
}
|
|
197
|
+
interface RoomEventTarget extends EventTarget {
|
|
198
|
+
addEventListener<K extends keyof RoomEventsMap>(type: K, listener: (ev: RoomEventsMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
|
|
199
|
+
addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
|
|
200
|
+
}
|
|
201
|
+
declare const TypedEventTarget: new () => RoomEventTarget;
|
|
202
|
+
declare class RoomConnection extends TypedEventTarget {
|
|
203
|
+
localMedia: LocalMedia;
|
|
204
|
+
localParticipant: LocalParticipant | null;
|
|
205
|
+
roomUrl: URL;
|
|
206
|
+
remoteParticipants: RemoteParticipant[];
|
|
207
|
+
readonly localMediaConstraints?: MediaStreamConstraints;
|
|
208
|
+
private credentialsService;
|
|
209
|
+
private apiClient;
|
|
210
|
+
private organizationService;
|
|
211
|
+
private organizationServiceCache;
|
|
212
|
+
private organizationApiClient;
|
|
213
|
+
private roomService;
|
|
214
|
+
private signalSocket;
|
|
215
|
+
private rtcManagerDispatcher?;
|
|
216
|
+
private rtcManager?;
|
|
217
|
+
private roomConnectionState;
|
|
218
|
+
private logger;
|
|
219
|
+
private _ownsLocalMedia;
|
|
220
|
+
private displayName?;
|
|
221
|
+
constructor(roomUrl: string, { displayName, localMediaConstraints, logger, localMedia }: RoomConnectionOptions);
|
|
222
|
+
private _handleNewClient;
|
|
223
|
+
private _handleClientLeft;
|
|
224
|
+
private _handleClientAudioEnabled;
|
|
225
|
+
private _handleClientVideoEnabled;
|
|
226
|
+
private _handleClientMetadataReceived;
|
|
227
|
+
private _handleRtcEvent;
|
|
228
|
+
private _handleRtcManagerCreated;
|
|
229
|
+
private _handleAcceptStreams;
|
|
230
|
+
private _handleStreamAdded;
|
|
231
|
+
join(): Promise<void>;
|
|
232
|
+
leave(): Promise<void>;
|
|
233
|
+
setDisplayName(displayName: string): void;
|
|
161
234
|
}
|
|
162
235
|
|
|
163
236
|
type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
|
|
164
|
-
interface
|
|
237
|
+
interface RoomConnectionState {
|
|
238
|
+
isJoining: boolean;
|
|
239
|
+
joinError: unknown;
|
|
165
240
|
localParticipant?: LocalParticipant;
|
|
166
241
|
roomConnectionStatus?: "connecting" | "connected" | "disconnected";
|
|
167
242
|
remoteParticipants: RemoteParticipantState[];
|
|
168
|
-
}
|
|
169
|
-
|
|
243
|
+
}
|
|
244
|
+
interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
|
|
245
|
+
localMedia?: LocalMediaRef;
|
|
246
|
+
}
|
|
170
247
|
interface RoomConnectionActions {
|
|
171
248
|
toggleCamera(enabled?: boolean): void;
|
|
172
249
|
toggleMicrophone(enabled?: boolean): void;
|
|
@@ -175,11 +252,14 @@ interface RoomConnectionActions {
|
|
|
175
252
|
interface RoomConnectionComponents {
|
|
176
253
|
VideoView: typeof _default;
|
|
177
254
|
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
255
|
+
type RoomConnectionRef = {
|
|
256
|
+
state: RoomConnectionState;
|
|
257
|
+
actions: RoomConnectionActions;
|
|
258
|
+
components: RoomConnectionComponents;
|
|
259
|
+
_ref: RoomConnection;
|
|
260
|
+
};
|
|
261
|
+
declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): RoomConnectionRef;
|
|
182
262
|
|
|
183
|
-
declare const sdkVersion = "2.0.0-
|
|
263
|
+
declare const sdkVersion = "2.0.0-alpha7";
|
|
184
264
|
|
|
185
265
|
export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };
|