From cf23114e4e9beabac652167b4a29ff8ae7d0a91c Mon Sep 17 00:00:00 2001 From: Palash Date: Wed, 31 Jul 2024 13:25:39 +0530 Subject: [PATCH 1/2] feat: add web-core 2.x upgrade guide --- docs/react-web-core/advanced/_category_.json | 2 +- docs/react-web-core/introduction.mdx | 2 +- .../participants/participant-object.mdx | 2 +- docs/react-web-core/pre-call/3-virtual-bg.mdx | 15 +++++- docs/react-web-core/pre-call/_category_.json | 2 +- docs/react-web-core/quickstart.mdx | 2 +- docs/react-web-core/reference/DyteMeta.md | 10 ---- .../reference/DyteParticipant.md | 33 +----------- docs/react-web-core/reference/DyteSelf.md | 45 ---------------- docs/react-web-core/release-notes.mdx | 6 +++ docs/react-web-core/room-metadata.mdx | 51 +++++++++---------- docs/react-web-core/upgrade.mdx | 43 ++++++++++++++++ docs/web-core/Introduction.mdx | 2 +- docs/web-core/local-user/events.mdx | 13 +++-- .../participants/participant-object.mdx | 2 +- docs/web-core/pre-call/3-virtual-bg.mdx | 14 ++++- docs/web-core/pre-call/_category_.json | 2 +- docs/web-core/quickstart.mdx | 2 +- docs/web-core/reference/DyteMeta.md | 10 ---- docs/web-core/reference/DyteParticipant.md | 33 +----------- docs/web-core/reference/DyteSelf.md | 42 --------------- docs/web-core/release-notes.mdx | 5 ++ docs/web-core/room-metadata.mdx | 41 +++++++-------- docs/web-core/upgrade.mdx | 43 ++++++++++++++++ docusaurus.config.js | 4 +- 25 files changed, 190 insertions(+), 236 deletions(-) create mode 100644 docs/react-web-core/upgrade.mdx create mode 100644 docs/web-core/upgrade.mdx diff --git a/docs/react-web-core/advanced/_category_.json b/docs/react-web-core/advanced/_category_.json index 79c6a17c9d..40e0e69671 100644 --- a/docs/react-web-core/advanced/_category_.json +++ b/docs/react-web-core/advanced/_category_.json @@ -1,5 +1,5 @@ { - "position": 4, + "position": 5, "label": "Initialization", "collapsible": true } diff --git a/docs/react-web-core/introduction.mdx b/docs/react-web-core/introduction.mdx index a6a8b417b1..193b6310e3 100644 --- a/docs/react-web-core/introduction.mdx +++ b/docs/react-web-core/introduction.mdx @@ -1,6 +1,6 @@ --- title: Introduction -sidebar_position: 3 +sidebar_position: 4 sidebar_class_name: module-seperation --- diff --git a/docs/react-web-core/participants/participant-object.mdx b/docs/react-web-core/participants/participant-object.mdx index ac7518a0fe..4afb23f1a9 100644 --- a/docs/react-web-core/participants/participant-object.mdx +++ b/docs/react-web-core/participants/participant-object.mdx @@ -34,7 +34,7 @@ The participant object has the following properties. - `userId`: The `userId` of the participant. - `name`: The participant's name. - `picture`: The participant's picture (if any). -- `clientSpecificId`: An arbitrary ID that can be set to identify the +- `customParticipantId`: An arbitrary ID that can be set to identify the participant. - `isPinned`: Set to true if the participant is pinned. - `presetName`: Name of the preset associated with the participant. diff --git a/docs/react-web-core/pre-call/3-virtual-bg.mdx b/docs/react-web-core/pre-call/3-virtual-bg.mdx index f06b0224c8..6202d67903 100644 --- a/docs/react-web-core/pre-call/3-virtual-bg.mdx +++ b/docs/react-web-core/pre-call/3-virtual-bg.mdx @@ -37,9 +37,22 @@ import DyteVideoBackgroundTransformer from '@dytesdk/video-background-transforme If you installed the package using a script tag, the `DyteVideoBackgroundTransformer` will be automatically available for use once the installation process is complete. ```js -const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init(); +const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({ + meeting, + segmentationConfig: { + model: 'mlkit', // could also be 'meet' + backend: 'wasmSimd', + inputResolution: '256x256', // '256x144' for meet + pipeline: 'webgl2', // canvas2dCpu | webgl2 + targetFps: 35, + deferInputResizing: true, + }, + }); + +meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true }); ``` + ### Add an image as a background To incorporate an image as a background, create a static background video middleware using the `createStaticBackgroundVideoMiddleware` method provided by the `videoBackgroundTransformer` object. diff --git a/docs/react-web-core/pre-call/_category_.json b/docs/react-web-core/pre-call/_category_.json index 62c5eb9e7b..22e5bdec8e 100644 --- a/docs/react-web-core/pre-call/_category_.json +++ b/docs/react-web-core/pre-call/_category_.json @@ -1,5 +1,5 @@ { - "position": 2, + "position": 3, "label": "Pre-call", "collapsible": true, "className":"pre-call-docs" diff --git a/docs/react-web-core/quickstart.mdx b/docs/react-web-core/quickstart.mdx index e283909632..bb38eb00f1 100644 --- a/docs/react-web-core/quickstart.mdx +++ b/docs/react-web-core/quickstart.mdx @@ -1,6 +1,6 @@ --- slug: / -sidebar_position: 1 +sidebar_position: 2 --- # Quickstart diff --git a/docs/react-web-core/reference/DyteMeta.md b/docs/react-web-core/reference/DyteMeta.md index c3b7246e3d..17e06864ab 100644 --- a/docs/react-web-core/reference/DyteMeta.md +++ b/docs/react-web-core/reference/DyteMeta.md @@ -88,13 +88,3 @@ Sets current active tab for user | Param | | --- | | spotlightTab | - - - -### ~~meta.joined~~ -***Deprecated*** - - - -### ~~meta.roomName~~ -***Deprecated*** \ No newline at end of file diff --git a/docs/react-web-core/reference/DyteParticipant.md b/docs/react-web-core/reference/DyteParticipant.md index 05db39ece2..c99023101f 100644 --- a/docs/react-web-core/reference/DyteParticipant.md +++ b/docs/react-web-core/reference/DyteParticipant.md @@ -168,35 +168,4 @@ Requires the permission to kick a participant. #### participant.disableVideo() Disables video for this participant. -Requires the permission to disable video for a participant. - - - -#### ~~participant.acceptJoinStageRequest()~~ -***Deprecated*** - - - -#### ~~participant.rejectRequestToJoinStage()~~ -***Deprecated*** - - - -#### ~~participant.removeFromStage()~~ -***Deprecated*** - - - -#### ~~participant.setWebinarStageStatus()~~ -***Deprecated*** - - - - -#### ~~participant.clientSpecificId~~ -***Deprecated*** - - - -#### ~~participant.webinarStageStatus~~ -***Deprecated*** +Requires the permission to disable video for a participant. \ No newline at end of file diff --git a/docs/react-web-core/reference/DyteSelf.md b/docs/react-web-core/reference/DyteSelf.md index da9236358a..5f2c74fa63 100644 --- a/docs/react-web-core/reference/DyteSelf.md +++ b/docs/react-web-core/reference/DyteSelf.md @@ -197,48 +197,3 @@ Change the current media device that is being used by the local participant. | Param | Description | | --- | --- | | device | The device that is to be used. A device of the same `kind` will be replaced. the primary stream. | - - - -### ~~self.requestToJoinStage()~~ -***Deprecated*** - - - -### ~~self.withdrawRequestToJoinStage()~~ -***Deprecated*** - - - -### ~~self.leaveStage()~~ -***Deprecated*** - - - -### ~~self.joinStage()~~ -***Deprecated*** - - - -### ~~self.setWebinarStageStatus()~~ -***Deprecated*** - - - -### ~~self.disablePreview()~~ -***Deprecated*** - - - -### ~~self.clientSpecificId~~ -***Deprecated*** - - - -### ~~self.suggestedTheme~~ -***Deprecated*** - - - -### ~~self.webinarStageStatus~~ -***Deprecated*** \ No newline at end of file diff --git a/docs/react-web-core/release-notes.mdx b/docs/react-web-core/release-notes.mdx index 7c419b540a..85d22e75b9 100644 --- a/docs/react-web-core/release-notes.mdx +++ b/docs/react-web-core/release-notes.mdx @@ -8,6 +8,12 @@ tags: import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator'; +:::danger + +Looking to upgrade from a 1.x -> 2.x version, read the upgrade [guide here](/react-web-core/upgrade) + +::: + The release notes lists all new features, resolved issues, and known issues of React Web Core in chronological order. diff --git a/docs/react-web-core/room-metadata.mdx b/docs/react-web-core/room-metadata.mdx index 0573c32018..017c9326f3 100644 --- a/docs/react-web-core/room-metadata.mdx +++ b/docs/react-web-core/room-metadata.mdx @@ -1,5 +1,5 @@ --- -title: Room Metadata +title: Meeting Metadata description: All metadata pertaining to a meeting. sidebar_position: 11 tags: @@ -7,7 +7,7 @@ tags: - room-metadata --- -# Room Metadata +# Meeting Metadata All metadata pertaining to a meeting is stored in `meeting.meta`. This includes: @@ -16,7 +16,8 @@ All metadata pertaining to a meeting is stored in `meeting.meta`. This includes: - `roomType`: Indicates the meeting is a group-call or a webinar. - `meetingTitle`: The title of the meeting. - `meetingStartedTimestamp`: The timestamp when the meeting started. -- `socketConnected`: Boolean flag to show when the socket is connected. +- `mediaState`: Media Connection state +- `socketState`: Socket Connection state For example, if you want to get the title of the meeting the current participant is connected to, you can do so by doing: @@ -32,32 +33,28 @@ if (meeting.self.roomJoined) { } ``` +**Events** + The `meta` object also emits events for indicating the change in the connection -state of the room. For example, you can listen for the `connected` event to know -when the local user has successfully joined the room, and for the `disconnected` -event to find out if the local user's connection has dropped. +state of the room. + +1. **Media Connection** + +Updates to Media connection (WebRTC connection used for the transfer of actual media) will be sent on `mediaConnectionUpdate` event with the payload ```ts -const meetingconnected = useDyteSelector( - (meeting) => meeting.meta.socketConnected -); -useEffect(() => { - console.log('I got meetingconnected as: ', meetingconnected); -}, [meetingconnected]); - -const meetingTitle = useDyteSelector((meeting) => meeting.meta.meetingTitle); -useEffect(() => { - console.log('I got meetingTitle as: ', meetingTitle); -}, [meetingTitle]); - -const meetingStartedTimestamp = useDyteSelector( - (meeting) => meeting.meta.meetingStartedTimestamp -); -useEffect(() => { - console.log('I got meetingStartedTimestamp as: ', meetingStartedTimestamp); -}, [meetingStartedTimestamp]); +meeting.meta.on('mediaConnectionUpdate', ({ transport, state }) => { + // transport - 'consuming' | 'producing' + // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed' +}); ``` - - React Web Core Room Metadata - +2. **Socket Connection** + +Updates to Websocket connection (used for chat, polls and other basic signaling) will be sent on `socketConnectionUpdate` event + +```ts +meeting.meta.on('socketConnectionUpdate', ({ state, reconnectionAttempt, reconnected }) => { + // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed' +}); +``` diff --git a/docs/react-web-core/upgrade.mdx b/docs/react-web-core/upgrade.mdx new file mode 100644 index 0000000000..4c210ca28f --- /dev/null +++ b/docs/react-web-core/upgrade.mdx @@ -0,0 +1,43 @@ +--- +title: 2.x Upgrade Guide +sidebar_position: 1 +--- + +### Breaking changes + +With this major release we tried to reduce the number of breaking changes to the minimal amount. + +**1. Removal of V1 REST API terminology in favor of V2 REST API terminology** + +- meeting.self.`clientSpecificId` - > meeting.self.`customParticipantId` +- meeting.meta.`roomName` β†’ meeting.meta.`meetingId` +- meeting.self.`suggestedTheme` β†’ meeting.self.`config` + + +**2. Event changes ️‍πŸ”₯ ️‍πŸ”₯ ️‍πŸ”₯** + +Network disconnects now trigger roomLeft event on meeting.self with a state indicating the cause of leaving the room. If you have redirection logic on `roomLeft`, please update it accordingly. + +```jsx +meeting.self.on('roomLeft', ({ state }) => { + if(state === 'ended' || state == "left" || state == "kicked"){ + // maybe redirect to another page + } +} +``` + +Possible state values are β€˜kicked’ | 'ended' | 'left' | 'rejected' | 'connected-meeting' | 'disconnected' | 'failed'; + +**3. Handling Reconnection / Disconnection** + +- `connected` `disconnected` `connectionError` `iceConnected` `iceDisconnected` `iceFailed` `iceReconnecting` `socketConnected` `socketDisconnected` `socketReconnecting` `socketReconnectAttempt` `socketReconnectFailure` `socketReconnected` `socketFailure` + + events on meeting.meta are **removed and replaced** with new simplified connection events and properties + + - Updates to Media connection (WebRTC connection used for the transfer of actual media) will be sent on `mediaConnectionUpdate` event with the payload + You can also get the value of this payload by checking the `meeting.meta.mediaState` property + + - Updates to Websocket connection (used for chat, polls and other basic signaling) will be sent on `socketConnectionUpdate` event. + You can also get the value of this payload by checking the `meeting.meta.socketState` property + + Read more on the [meeting metadata page](/web-core/room-metadata) \ No newline at end of file diff --git a/docs/web-core/Introduction.mdx b/docs/web-core/Introduction.mdx index e647bf28a7..a827af6e36 100644 --- a/docs/web-core/Introduction.mdx +++ b/docs/web-core/Introduction.mdx @@ -1,6 +1,6 @@ --- title: Introduction -sidebar_position: 3 +sidebar_position: 4 sidebar_class_name: module-seperation --- diff --git a/docs/web-core/local-user/events.mdx b/docs/web-core/local-user/events.mdx index 221426a32e..91cd598e53 100644 --- a/docs/web-core/local-user/events.mdx +++ b/docs/web-core/local-user/events.mdx @@ -14,9 +14,9 @@ tags: You can subscribe to various events on the local user by calling `meeting.self.on(EVENT_NAME)`. -## Room joined +## Meeting joined -Triggered when the room join event completes and now the `meeting` is ready to +Triggered when the join event completes and now the `meeting` is ready to produce and consume media. ```ts @@ -27,7 +27,7 @@ meeting.self.on('roomJoined', () => { }); ``` -## Room left +## Meeting left Triggered when the local user leaves the meeting. @@ -44,10 +44,13 @@ Here are all the possible values of the `state` variable. | Event | Description | | ---------- | ----------------------------------------------------------------------------------- | -| `left` | Participant has left the room. | +| `left` | Participant has left the meeting. | | `kicked` | Participant is removed from the meeting. | | `ended` | Everyone is removed from the meeting, and the session has ended. | -| `rejected` | Participant's request to join the room is rejected (when you're in a waiting room). | +| `rejected` | Participant's request to join the meeting is rejected (when you're in a waiting room). | +| `disconnected` | Temporary network disconnection | +| `failed` | Failed to join the meeting | +| `connected-meeting` | Participant has left this meeting and joined a connected meeting (Breakout meeting) | ## Video update diff --git a/docs/web-core/participants/participant-object.mdx b/docs/web-core/participants/participant-object.mdx index 5850eb11e8..a7c38cb46f 100644 --- a/docs/web-core/participants/participant-object.mdx +++ b/docs/web-core/participants/participant-object.mdx @@ -35,7 +35,7 @@ The participant object has the following properties. - `userId`: The `userId` of the participant. - `name`: The participant's name. - `picture`: The participant's picture (if any). -- `clientSpecificId`: An arbitrary ID that can be set to identify the +- `customParticipantId`: An arbitrary ID that can be set to identify the participant. - `isPinned`: Set to true if the participant is pinned. - `presetName`: Name of the preset associated with the participant. diff --git a/docs/web-core/pre-call/3-virtual-bg.mdx b/docs/web-core/pre-call/3-virtual-bg.mdx index f06b0224c8..7a123341ec 100644 --- a/docs/web-core/pre-call/3-virtual-bg.mdx +++ b/docs/web-core/pre-call/3-virtual-bg.mdx @@ -37,7 +37,19 @@ import DyteVideoBackgroundTransformer from '@dytesdk/video-background-transforme If you installed the package using a script tag, the `DyteVideoBackgroundTransformer` will be automatically available for use once the installation process is complete. ```js -const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init(); +const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({ + meeting, + segmentationConfig: { + model: 'mlkit', // could also be 'meet' + backend: 'wasmSimd', + inputResolution: '256x256', // '256x144' for meet + pipeline: 'webgl2', // canvas2dCpu | webgl2 + targetFps: 35, + deferInputResizing: true, + }, + }); + +meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true }); ``` ### Add an image as a background diff --git a/docs/web-core/pre-call/_category_.json b/docs/web-core/pre-call/_category_.json index 62c5eb9e7b..22e5bdec8e 100644 --- a/docs/web-core/pre-call/_category_.json +++ b/docs/web-core/pre-call/_category_.json @@ -1,5 +1,5 @@ { - "position": 2, + "position": 3, "label": "Pre-call", "collapsible": true, "className":"pre-call-docs" diff --git a/docs/web-core/quickstart.mdx b/docs/web-core/quickstart.mdx index c8bda0970d..861e6459ac 100644 --- a/docs/web-core/quickstart.mdx +++ b/docs/web-core/quickstart.mdx @@ -4,7 +4,7 @@ tags: - quickstart - setup slug: / -sidebar_position: 1 +sidebar_position: 2 --- import Tabs from '@theme/Tabs'; diff --git a/docs/web-core/reference/DyteMeta.md b/docs/web-core/reference/DyteMeta.md index c3b7246e3d..17e06864ab 100644 --- a/docs/web-core/reference/DyteMeta.md +++ b/docs/web-core/reference/DyteMeta.md @@ -88,13 +88,3 @@ Sets current active tab for user | Param | | --- | | spotlightTab | - - - -### ~~meta.joined~~ -***Deprecated*** - - - -### ~~meta.roomName~~ -***Deprecated*** \ No newline at end of file diff --git a/docs/web-core/reference/DyteParticipant.md b/docs/web-core/reference/DyteParticipant.md index 05db39ece2..c99023101f 100644 --- a/docs/web-core/reference/DyteParticipant.md +++ b/docs/web-core/reference/DyteParticipant.md @@ -168,35 +168,4 @@ Requires the permission to kick a participant. #### participant.disableVideo() Disables video for this participant. -Requires the permission to disable video for a participant. - - - -#### ~~participant.acceptJoinStageRequest()~~ -***Deprecated*** - - - -#### ~~participant.rejectRequestToJoinStage()~~ -***Deprecated*** - - - -#### ~~participant.removeFromStage()~~ -***Deprecated*** - - - -#### ~~participant.setWebinarStageStatus()~~ -***Deprecated*** - - - - -#### ~~participant.clientSpecificId~~ -***Deprecated*** - - - -#### ~~participant.webinarStageStatus~~ -***Deprecated*** +Requires the permission to disable video for a participant. \ No newline at end of file diff --git a/docs/web-core/reference/DyteSelf.md b/docs/web-core/reference/DyteSelf.md index 8ed34a4894..5fd25bcbb2 100644 --- a/docs/web-core/reference/DyteSelf.md +++ b/docs/web-core/reference/DyteSelf.md @@ -199,45 +199,3 @@ Change the current media device that is being used by the local participant. -### ~~self.requestToJoinStage()~~ -***Deprecated*** - - - -### ~~self.withdrawRequestToJoinStage()~~ -***Deprecated*** - - - -### ~~self.leaveStage()~~ -***Deprecated*** - - - -### ~~self.joinStage()~~ -***Deprecated*** - - - -### ~~self.setWebinarStageStatus()~~ -***Deprecated*** - - - -### ~~self.disablePreview()~~ -***Deprecated*** - - - -### ~~self.clientSpecificId~~ -***Deprecated*** - - - -### ~~self.suggestedTheme~~ -***Deprecated*** - - - -### ~~self.webinarStageStatus~~ -***Deprecated*** \ No newline at end of file diff --git a/docs/web-core/release-notes.mdx b/docs/web-core/release-notes.mdx index 9fb5230e13..42a0cbe0c0 100644 --- a/docs/web-core/release-notes.mdx +++ b/docs/web-core/release-notes.mdx @@ -8,6 +8,11 @@ tags: import ReleaseNotesGenerator from '@site/src/components/ReleaseNotesGenerator'; +:::danger + +Looking to upgrade from a 1.x -> 2.x version, read the upgrade [guide here](/web-core/upgrade) +::: + The release notes lists all new features, resolved issues, and known issues of Web Core in chronological order. diff --git a/docs/web-core/room-metadata.mdx b/docs/web-core/room-metadata.mdx index 2259349666..3ca5653ccd 100644 --- a/docs/web-core/room-metadata.mdx +++ b/docs/web-core/room-metadata.mdx @@ -1,5 +1,5 @@ --- -title: Room Metadata +title: Meeting Metadata description: All metadata pertaining to a meeting. sidebar_position: 11 tags: @@ -7,7 +7,7 @@ tags: - room-metadata --- -# Room Metadata +# Meeting Metadata All metadata pertaining to a meeting is stored in `meeting.meta`. This includes: @@ -16,7 +16,8 @@ All metadata pertaining to a meeting is stored in `meeting.meta`. This includes: - `roomType`: Indicates the meeting is a group-call or a webinar. - `meetingTitle`: The title of the meeting. - `meetingStartedTimestamp`: The timestamp when the meeting started. -- `socketConnected`: Boolean flag to show when the socket is connected. +- `mediaState`: Media Connection state +- `socketState`: Socket Connection state For example, if you want to get the title of the meeting the current participant is connected to, you can do so by doing: @@ -32,33 +33,33 @@ if (meeting.self.roomJoined) { } ``` +**Events** + The `meta` object also emits events for indicating the change in the connection -state of the room. For example, you can listen for the `connected` event to know -when the local user has successfully joined the room, and for the `disconnected` -event to find out if the local user's connection has dropped. +state of the room. + +1. **Media Connection** + +Updates to Media connection (WebRTC connection used for the transfer of actual media) will be sent on `mediaConnectionUpdate` event with the payload ```ts -meeting.meta.on('connected', () => { - console.log( - `The local user has successfully joined the meeting ${meeting.meta.meetingTitle}` - ); +meeting.meta.on('mediaConnectionUpdate', ({ transport, state }) => { + // transport - 'consuming' | 'producing' + // state - 'new' | 'connecting' | 'connected' | 'disconnected' | 'reconnecting' | 'failed' }); +``` -meeting.meta.on('disconnected', () => { - console.log( - `The local user got disconnected from the meeting ${meeting.meta.meetingTitle}` - ); -}); +2. **Socket Connection** -meeting.meta.on('poorConnection', () => { - console.log(`The local user has poor network connection.`); -}); +Updates to Websocket connection (used for chat, polls and other basic signaling) will be sent on `socketConnectionUpdate` event -meeting.meta.on('connectionError', ({ reason }) => { - console.log(`Could not connect to the room.`); +```ts +meeting.meta.on('socketConnectionUpdate', ({ state, reconnectionAttempt, reconnected }) => { + // state - 'connected' | 'disconnected' | 'reconnecting' | 'failed' }); ``` + Web Core Room Metadata diff --git a/docs/web-core/upgrade.mdx b/docs/web-core/upgrade.mdx new file mode 100644 index 0000000000..4c210ca28f --- /dev/null +++ b/docs/web-core/upgrade.mdx @@ -0,0 +1,43 @@ +--- +title: 2.x Upgrade Guide +sidebar_position: 1 +--- + +### Breaking changes + +With this major release we tried to reduce the number of breaking changes to the minimal amount. + +**1. Removal of V1 REST API terminology in favor of V2 REST API terminology** + +- meeting.self.`clientSpecificId` - > meeting.self.`customParticipantId` +- meeting.meta.`roomName` β†’ meeting.meta.`meetingId` +- meeting.self.`suggestedTheme` β†’ meeting.self.`config` + + +**2. Event changes ️‍πŸ”₯ ️‍πŸ”₯ ️‍πŸ”₯** + +Network disconnects now trigger roomLeft event on meeting.self with a state indicating the cause of leaving the room. If you have redirection logic on `roomLeft`, please update it accordingly. + +```jsx +meeting.self.on('roomLeft', ({ state }) => { + if(state === 'ended' || state == "left" || state == "kicked"){ + // maybe redirect to another page + } +} +``` + +Possible state values are β€˜kicked’ | 'ended' | 'left' | 'rejected' | 'connected-meeting' | 'disconnected' | 'failed'; + +**3. Handling Reconnection / Disconnection** + +- `connected` `disconnected` `connectionError` `iceConnected` `iceDisconnected` `iceFailed` `iceReconnecting` `socketConnected` `socketDisconnected` `socketReconnecting` `socketReconnectAttempt` `socketReconnectFailure` `socketReconnected` `socketFailure` + + events on meeting.meta are **removed and replaced** with new simplified connection events and properties + + - Updates to Media connection (WebRTC connection used for the transfer of actual media) will be sent on `mediaConnectionUpdate` event with the payload + You can also get the value of this payload by checking the `meeting.meta.mediaState` property + + - Updates to Websocket connection (used for chat, polls and other basic signaling) will be sent on `socketConnectionUpdate` event. + You can also get the value of this payload by checking the `meeting.meta.socketState` property + + Read more on the [meeting metadata page](/web-core/room-metadata) \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index 261924cdd1..f0ffd4ec39 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -83,7 +83,7 @@ const docs = [ routeBasePath: '/web-core', versions: { current: { - label: '1.x.x', + label: '2.x.x', }, }, }, @@ -94,7 +94,7 @@ const docs = [ routeBasePath: '/react-web-core', versions: { current: { - label: '1.x.x', + label: '2.x.x', }, }, }, From 17801bb836d0fd48b848d16890669826ddf17534 Mon Sep 17 00:00:00 2001 From: Palash Date: Wed, 31 Jul 2024 15:57:58 +0530 Subject: [PATCH 2/2] fix: virtual bg init --- docs/react-web-core/pre-call/3-virtual-bg.mdx | 12 ++---------- docs/react-web-core/upgrade.mdx | 1 + docs/web-core/pre-call/3-virtual-bg.mdx | 12 ++---------- docs/web-core/upgrade.mdx | 1 + src/css/custom.css | 4 ++++ 5 files changed, 10 insertions(+), 20 deletions(-) diff --git a/docs/react-web-core/pre-call/3-virtual-bg.mdx b/docs/react-web-core/pre-call/3-virtual-bg.mdx index 6202d67903..41cc4d1df9 100644 --- a/docs/react-web-core/pre-call/3-virtual-bg.mdx +++ b/docs/react-web-core/pre-call/3-virtual-bg.mdx @@ -38,18 +38,10 @@ If you installed the package using a script tag, the `DyteVideoBackgroundTransfo ```js const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({ - meeting, - segmentationConfig: { - model: 'mlkit', // could also be 'meet' - backend: 'wasmSimd', - inputResolution: '256x256', // '256x144' for meet - pipeline: 'webgl2', // canvas2dCpu | webgl2 - targetFps: 35, - deferInputResizing: true, - }, + meeting: meeting }); -meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true }); +await meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true }); ``` diff --git a/docs/react-web-core/upgrade.mdx b/docs/react-web-core/upgrade.mdx index 4c210ca28f..47f569f81e 100644 --- a/docs/react-web-core/upgrade.mdx +++ b/docs/react-web-core/upgrade.mdx @@ -12,6 +12,7 @@ With this major release we tried to reduce the number of breaking changes to the - meeting.self.`clientSpecificId` - > meeting.self.`customParticipantId` - meeting.meta.`roomName` β†’ meeting.meta.`meetingId` - meeting.self.`suggestedTheme` β†’ meeting.self.`config` +- Dropped meeting.meta.`joined` (Duplicate of meeting.self.`joined`) **2. Event changes ️‍πŸ”₯ ️‍πŸ”₯ ️‍πŸ”₯** diff --git a/docs/web-core/pre-call/3-virtual-bg.mdx b/docs/web-core/pre-call/3-virtual-bg.mdx index 7a123341ec..ed856785b7 100644 --- a/docs/web-core/pre-call/3-virtual-bg.mdx +++ b/docs/web-core/pre-call/3-virtual-bg.mdx @@ -38,18 +38,10 @@ If you installed the package using a script tag, the `DyteVideoBackgroundTransfo ```js const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({ - meeting, - segmentationConfig: { - model: 'mlkit', // could also be 'meet' - backend: 'wasmSimd', - inputResolution: '256x256', // '256x144' for meet - pipeline: 'webgl2', // canvas2dCpu | webgl2 - targetFps: 35, - deferInputResizing: true, - }, + meeting: meeting }); -meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true }); +await meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true }); ``` ### Add an image as a background diff --git a/docs/web-core/upgrade.mdx b/docs/web-core/upgrade.mdx index 4c210ca28f..47f569f81e 100644 --- a/docs/web-core/upgrade.mdx +++ b/docs/web-core/upgrade.mdx @@ -12,6 +12,7 @@ With this major release we tried to reduce the number of breaking changes to the - meeting.self.`clientSpecificId` - > meeting.self.`customParticipantId` - meeting.meta.`roomName` β†’ meeting.meta.`meetingId` - meeting.self.`suggestedTheme` β†’ meeting.self.`config` +- Dropped meeting.meta.`joined` (Duplicate of meeting.self.`joined`) **2. Event changes ️‍πŸ”₯ ️‍πŸ”₯ ️‍πŸ”₯** diff --git a/src/css/custom.css b/src/css/custom.css index c56e1c0b3d..4ecc57e550 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1436,3 +1436,7 @@ h2.anchor > code, h3.anchor > code { .module-seperation { @apply border-t; } + +.warning_icon { + @apply w-10 h-10 inline-block text-red-500 -mt-2; +} \ No newline at end of file