@whereby.com/browser-sdk 2.0.0-alpha7 → 2.0.0-alpha9
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 +211 -64
- package/dist/lib.esm.js +211 -64
- package/dist/types.d.ts +48 -5
- package/dist/{v2-alpha7.js → v2-alpha9.js} +2 -2
- package/package.json +1 -1
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-alpha9", 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") {
|
|
@@ -5262,7 +5262,7 @@ class LocalParticipant extends RoomParticipant {
|
|
|
5262
5262
|
}
|
|
5263
5263
|
}
|
|
5264
5264
|
|
|
5265
|
-
const API_BASE_URL = "https://api.
|
|
5265
|
+
const API_BASE_URL = "https://api.whereby.dev";
|
|
5266
5266
|
const SIGNAL_BASE_URL = "wss://signal.appearin.net";
|
|
5267
5267
|
const NON_PERSON_ROLES = ["recorder", "streamer"];
|
|
5268
5268
|
function createSocket() {
|
|
@@ -5275,6 +5275,7 @@ function createSocket() {
|
|
|
5275
5275
|
reconnectionDelay: 5000,
|
|
5276
5276
|
reconnectionDelayMax: 30000,
|
|
5277
5277
|
timeout: 10000,
|
|
5278
|
+
withCredentials: true,
|
|
5278
5279
|
};
|
|
5279
5280
|
return new ServerSocket(SOCKET_HOST, socketConf);
|
|
5280
5281
|
}
|
|
@@ -5283,13 +5284,17 @@ const noop = () => {
|
|
|
5283
5284
|
};
|
|
5284
5285
|
const TypedEventTarget = EventTarget;
|
|
5285
5286
|
class RoomConnection extends TypedEventTarget {
|
|
5286
|
-
constructor(roomUrl, { displayName, localMediaConstraints, logger,
|
|
5287
|
+
constructor(roomUrl, { displayName, localMedia, localMediaConstraints, logger, roomKey }) {
|
|
5287
5288
|
super();
|
|
5288
5289
|
this.localParticipant = null;
|
|
5289
5290
|
this.remoteParticipants = [];
|
|
5290
|
-
this.roomConnectionState = "";
|
|
5291
5291
|
this._ownsLocalMedia = false;
|
|
5292
|
+
this.organizationId = "";
|
|
5293
|
+
this.roomConnectionStatus = "";
|
|
5292
5294
|
this.roomUrl = new URL(roomUrl); // Throw if invalid Whereby room url
|
|
5295
|
+
const searchParams = new URLSearchParams(this.roomUrl.search);
|
|
5296
|
+
this._roomKey = roomKey || searchParams.get("roomKey");
|
|
5297
|
+
this.roomName = this.roomUrl.pathname;
|
|
5293
5298
|
this.logger = logger || {
|
|
5294
5299
|
debug: noop,
|
|
5295
5300
|
error: noop,
|
|
@@ -5310,6 +5315,7 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5310
5315
|
else {
|
|
5311
5316
|
throw new Error("Missing constraints");
|
|
5312
5317
|
}
|
|
5318
|
+
// Set up services
|
|
5313
5319
|
this.credentialsService = CredentialsService.create({ baseUrl: API_BASE_URL });
|
|
5314
5320
|
this.apiClient = new ApiClient({
|
|
5315
5321
|
fetchDeviceCredentials: this.credentialsService.getCredentials.bind(this.credentialsService),
|
|
@@ -5331,10 +5337,15 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5331
5337
|
// Create signal socket and set up event listeners
|
|
5332
5338
|
this.signalSocket = createSocket();
|
|
5333
5339
|
this.signalSocket.on("new_client", this._handleNewClient.bind(this));
|
|
5340
|
+
this.signalSocket.on("chat_message", this._handleNewChatMessage.bind(this));
|
|
5334
5341
|
this.signalSocket.on("client_left", this._handleClientLeft.bind(this));
|
|
5335
5342
|
this.signalSocket.on("audio_enabled", this._handleClientAudioEnabled.bind(this));
|
|
5336
5343
|
this.signalSocket.on("video_enabled", this._handleClientVideoEnabled.bind(this));
|
|
5337
5344
|
this.signalSocket.on("client_metadata_received", this._handleClientMetadataReceived.bind(this));
|
|
5345
|
+
this.signalSocket.on("knock_handled", this._handleKnockHandled.bind(this));
|
|
5346
|
+
this.signalSocket.on("knocker_left", this._handleKnockerLeft.bind(this));
|
|
5347
|
+
this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
|
|
5348
|
+
this.signalSocket.on("room_knocked", this._handleRoomKnocked.bind(this));
|
|
5338
5349
|
// Set up local media listeners
|
|
5339
5350
|
this.localMedia.addEventListener("camera_enabled", (e) => {
|
|
5340
5351
|
const { enabled } = e.detail;
|
|
@@ -5345,6 +5356,12 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5345
5356
|
this.signalSocket.emit("enable_audio", { enabled });
|
|
5346
5357
|
});
|
|
5347
5358
|
}
|
|
5359
|
+
get roomKey() {
|
|
5360
|
+
return this._roomKey;
|
|
5361
|
+
}
|
|
5362
|
+
_handleNewChatMessage(message) {
|
|
5363
|
+
this.dispatchEvent(new CustomEvent("chat_message", { detail: message }));
|
|
5364
|
+
}
|
|
5348
5365
|
_handleNewClient({ client }) {
|
|
5349
5366
|
if (NON_PERSON_ROLES.includes(client.role.roleName)) {
|
|
5350
5367
|
return;
|
|
@@ -5389,6 +5406,70 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5389
5406
|
detail: { participantId: remoteParticipant.id, displayName },
|
|
5390
5407
|
}));
|
|
5391
5408
|
}
|
|
5409
|
+
_handleKnockHandled(payload) {
|
|
5410
|
+
const { resolution } = payload;
|
|
5411
|
+
if (resolution === "accepted") {
|
|
5412
|
+
this.roomConnectionStatus = "accepted";
|
|
5413
|
+
this._roomKey = payload.metadata.roomKey;
|
|
5414
|
+
this._joinRoom();
|
|
5415
|
+
}
|
|
5416
|
+
else if (resolution === "rejected") {
|
|
5417
|
+
this.roomConnectionStatus = "rejected";
|
|
5418
|
+
this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
|
|
5419
|
+
detail: {
|
|
5420
|
+
roomConnectionStatus: this.roomConnectionStatus,
|
|
5421
|
+
},
|
|
5422
|
+
}));
|
|
5423
|
+
}
|
|
5424
|
+
}
|
|
5425
|
+
_handleKnockerLeft(payload) {
|
|
5426
|
+
const { clientId } = payload;
|
|
5427
|
+
this.dispatchEvent(new CustomEvent("waiting_participant_left", {
|
|
5428
|
+
detail: { participantId: clientId },
|
|
5429
|
+
}));
|
|
5430
|
+
}
|
|
5431
|
+
_handleRoomJoined(event) {
|
|
5432
|
+
const { error, isLocked, room, selfId } = event;
|
|
5433
|
+
if (error === "room_locked" && isLocked) {
|
|
5434
|
+
this.roomConnectionStatus = "room_locked";
|
|
5435
|
+
this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
|
|
5436
|
+
detail: {
|
|
5437
|
+
roomConnectionStatus: this.roomConnectionStatus,
|
|
5438
|
+
},
|
|
5439
|
+
}));
|
|
5440
|
+
return;
|
|
5441
|
+
}
|
|
5442
|
+
// Check if we have an error
|
|
5443
|
+
// Check if it is a room joined error
|
|
5444
|
+
// Set state to connect_failed_locked
|
|
5445
|
+
// Set state to connect_failed_no_host
|
|
5446
|
+
if (room) {
|
|
5447
|
+
const { clients, knockers } = room;
|
|
5448
|
+
const localClient = clients.find((c) => c.id === selfId);
|
|
5449
|
+
if (!localClient)
|
|
5450
|
+
throw new Error("Missing local client");
|
|
5451
|
+
this.localParticipant = new LocalParticipant(Object.assign(Object.assign({}, localClient), { stream: this.localMedia.stream || undefined }));
|
|
5452
|
+
this.remoteParticipants = clients
|
|
5453
|
+
.filter((c) => c.id !== selfId)
|
|
5454
|
+
.map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
|
|
5455
|
+
this.roomConnectionStatus = "connected";
|
|
5456
|
+
this.dispatchEvent(new CustomEvent("room_joined", {
|
|
5457
|
+
detail: {
|
|
5458
|
+
localParticipant: this.localParticipant,
|
|
5459
|
+
remoteParticipants: this.remoteParticipants,
|
|
5460
|
+
waitingParticipants: knockers.map((knocker) => {
|
|
5461
|
+
return { id: knocker.clientId, displayName: knocker.displayName };
|
|
5462
|
+
}),
|
|
5463
|
+
},
|
|
5464
|
+
}));
|
|
5465
|
+
}
|
|
5466
|
+
}
|
|
5467
|
+
_handleRoomKnocked(event) {
|
|
5468
|
+
const { clientId, displayName } = event;
|
|
5469
|
+
this.dispatchEvent(new CustomEvent("waiting_participant_joined", {
|
|
5470
|
+
detail: { participantId: clientId, displayName },
|
|
5471
|
+
}));
|
|
5472
|
+
}
|
|
5392
5473
|
_handleRtcEvent(eventName, data) {
|
|
5393
5474
|
if (eventName === "rtc_manager_created") {
|
|
5394
5475
|
return this._handleRtcManagerCreated(data);
|
|
@@ -5407,6 +5488,9 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5407
5488
|
if (this.localMedia.stream) {
|
|
5408
5489
|
(_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream("0", this.localMedia.stream, !this.localMedia.isMicrophoneEnabled(), !this.localMedia.isCameraEnabled());
|
|
5409
5490
|
}
|
|
5491
|
+
if (this.remoteParticipants.length) {
|
|
5492
|
+
this._handleAcceptStreams(this.remoteParticipants);
|
|
5493
|
+
}
|
|
5410
5494
|
}
|
|
5411
5495
|
_handleAcceptStreams(remoteParticipants) {
|
|
5412
5496
|
var _a, _b;
|
|
@@ -5464,14 +5548,43 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5464
5548
|
}
|
|
5465
5549
|
this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
|
|
5466
5550
|
}
|
|
5551
|
+
_joinRoom() {
|
|
5552
|
+
this.signalSocket.emit("join_room", {
|
|
5553
|
+
avatarUrl: null,
|
|
5554
|
+
config: {
|
|
5555
|
+
isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
|
|
5556
|
+
isVideoEnabled: this.localMedia.isCameraEnabled(),
|
|
5557
|
+
},
|
|
5558
|
+
deviceCapabilities: { canScreenshare: true },
|
|
5559
|
+
displayName: this.displayName,
|
|
5560
|
+
isCoLocated: false,
|
|
5561
|
+
isDevicePermissionDenied: false,
|
|
5562
|
+
kickFromOtherRooms: false,
|
|
5563
|
+
organizationId: this.organizationId,
|
|
5564
|
+
roomKey: this.roomKey,
|
|
5565
|
+
roomName: this.roomName,
|
|
5566
|
+
selfId: "",
|
|
5567
|
+
userAgent: `browser-sdk:${sdkVersion }`,
|
|
5568
|
+
});
|
|
5569
|
+
}
|
|
5467
5570
|
join() {
|
|
5468
5571
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5469
|
-
if (["connected", "connecting"].includes(this.
|
|
5470
|
-
console.warn(`Trying to join room state is ${this.
|
|
5572
|
+
if (["connected", "connecting"].includes(this.roomConnectionStatus)) {
|
|
5573
|
+
console.warn(`Trying to join when room state is already ${this.roomConnectionStatus}`);
|
|
5471
5574
|
return;
|
|
5472
5575
|
}
|
|
5473
5576
|
this.logger.log("Joining room");
|
|
5474
|
-
this.
|
|
5577
|
+
this.roomConnectionStatus = "connecting";
|
|
5578
|
+
this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
|
|
5579
|
+
detail: {
|
|
5580
|
+
roomConnectionStatus: this.roomConnectionStatus,
|
|
5581
|
+
},
|
|
5582
|
+
}));
|
|
5583
|
+
const organization = yield this.organizationServiceCache.fetchOrganization();
|
|
5584
|
+
if (!organization) {
|
|
5585
|
+
throw new Error("Invalid room url");
|
|
5586
|
+
}
|
|
5587
|
+
this.organizationId = organization.organizationId;
|
|
5475
5588
|
if (this._ownsLocalMedia) {
|
|
5476
5589
|
yield this.localMedia.start();
|
|
5477
5590
|
}
|
|
@@ -5500,60 +5613,32 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5500
5613
|
simulcastScreenshareOn: false,
|
|
5501
5614
|
},
|
|
5502
5615
|
});
|
|
5503
|
-
const organization = yield this.organizationServiceCache.fetchOrganization();
|
|
5504
|
-
if (!organization) {
|
|
5505
|
-
throw new Error("Invalid room url");
|
|
5506
|
-
}
|
|
5507
5616
|
// Identify device on signal connection
|
|
5508
5617
|
const deviceCredentials = yield this.credentialsService.getCredentials();
|
|
5509
|
-
this.
|
|
5510
|
-
|
|
5511
|
-
this.signalSocket.on("connect", () => {
|
|
5512
|
-
this.logger.log("Connected to signal socket");
|
|
5513
|
-
this.signalSocket.emit("identify_device", { deviceCredentials });
|
|
5514
|
-
});
|
|
5618
|
+
this.logger.log("Connected to signal socket");
|
|
5619
|
+
this.signalSocket.emit("identify_device", { deviceCredentials });
|
|
5515
5620
|
this.signalSocket.once("device_identified", () => {
|
|
5516
|
-
this.
|
|
5517
|
-
avatarUrl: null,
|
|
5518
|
-
config: {
|
|
5519
|
-
isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
|
|
5520
|
-
isVideoEnabled: this.localMedia.isCameraEnabled(),
|
|
5521
|
-
},
|
|
5522
|
-
deviceCapabilities: { canScreenshare: true },
|
|
5523
|
-
displayName: this.displayName,
|
|
5524
|
-
isCoLocated: false,
|
|
5525
|
-
isDevicePermissionDenied: false,
|
|
5526
|
-
kickFromOtherRooms: false,
|
|
5527
|
-
organizationId: organization.organizationId,
|
|
5528
|
-
roomKey: null,
|
|
5529
|
-
roomName: this.roomUrl.pathname,
|
|
5530
|
-
selfId: "",
|
|
5531
|
-
userAgent: `browser-sdk:${sdkVersion }`,
|
|
5532
|
-
});
|
|
5533
|
-
});
|
|
5534
|
-
this.signalSocket.once("room_joined", (res) => {
|
|
5535
|
-
const { selfId, room: { clients }, } = res;
|
|
5536
|
-
const localClient = clients.find((c) => c.id === selfId);
|
|
5537
|
-
if (!localClient)
|
|
5538
|
-
throw new Error("Missing local client");
|
|
5539
|
-
this.localParticipant = new LocalParticipant(Object.assign(Object.assign({}, localClient), { stream: this.localMedia.stream || undefined }));
|
|
5540
|
-
this.remoteParticipants = clients
|
|
5541
|
-
.filter((c) => c.id !== selfId)
|
|
5542
|
-
.map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
|
|
5543
|
-
// Accept remote streams if RTC manager has been initialized
|
|
5544
|
-
if (this.rtcManager) {
|
|
5545
|
-
this._handleAcceptStreams(this.remoteParticipants);
|
|
5546
|
-
}
|
|
5547
|
-
this.roomConnectionState = "connected";
|
|
5548
|
-
this.dispatchEvent(new CustomEvent("room_joined", {
|
|
5549
|
-
detail: {
|
|
5550
|
-
localParticipant: this.localParticipant,
|
|
5551
|
-
remoteParticipants: this.remoteParticipants,
|
|
5552
|
-
},
|
|
5553
|
-
}));
|
|
5621
|
+
this._joinRoom();
|
|
5554
5622
|
});
|
|
5555
5623
|
});
|
|
5556
5624
|
}
|
|
5625
|
+
knock() {
|
|
5626
|
+
this.roomConnectionStatus = "knocking";
|
|
5627
|
+
this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
|
|
5628
|
+
detail: {
|
|
5629
|
+
roomConnectionStatus: this.roomConnectionStatus,
|
|
5630
|
+
},
|
|
5631
|
+
}));
|
|
5632
|
+
this.signalSocket.emit("knock_room", {
|
|
5633
|
+
displayName: this.displayName,
|
|
5634
|
+
imageUrl: null,
|
|
5635
|
+
kickFromOtherRooms: true,
|
|
5636
|
+
liveVideo: false,
|
|
5637
|
+
organizationId: this.organizationId,
|
|
5638
|
+
roomKey: this._roomKey,
|
|
5639
|
+
roomName: this.roomName,
|
|
5640
|
+
});
|
|
5641
|
+
}
|
|
5557
5642
|
leave() {
|
|
5558
5643
|
return new Promise((resolve) => {
|
|
5559
5644
|
if (this._ownsLocalMedia) {
|
|
@@ -5578,6 +5663,11 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5578
5663
|
});
|
|
5579
5664
|
});
|
|
5580
5665
|
}
|
|
5666
|
+
sendChatMessage(text) {
|
|
5667
|
+
this.signalSocket.emit("chat_message", {
|
|
5668
|
+
text,
|
|
5669
|
+
});
|
|
5670
|
+
}
|
|
5581
5671
|
setDisplayName(displayName) {
|
|
5582
5672
|
this.signalSocket.emit("send_client_metadata", {
|
|
5583
5673
|
type: "UserData",
|
|
@@ -5586,12 +5676,30 @@ class RoomConnection extends TypedEventTarget {
|
|
|
5586
5676
|
},
|
|
5587
5677
|
});
|
|
5588
5678
|
}
|
|
5679
|
+
acceptWaitingParticipant(participantId) {
|
|
5680
|
+
this.signalSocket.emit("handle_knock", {
|
|
5681
|
+
action: "accept",
|
|
5682
|
+
clientId: participantId,
|
|
5683
|
+
response: {},
|
|
5684
|
+
});
|
|
5685
|
+
}
|
|
5686
|
+
rejectWaitingParticipant(participantId) {
|
|
5687
|
+
this.signalSocket.emit("handle_knock", {
|
|
5688
|
+
action: "reject",
|
|
5689
|
+
clientId: participantId,
|
|
5690
|
+
response: {},
|
|
5691
|
+
});
|
|
5692
|
+
}
|
|
5589
5693
|
}
|
|
5590
5694
|
|
|
5591
5695
|
const initialState = {
|
|
5696
|
+
chatMessages: [],
|
|
5697
|
+
roomConnectionStatus: "",
|
|
5592
5698
|
isJoining: false,
|
|
5593
5699
|
joinError: null,
|
|
5700
|
+
mostRecentChatMessage: null,
|
|
5594
5701
|
remoteParticipants: [],
|
|
5702
|
+
waitingParticipants: [],
|
|
5595
5703
|
};
|
|
5596
5704
|
function updateParticipant(remoteParticipants, participantId, updates) {
|
|
5597
5705
|
const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
|
|
@@ -5607,8 +5715,12 @@ function updateParticipant(remoteParticipants, participantId, updates) {
|
|
|
5607
5715
|
}
|
|
5608
5716
|
function reducer(state, action) {
|
|
5609
5717
|
switch (action.type) {
|
|
5718
|
+
case "CHAT_MESSAGE":
|
|
5719
|
+
return Object.assign(Object.assign({}, state), { chatMessages: [...state.chatMessages, action.payload], mostRecentChatMessage: action.payload });
|
|
5610
5720
|
case "ROOM_JOINED":
|
|
5611
|
-
return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, roomConnectionStatus: "connected" });
|
|
5721
|
+
return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, waitingParticipants: action.payload.waitingParticipants, roomConnectionStatus: "connected" });
|
|
5722
|
+
case "ROOM_CONNECTION_STATUS_CHANGED":
|
|
5723
|
+
return Object.assign(Object.assign({}, state), { roomConnectionStatus: action.payload.roomConnectionStatus });
|
|
5612
5724
|
case "PARTICIPANT_AUDIO_ENABLED":
|
|
5613
5725
|
return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
|
|
5614
5726
|
isAudioEnabled: action.payload.isAudioEnabled,
|
|
@@ -5633,6 +5745,13 @@ function reducer(state, action) {
|
|
|
5633
5745
|
if (!state.localParticipant)
|
|
5634
5746
|
return state;
|
|
5635
5747
|
return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { displayName: action.payload.displayName }) });
|
|
5748
|
+
case "WAITING_PARTICIPANT_JOINED":
|
|
5749
|
+
return Object.assign(Object.assign({}, state), { waitingParticipants: [
|
|
5750
|
+
...state.waitingParticipants,
|
|
5751
|
+
{ id: action.payload.participantId, displayName: action.payload.displayName },
|
|
5752
|
+
] });
|
|
5753
|
+
case "WAITING_PARTICIPANT_LEFT":
|
|
5754
|
+
return Object.assign(Object.assign({}, state), { waitingParticipants: state.waitingParticipants.filter((wp) => wp.id !== action.payload.participantId) });
|
|
5636
5755
|
default:
|
|
5637
5756
|
throw state;
|
|
5638
5757
|
}
|
|
@@ -5644,6 +5763,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5644
5763
|
});
|
|
5645
5764
|
const [state, dispatch] = useReducer(reducer, initialState);
|
|
5646
5765
|
useEffect(() => {
|
|
5766
|
+
roomConnection.addEventListener("chat_message", (e) => {
|
|
5767
|
+
const chatMessage = e.detail;
|
|
5768
|
+
dispatch({ type: "CHAT_MESSAGE", payload: chatMessage });
|
|
5769
|
+
});
|
|
5647
5770
|
roomConnection.addEventListener("participant_audio_enabled", (e) => {
|
|
5648
5771
|
const { participantId, isAudioEnabled } = e.detail;
|
|
5649
5772
|
dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
|
|
@@ -5660,9 +5783,13 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5660
5783
|
const { participantId, stream } = e.detail;
|
|
5661
5784
|
dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
|
|
5662
5785
|
});
|
|
5786
|
+
roomConnection.addEventListener("room_connection_status_changed", (e) => {
|
|
5787
|
+
const { roomConnectionStatus } = e.detail;
|
|
5788
|
+
dispatch({ type: "ROOM_CONNECTION_STATUS_CHANGED", payload: { roomConnectionStatus } });
|
|
5789
|
+
});
|
|
5663
5790
|
roomConnection.addEventListener("room_joined", (e) => {
|
|
5664
|
-
const { localParticipant, remoteParticipants } = e.detail;
|
|
5665
|
-
dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants } });
|
|
5791
|
+
const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
|
|
5792
|
+
dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants, waitingParticipants } });
|
|
5666
5793
|
});
|
|
5667
5794
|
roomConnection.addEventListener("participant_video_enabled", (e) => {
|
|
5668
5795
|
const { participantId, isVideoEnabled } = e.detail;
|
|
@@ -5672,6 +5799,14 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5672
5799
|
const { participantId, displayName } = e.detail;
|
|
5673
5800
|
dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
|
|
5674
5801
|
});
|
|
5802
|
+
roomConnection.addEventListener("waiting_participant_joined", (e) => {
|
|
5803
|
+
const { participantId, displayName } = e.detail;
|
|
5804
|
+
dispatch({ type: "WAITING_PARTICIPANT_JOINED", payload: { participantId, displayName } });
|
|
5805
|
+
});
|
|
5806
|
+
roomConnection.addEventListener("waiting_participant_left", (e) => {
|
|
5807
|
+
const { participantId } = e.detail;
|
|
5808
|
+
dispatch({ type: "WAITING_PARTICIPANT_LEFT", payload: { participantId } });
|
|
5809
|
+
});
|
|
5675
5810
|
roomConnection.join();
|
|
5676
5811
|
return () => {
|
|
5677
5812
|
roomConnection.leave();
|
|
@@ -5680,16 +5815,28 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5680
5815
|
return {
|
|
5681
5816
|
state,
|
|
5682
5817
|
actions: {
|
|
5683
|
-
|
|
5684
|
-
roomConnection
|
|
5818
|
+
knock: () => {
|
|
5819
|
+
roomConnection.knock();
|
|
5685
5820
|
},
|
|
5686
|
-
|
|
5687
|
-
roomConnection
|
|
5821
|
+
sendChatMessage: (text) => {
|
|
5822
|
+
roomConnection.sendChatMessage(text);
|
|
5688
5823
|
},
|
|
5689
5824
|
setDisplayName: (displayName) => {
|
|
5690
|
-
roomConnection
|
|
5825
|
+
roomConnection.setDisplayName(displayName);
|
|
5691
5826
|
dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
|
|
5692
5827
|
},
|
|
5828
|
+
toggleCamera: (enabled) => {
|
|
5829
|
+
roomConnection.localMedia.toggleCameraEnabled(enabled);
|
|
5830
|
+
},
|
|
5831
|
+
toggleMicrophone: (enabled) => {
|
|
5832
|
+
roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
|
|
5833
|
+
},
|
|
5834
|
+
acceptWaitingParticipant: (participantId) => {
|
|
5835
|
+
roomConnection.acceptWaitingParticipant(participantId);
|
|
5836
|
+
},
|
|
5837
|
+
rejectWaitingParticipant: (participantId) => {
|
|
5838
|
+
roomConnection.rejectWaitingParticipant(participantId);
|
|
5839
|
+
},
|
|
5693
5840
|
},
|
|
5694
5841
|
components: {
|
|
5695
5842
|
VideoView,
|
|
@@ -5698,6 +5845,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
|
|
|
5698
5845
|
};
|
|
5699
5846
|
}
|
|
5700
5847
|
|
|
5701
|
-
const sdkVersion = "2.0.0-
|
|
5848
|
+
const sdkVersion = "2.0.0-alpha9";
|
|
5702
5849
|
|
|
5703
5850
|
export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import RtcManager from '@whereby/jslib-media/src/webrtc/RtcManager';
|
|
3
|
+
import { ChatMessage as ChatMessage$1 } from '@whereby/jslib-media/src/utils/ServerSocket';
|
|
3
4
|
|
|
4
5
|
interface WherebyEmbedAttributes {
|
|
5
6
|
audio: string;
|
|
@@ -149,6 +150,10 @@ declare class RemoteParticipant extends RoomParticipant {
|
|
|
149
150
|
declare class LocalParticipant extends RoomParticipant {
|
|
150
151
|
readonly isLocalParticipant = true;
|
|
151
152
|
constructor({ displayName, id, stream, isAudioEnabled, isVideoEnabled }: RoomParticipantData);
|
|
153
|
+
}
|
|
154
|
+
interface WaitingParticipant {
|
|
155
|
+
id: string;
|
|
156
|
+
displayName: string | null;
|
|
152
157
|
}
|
|
153
158
|
|
|
154
159
|
type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
|
|
@@ -159,9 +164,15 @@ interface RoomConnectionOptions {
|
|
|
159
164
|
logger?: Logger;
|
|
160
165
|
localMedia?: LocalMedia;
|
|
161
166
|
}
|
|
167
|
+
type ChatMessage = Pick<ChatMessage$1, "senderId" | "timestamp" | "text">;
|
|
168
|
+
type RoomConnectionStatus = "" | "connecting" | "connected" | "room_locked" | "knocking" | "disconnected" | "accepted" | "rejected";
|
|
162
169
|
type RoomJoinedEvent = {
|
|
163
170
|
localParticipant: LocalParticipant;
|
|
164
171
|
remoteParticipants: RemoteParticipant[];
|
|
172
|
+
waitingParticipants: WaitingParticipant[];
|
|
173
|
+
};
|
|
174
|
+
type RoomConnectionStatusChangedEvent = {
|
|
175
|
+
roomConnectionStatus: RoomConnectionStatus;
|
|
165
176
|
};
|
|
166
177
|
type ParticipantJoinedEvent = {
|
|
167
178
|
remoteParticipant: RemoteParticipant;
|
|
@@ -185,14 +196,25 @@ type ParticipantMetadataChangedEvent = {
|
|
|
185
196
|
participantId: string;
|
|
186
197
|
displayName: string;
|
|
187
198
|
};
|
|
199
|
+
type WaitingParticipantJoinedEvent = {
|
|
200
|
+
participantId: string;
|
|
201
|
+
displayName: string | null;
|
|
202
|
+
};
|
|
203
|
+
type WaitingParticipantLeftEvent = {
|
|
204
|
+
participantId: string;
|
|
205
|
+
};
|
|
188
206
|
interface RoomEventsMap {
|
|
207
|
+
chat_message: CustomEvent<ChatMessage>;
|
|
189
208
|
participant_audio_enabled: CustomEvent<ParticipantAudioEnabledEvent>;
|
|
190
209
|
participant_joined: CustomEvent<ParticipantJoinedEvent>;
|
|
191
210
|
participant_left: CustomEvent<ParticipantLeftEvent>;
|
|
192
211
|
participant_metadata_changed: CustomEvent<ParticipantMetadataChangedEvent>;
|
|
193
212
|
participant_stream_added: CustomEvent<ParticipantStreamAddedEvent>;
|
|
194
213
|
participant_video_enabled: CustomEvent<ParticipantVideoEnabledEvent>;
|
|
214
|
+
room_connection_status_changed: CustomEvent<RoomConnectionStatusChangedEvent>;
|
|
195
215
|
room_joined: CustomEvent<RoomJoinedEvent>;
|
|
216
|
+
waiting_participant_joined: CustomEvent<WaitingParticipantJoinedEvent>;
|
|
217
|
+
waiting_participant_left: CustomEvent<WaitingParticipantLeftEvent>;
|
|
196
218
|
}
|
|
197
219
|
interface RoomEventTarget extends EventTarget {
|
|
198
220
|
addEventListener<K extends keyof RoomEventsMap>(type: K, listener: (ev: RoomEventsMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -205,6 +227,8 @@ declare class RoomConnection extends TypedEventTarget {
|
|
|
205
227
|
roomUrl: URL;
|
|
206
228
|
remoteParticipants: RemoteParticipant[];
|
|
207
229
|
readonly localMediaConstraints?: MediaStreamConstraints;
|
|
230
|
+
readonly roomName: string;
|
|
231
|
+
private organizationId;
|
|
208
232
|
private credentialsService;
|
|
209
233
|
private apiClient;
|
|
210
234
|
private organizationService;
|
|
@@ -214,40 +238,59 @@ declare class RoomConnection extends TypedEventTarget {
|
|
|
214
238
|
private signalSocket;
|
|
215
239
|
private rtcManagerDispatcher?;
|
|
216
240
|
private rtcManager?;
|
|
217
|
-
private
|
|
241
|
+
private roomConnectionStatus;
|
|
218
242
|
private logger;
|
|
219
243
|
private _ownsLocalMedia;
|
|
220
244
|
private displayName?;
|
|
221
|
-
|
|
245
|
+
private _roomKey;
|
|
246
|
+
constructor(roomUrl: string, { displayName, localMedia, localMediaConstraints, logger, roomKey }: RoomConnectionOptions);
|
|
247
|
+
get roomKey(): string | null;
|
|
248
|
+
private _handleNewChatMessage;
|
|
222
249
|
private _handleNewClient;
|
|
223
250
|
private _handleClientLeft;
|
|
224
251
|
private _handleClientAudioEnabled;
|
|
225
252
|
private _handleClientVideoEnabled;
|
|
226
253
|
private _handleClientMetadataReceived;
|
|
254
|
+
private _handleKnockHandled;
|
|
255
|
+
private _handleKnockerLeft;
|
|
256
|
+
private _handleRoomJoined;
|
|
257
|
+
private _handleRoomKnocked;
|
|
227
258
|
private _handleRtcEvent;
|
|
228
259
|
private _handleRtcManagerCreated;
|
|
229
260
|
private _handleAcceptStreams;
|
|
230
261
|
private _handleStreamAdded;
|
|
262
|
+
private _joinRoom;
|
|
231
263
|
join(): Promise<void>;
|
|
264
|
+
knock(): void;
|
|
232
265
|
leave(): Promise<void>;
|
|
266
|
+
sendChatMessage(text: string): void;
|
|
233
267
|
setDisplayName(displayName: string): void;
|
|
268
|
+
acceptWaitingParticipant(participantId: string): void;
|
|
269
|
+
rejectWaitingParticipant(participantId: string): void;
|
|
234
270
|
}
|
|
235
271
|
|
|
236
272
|
type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
|
|
237
273
|
interface RoomConnectionState {
|
|
274
|
+
chatMessages: ChatMessage[];
|
|
238
275
|
isJoining: boolean;
|
|
239
276
|
joinError: unknown;
|
|
240
277
|
localParticipant?: LocalParticipant;
|
|
241
|
-
|
|
278
|
+
mostRecentChatMessage: ChatMessage | null;
|
|
279
|
+
roomConnectionStatus: RoomConnectionStatus;
|
|
242
280
|
remoteParticipants: RemoteParticipantState[];
|
|
281
|
+
waitingParticipants: WaitingParticipant[];
|
|
243
282
|
}
|
|
244
283
|
interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
|
|
245
284
|
localMedia?: LocalMediaRef;
|
|
246
285
|
}
|
|
247
286
|
interface RoomConnectionActions {
|
|
287
|
+
sendChatMessage(text: string): void;
|
|
288
|
+
knock(): void;
|
|
289
|
+
setDisplayName(displayName: string): void;
|
|
248
290
|
toggleCamera(enabled?: boolean): void;
|
|
249
291
|
toggleMicrophone(enabled?: boolean): void;
|
|
250
|
-
|
|
292
|
+
acceptWaitingParticipant(participantId: string): void;
|
|
293
|
+
rejectWaitingParticipant(participantId: string): void;
|
|
251
294
|
}
|
|
252
295
|
interface RoomConnectionComponents {
|
|
253
296
|
VideoView: typeof _default;
|
|
@@ -260,6 +303,6 @@ type RoomConnectionRef = {
|
|
|
260
303
|
};
|
|
261
304
|
declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): RoomConnectionRef;
|
|
262
305
|
|
|
263
|
-
declare const sdkVersion = "2.0.0-
|
|
306
|
+
declare const sdkVersion = "2.0.0-alpha9";
|
|
264
307
|
|
|
265
308
|
export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };
|