diff --git a/docs/guides/capabilities/plugins/index.mdx b/docs/guides/capabilities/plugins/index.mdx index f6bf5346b3..f255ccdd54 100644 --- a/docs/guides/capabilities/plugins/index.mdx +++ b/docs/guides/capabilities/plugins/index.mdx @@ -1,259 +1,299 @@ # Plugins -Dyte Plugins allow you to build collaborative and immersive experiences in your meetings without ever having to the meeting. The guides listed here will help you enable or disable plugins during meetings, configure existing plugins and even create new plugins with the help of Meeting APIs and built-in realtime database. +Dyte Plugins allow you to build collaborative and immersive experiences in your meetings without ever having to leave the meeting. The guides listed here will help you enable or disable plugins during meetings, configure existing plugins and even create new plugins with the help of Meeting APIs and built-in realtime database. -## Enable Plugins +## Usage -Here is an introduction on how to enable plugins in your meetings: +### Methods / Properties
Core
+ +Here is an introduction on the basics of plugins in your meetings: - -The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. + -The snippet below displays all plugins and activates a plugin on click. +#### List all plugins ```js const plugins = meeting.plugins.all.toArray(); +``` -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = plugin.name; - button.onclick = async () => { - await plugin.activate(); - }; - document.body.appendChild(button); -}); +Each plugin object in the array is of type [DytePlugin](/web-core/reference/DytePlugin) + +#### Activate plugin + +The `activate()` method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. + +The snippet below finds a plugin by name and activates it + +```js +const plugins = meeting.plugins.all.toArray(); +const whiteboard = plugins.find((p) => p.name == 'Whiteboard'); + +await whiteboard.activate(); +``` + +#### Deactivate plugin + +``` +whiteboard.deactivate() ``` -The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. -The snippet below displays all plugins and activates a plugin on click. +#### List all plugins ```js const plugins = meeting.plugins.all.toArray(); +``` -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = plugin.name; - button.onclick = async () => { - await plugin.activate(); - }; - document.body.appendChild(button); -}); +Each plugin object in the array is of type [DytePlugin](/react-web-core/reference/DytePlugin) + +#### Activate plugin + +The `activate()` method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. + +The snippet below finds a plugin by name and activates it + +```js +const plugins = meeting.plugins.all.toArray(); +const whiteboard = plugins.find((p) => p.name == 'Whiteboard'); + +await whiteboard.activate(); +``` + +#### Deactivate plugin + +``` +whiteboard.deactivate() ``` -:::info +#### List all plugins + +```dart +List plugins = await dyteClient.plugins.all; +``` + +Each plugin object in the array is of type DytePlugin + +#### Activate plugin -Plugins are not yet available for FlutterCore. +The `activate()` method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. -::: +The snippet below finds a plugin by name and activates it + +```dart +List plugins = await dyteClient.plugins.all; +DytePlugin whiteboard = plugins.firstWhere((p) => p.name == 'Whiteboard'); + +await whiteboard.activate(); +``` + +#### Deactivate plugin + +```dart +whiteboard.deactivate() +``` -The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. -The snippet below displays all plugins and activates a plugin on click. +#### List all plugins ```js const plugins = meeting.plugins.all.toArray(); +``` -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = plugin.name; - button.onclick = async () => { - await plugin.activate(); - }; - document.body.appendChild(button); -}); +Each plugin object in the array is of type DytePlugin + +#### Activate plugin + +The `activate()` method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. + +The snippet below finds a plugin by name and activates it + +```js +const plugins = meeting.plugins.all.toArray(); +const whiteboard = plugins.find((p) => p.name == 'Whiteboard'); + +await whiteboard.activate(); +``` + +#### Deactivate plugin + +``` +whiteboard.deactivate() ``` -The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. You can get all plugins in a meeting using `meeting.plugins.all`. -The snippet below displays activates a given plugin. +#### List all plugins ```kotlin - val plugin = meeting.plugins.all['pluginName'] - plugin?.activate() +val plugins = meeting.plugins.all ``` -This will trigger a callback in onPluginActivated(). To be able to listen to plugin events you need to implement a methods from callback `DytePluginEventsListener`. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener). +Each plugin object in the array is of type DytePlugin + +#### Activate plugin + +The `activate()` method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins array and can be accessed from `meeting.plugins.active`. + +The snippet below finds a plugin by name and activates it ```kotlin - meeting.addMeetingRoomEventsListener(object : - DyteMeetingRoomEventsListener { - override fun onPluginActivated(plugin: DytePlugin) { - super.onPluginActivated(plugin) - // your code to handle plugin activation - } +val plugins = meeting.plugins.all +val whiteboard = plugins.find { p -> p.name == "Whiteboard" } - override fun onPluginDeactivated(plugin: DytePlugin) { - super.onPluginDeactivated(plugin) - // your code to handle plugin de-activation - } +whiteboard.activate(); +``` + +#### Deactivate plugin + +``` +whiteboard.deactivate() ``` -The activate() method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins map and can be accessed from `meeting.plugins.active`. You can get all plugins in a meeting using `meeting.plugins.all`. +#### List all plugins -The snippet below displays activates a given plugin. - -```kotlin - val plugin = meeting.plugins.all['pluginName'] - plugin?.activate() +```swift +let plugins = meeting.plugins.all ``` -This will trigger a callback in onPluginActivated(). To be able to listen to plugin events you need to implement a methods from callback `DytePluginEventsListener`. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener). +Each plugin object in the array is of type DytePlugin + +#### Activate plugin + +The `activate()` method activates a plugin for all users in the meeting. When you activate a plugin, it moves into the active plugins array and can be accessed from `meeting.plugins.active`. + +The snippet below finds a plugin by name and activates it ```swift -extension MeetingViewModel: DytePluginEventsListener { +let plugins = meeting.plugins.all +let whiteboard = plugins.first { $0.name == "Whiteboard" } - func onPluginActivated(plugin: DytePlugin) { - // your code to handle plugin activation - } +whiteboard.activate(); +``` -} +#### Deactivate plugin + +``` +whiteboard.deactivate() ``` -## Disable Plugins - -Here is an introduction on how to disable plugins in your meetings: +### Events
Core
- -The deactivate() method deactivates the plugin for all users in the meeting. When you deactivate a plugin, it gets removed from the active plugins map and can only be accessed from meeting.plugins.all. + -The snippet below displays all active plugins and deactivate a plugin on click. +Each `plugin` object emits an `enabled` event and a `closed` event ```js -const plugins = meeting.plugins.active.toArray(); - -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = `Deactivate ${plugin.name}`; - button.onclick = async () => { - await plugin.deactivate(); - }; - document.body.appendChild(button); +const whiteboard = plugins.find((p) => p.name == 'Whiteboard'); +whiteboard.on('enabled', () => { + console.log('Whiteboard has been enabled'); +}); +whiteboard.on('closed', () => { + console.log('Whiteboard has been disabled'); }); -``` - -Alternately, to disable a particular plugin, you can filter the `plugins` array by name of the plugins you want to deactivate. - -```js -const plugins = meeting.plugins.active.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.deactivate(); ``` -The deactivate() method deactivates the plugin for all users in the meeting. When you deactivate a plugin, it gets removed from the active plugins map and can only be accessed from meeting.plugins.all. -The snippet below displays all active plugins and deactivate a plugin on click. +Each `plugin` object emits an `enabled` event and a `closed` event ```js -const plugins = meeting.plugins.active.toArray(); - -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = `Deactivate ${plugin.name}`; - button.onclick = async () => { - await plugin.deactivate(); - }; - document.body.appendChild(button); +const whiteboard = plugins.find((p) => p.name == 'Whiteboard'); +whiteboard.on('enabled', () => { + console.log('Whiteboard has been enabled'); +}); +whiteboard.on('closed', () => { + console.log('Whiteboard has been disabled'); }); -``` - -Alternately, to disable a particular plugin, you can filter the `plugins` array by name of the plugins you want to deactivate. - -```js -const plugins = meeting.plugins.active.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.deactivate(); ``` -:::info +```dart + +class PluginNotifier extends DytePluginEventsListener { + @override + void onPluginActivated(DytePlugin plugin) { + state = OnPluginActivated(plugin); + } + + @override + void onPluginDeactivated(DytePlugin plugin) { + state = OnPluginDeactivated(plugin); + } +} -Plugins are not yet available for FlutterCore. +meeting.addPluginEventsListener(PluginNotifier()) -::: +``` -The deactivate() method deactivates the plugin for all users in the meeting. When you deactivate a plugin, it gets removed from the active plugins map and can only be accessed from meeting.plugins.all. -The snippet below displays all active plugins and deactivate a plugin on click. +Each `plugin` object emits an `enabled` event and a `closed` event ```js -const plugins = meeting.plugins.active.toArray(); - -plugins.forEach((plugin: DytePlugin) => { - const button = document.createElement('button'); - button.innerText = `Deactivate ${plugin.name}`; - button.onclick = async () => { - await plugin.deactivate(); - }; - document.body.appendChild(button); +const whiteboard = plugins.find((p) => p.name == 'Whiteboard'); +whiteboard.on('enabled', () => { + console.log('Whiteboard has been enabled'); +}); +whiteboard.on('closed', () => { + console.log('Whiteboard has been disabled'); }); -``` - -Alternately, to disable a particular plugin, you can filter the `plugins` array by name of the plugins you want to deactivate. - -```js -const plugins = meeting.plugins.active.toArray(); -const plugin = plugins.find((p) => p.name === 'YouTube'); - -await plugin?.deactivate(); ``` -The deactivate() method activates a plugin for all users in the meeting. You can access all active plugins from `meeting.plugins.active`. - -The snippet below displays deactivate a single plugin. +Any plugin activation / deactivation will trigger a callback. To be able to listen to plugin events you need to implement a methods from callback `DytePluginEventsListener`. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener). ```kotlin - val plugin = meeting.plugins.active['pluginName'] - plugin?.deactivate() +meeting.addMeetingRoomEventsListener(object : + DyteMeetingRoomEventsListener { + override fun onPluginActivated(plugin: DytePlugin) { + super.onPluginActivated(plugin) + // your code to handle plugin activation + } + + override fun onPluginDeactivated(plugin: DytePlugin) { + super.onPluginDeactivated(plugin) + // your code to handle plugin de-activation + } + } +) ``` -The deactivate() method activates a plugin for all users in the meeting. You can access all active plugins from `meeting.plugins.active`. - -The snippet below displays deactivate a single plugin. - -```swift - val plugin = meeting.plugins.active['pluginName'] - plugin?.deactivate() -``` - -When a plugin is deactivated, it triggers a callback in onPluginDeactivated(). To be able to listen to plugin events you need to implement a methods from callback `DytePluginEventsListener`. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener). +Any plugin activation / deactivation will trigger a callback. To be able to listen to plugin events you need to implement a methods from callback `DytePluginEventsListener`. You can subscribe to this events by calling meeting.addPluginEventsListener(dytePluginEventsListener). ```swift extension MeetingViewModel: DytePluginEventsListener { + func onPluginActivated(plugin: DytePlugin) { + // your code to handle plugin activation + } + func onPluginDeactivated(plugin: DytePlugin) { - // your code to handle plugin de-activation + // your code to handle plugin activation } } @@ -261,25 +301,3 @@ extension MeetingViewModel: DytePluginEventsListener { - -## Configure existing plgins - -For further reading on configuring existing plugins, check out the guides below: - - - - - - diff --git a/docs/guides/capabilities/polls/getting_started.mdx b/docs/guides/capabilities/polls/getting_started.mdx index 1832395ac7..2419e4626a 100644 --- a/docs/guides/capabilities/polls/getting_started.mdx +++ b/docs/guides/capabilities/polls/getting_started.mdx @@ -137,7 +137,7 @@ The type `DytePollMessage` is the main class for any poll in Dyte. It also conta ## Creating a new Poll -### Using the coreSDK +### Using the Core SDK The `Polls` object gives a create function to create a new poll. It accepts the following parameters: diff --git a/docs/guides/capabilities/polls/index.mdx b/docs/guides/capabilities/polls/index.mdx index be7db20013..3d13425bd4 100644 --- a/docs/guides/capabilities/polls/index.mdx +++ b/docs/guides/capabilities/polls/index.mdx @@ -1,9 +1,9 @@ # Polls -Polls can be integrated in all kinds of Dyte meetings ranging from voice to livestream. Dyte's SDK makes it really simple to perform all operations required to create and run a poll. You can choose to use the coreSDK with Dyte's UIKit to create seamless poll interactions in a couple of minutes, or you can also use the coreSDK with your custom components. +Polls can be integrated in all kinds of Dyte meetings ranging from voice to livestream. Dyte's SDK makes it really simple to perform all operations required to create and run a poll. You can choose to use the Core SDK with Dyte's UIKit to create seamless poll interactions in a couple of minutes, or you can also use the Core SDK with your custom components. -The guides walk you through the functionalities that the coreSDK and the UIKit provide you. +The guides walk you through the functionalities that the Core SDK and the UIKit provide you. -1. [Getting started with Polls](./polls/getting_started) walks through creating polls from the coreSDK +1. [Getting started with Polls](./polls/getting_started) walks through creating polls from the Core SDK 2. [Integrating UIKit for Polls](./polls/uikit) helps understand the UI components that can be used to make integrating polls even easier diff --git a/docs/guides/capabilities/polls/uikit.mdx b/docs/guides/capabilities/polls/uikit.mdx index c70e7547f4..9c22565bdb 100644 --- a/docs/guides/capabilities/polls/uikit.mdx +++ b/docs/guides/capabilities/polls/uikit.mdx @@ -4,7 +4,7 @@ Using Dyte's UIKit you can simplify the process of adding polls in your meetings ### Prerequisites -1. Install coreSDK for your framework +1. Install Core SDK for your framework 2. Install UIKit for your framework ## Dyte Poll Form : Create a new poll diff --git a/docs/guides/capabilities/screensharing/_category_.json b/docs/guides/capabilities/screensharing/_category_.json index d6f0876a4c..f6672940e5 100644 --- a/docs/guides/capabilities/screensharing/_category_.json +++ b/docs/guides/capabilities/screensharing/_category_.json @@ -1,4 +1,4 @@ { - "position": 8, + "position": 3, "label": "Screen Sharing" -} +} \ No newline at end of file diff --git a/docs/guides/capabilities/screensharing/displaying.mdx b/docs/guides/capabilities/screensharing/displaying.mdx new file mode 100644 index 0000000000..89d7b53dca --- /dev/null +++ b/docs/guides/capabilities/screensharing/displaying.mdx @@ -0,0 +1,235 @@ +# Displaying Screenshare + +## Usage + +### Events
Core
+ +Once any user starts sharing the screen, use the screenshare view from the UIKit to display the shared screen. The component allows you to nest other components inside it to create a custom layout based on your needs. Check out a the sample usage of UIKit on your prefered platform. + + + + +```jsx +meeting.participants.joined.on('screenShareUpdate', (participant) => { + if (participant.screenShareEnabled) { + // participant.screenShareTrack + } else { + // handle stop screen share + } +}); +``` + + + + +```jsx +const { meeting } = useDyteMeeting(); + +// Array of participants having their screenshare on +const ssParticipants = useDyteSelector((m) => + m.participant.joined.toArray().filter((p) => p.screenShareEnabled) +); + +// or using traditional event listeners +meeting.participants.joined.on('screenShareUpdate', (participant) => { + if (participant.screenShareEnabled) { + // participant.screenShareTrack + } else { + // handle stop screen share + } +}); +``` + + + + +```dart +... + +@override +void onScreenShareStarted(DyteJoinedMeetingParticipant participant) { + /// handle screen share started of `DyteJoinedMeetingParticipant` participant +} + +@override +void onScreenShareEnded(DyteJoinedMeetingParticipant participant) { + /// handle screen share ended of `DyteJoinedMeetingParticipant` participant +} + +... +``` + + + + +```jsx +const { meeting } = useDyteMeeting(); + +// Array of participants having their screenshare on +const ssParticipants = useDyteSelector((m) => + m.participant.joined.toArray().filter((p) => p.screenShareEnabled) +); + +// or using traditional event listeners +meeting.participants.joined.on('screenShareUpdate', (participant) => { + if (participant.screenShareEnabled) { + // participant.screenShareTrack + } else { + // handle stop screen share + } +}); +``` + + + + +```kotlin + +private val participantEventsListener = object : DyteParticipantEventsListener { + override fun onScreenSharesUpdated() { + super.onScreenSharesUpdated() + + ... + } + } + +``` + + + + +```swift +DyteParticipantEventsListener { + func onScreenSharesUpdated() { + // your code here to handle screenshares from meeting + } + func onScreenShareEnded(participant: DyteMeetingParticipant) { + // your code here to handle screenshare ended + } + + func onScreenShareStarted(participant: DyteMeetingParticipant) { + // your code here to handle screenshare started + } +} +``` + + + + +### Components
UI Kit
+ +This component does not render anything if the participant hasn't start sharing their screen. + + + + +```jsx + + + + + + + +``` + +Check out the [reference](/ui-kit/components/dyte-screenshare-view) for more details about the attributes. + +To create your own component, you can use the `screenShareTracks` property of the [local user](/web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. + + + + +```jsx +import { + DyteScreenshareView, + DyteNameTag, + DyteAudioVisualizer, +} from '@dytesdk/react-ui-kit'; + + + + + +; +``` + +Check out the [reference](/react-ui-kit/components/dyte-screenshare-view) for more details about the props. + +To create your own component, you can use the `screenShareTracks` property of the [local user](/react-web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. + + + + +```jsx + + + + + + + +``` + +Check out the [reference](/angular-ui-kit/components/dyte-screenshare-view) for more details about the attributes. + +To create your own component, you can use the `screenShareTracks` property of the [local user](/web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. + + + + +:::info +This UI component does not currently exist in the Flutter UIKit. +::: + + + + +```jsx +import { + DyteScreenshareView, + DyteNameTag, + DyteAudioVisualizer, +} from '@dytesdk/react-native-ui-kit'; + + + + + +; +``` + +Check out the [reference](/react-native/components/dyte-screenshare-view) for more details about the props. + +To create your own component, you can use the `screenShareTracks` property of the [local user](/rn-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. + + + + +:::info +This UI component does not currently exist in the Android UIKit. +::: + +You can create your own component. To do so use the `screenShareTrack` property of the [local user](/android-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. + + + + +:::info +This UI component does not currently exist in the iOS UIKit. +::: + +You can create your own component. To do so use the `screenShareTrack` property of the [local user](/ios-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. + + + diff --git a/docs/guides/capabilities/screensharing/enabling.mdx b/docs/guides/capabilities/screensharing/enabling.mdx new file mode 100644 index 0000000000..3f521864e6 --- /dev/null +++ b/docs/guides/capabilities/screensharing/enabling.mdx @@ -0,0 +1,274 @@ +--- +slug: 'basics' +sidebar_position: 1 +--- + +# Enable/Disable Screenshare + +Dyte allows you to enable multiple users to share their screens during a meeting session. To integrate screen sharing in your application, go through the following steps: + +## Usage + +### Methods/Properties
Core
+ +Once users have the permissions to share their screen, they need to be able to start or stop sharing their screens. Use the Core SDK to enable or disable screen sharing for the user. Follow the implementation based on the development platform you are using. + + + + +```jsx +// Enable Screenshare +await meeting.self.enableScreenShare(); + +// Disable Screenshare +await meeting.self.disableScreenShare(); +``` + +You can also define defaults for screen sharing during the client initialisation. Check out the [local user](/web-core/local-user/introduction#enable--disable-screen-share) reference for more details. + + + + +```jsx +const { meeting } = useDyteMeeting(); + +// Enable Screenshare +await meeting.self.enableScreenShare(); + +// Disable Screenshare +await meeting.self.disableScreenShare(); +``` + +You can also define defaults for screen sharing during the client initialization. Check out the [local user](/web-core/local-user/introduction#enable--disable-screen-share) reference for more details. + + + + +```jsx +const { meeting } = useDyteMeeting(); + +// Enable Screenshare +await meeting.self.enableScreenShare(); + +// Disable Screenshare +await meeting.self.disableScreenShare(); +``` + + + + +```dart +// Enable Screenshare +dyteClient.localUser.enableScreenShare(); + +// Disable Screenshare +dyteClient.localUser.disableScreenShare(); + +// Get current status +dyteClient.localUser.screenShareEnabled; +``` + + + + +```kotlin +// Enable Screenshare +meeting.localUser.enableScreenShare(); + +// Disable Screenshare +meeting.localUser.disableScreenShare(); + +// Get current status +meeting.localUser.screenShareEnabled; +``` + + + + +```swift +// Enable Screenshare +meeting.localUser.enableScreenShare(); + +// Disable Screenshare +meeting.localUser.disableScreenShare(); + +// Get current status +meeting.localUser.screenShareEnabled; +``` + + + + +### Events
Core
+ + + + +```jsx +meeting.self.on( + 'screenShareUpdate', + ({ screenShareEnabled, screenShareTracks }) => { + if (screenShareEnabled) { + // handle screen share start + } else { + // handle stop screen share + } + } +); +``` + + + + +```jsx +const { meeting } = useDyteMeeting(); + +const screenshareEnabled = useDyteSelector((m) => m.self.screenShareEnabled); + +// or using traditional event listeners +meeting.self.on( + 'screenShareUpdate', + ({ screenShareEnabled, screenShareTracks }) => { + if (screenShareEnabled) { + // handle screen share start + } else { + // handle stop screen share + } + } +); +``` + + + + +```jsx +const { meeting } = useDyteMeeting(); + +const screenshareEnabled = useDyteSelector((m) => m.self.screenShareEnabled); + +// or using traditional event listeners +meeting.self.on( + 'screenShareUpdate', + ({ screenShareEnabled, screenShareTracks }) => { + if (screenShareEnabled) { + // handle screen share start + } else { + // handle stop screen share + } + } +); +``` + + + + +### Components
UI Kit
+ +If you don't want to create your own button to toggle screen sharing, use the default button provided by our UI Kits. + + + + +```jsx + + + + + +``` + + + + +```jsx +import { DyteScreenShareToggle } from '@dytesdk/react-ui-kit'; + +
+ + + +
; +``` + + + + +```jsx + + + +``` + + + + +```jsx +import { DyteScreenShareToggle } from '@dytesdk/react-native-ui-kit'; + +
+ + + +
; +``` + + + + +## Configuration + +### Multiple Screenshare
Preset
+ +Configure the number of people who can screenshare at once using preset configuration + + + +### Preferred panel
Core
Web
+ +On web browsers, a user can choose between sharing a tab, a window or the entire screen. While there is no browser API to restrict to a specific surface type you can set a preferred display surface + + + + +```js +meeting = await DyteClient.init({ + authToken, + defaults: { + screenShare: { + displaySurface: 'window' | 'monitor' | 'browser', + }, + }, +}); +``` + + + + +```js +const [meeting, initMeeting] = useDyteClient(); + +const join = () => { + initMeeting({ + authToken, + defaults: { + screenShare: { + displaySurface: 'window' | 'monitor' | 'browser', + }, + }, + }); +}; +``` + + + diff --git a/docs/guides/capabilities/screensharing/index.mdx b/docs/guides/capabilities/screensharing/index.mdx deleted file mode 100644 index 31034ecbc7..0000000000 --- a/docs/guides/capabilities/screensharing/index.mdx +++ /dev/null @@ -1,310 +0,0 @@ -# Screen Sharing - -Dyte allows you to enable multiple users to share their screens during a meeting session. To integrate screen sharing in your application, go through the following steps: - -## Screen Sharing Permission - -First you want to ensure that the user has permission to share the screen. This can be configured using the preset that is assigned to the user in a meeting session. You can always change the configurations of the preset. - -To allow the participant to share their screen, make sure to set `canAllowParticipantScreensharing` to `true` in the preset configuration. - -To allow certain users to share their screen during an active meeting session, you can control the preset the user is assigned to (`presetName` property of the participant object) or update the configuration of their current preset. - -:::info - -Presets can be updated from the Dyte developer portal or using the [update preset API](/api#/operations/patch-presets-preset_id). - -::: - -## Enable/Disable Screen Sharing - -Once users have the permissions to share their screen, they need to be able to start or stop sharing their screens. Use the coreSDK to enable or disable screen sharing for the user. Follow the implementation based on the development platform you are using. - - - - -```jsx -// Enable Screenshare -await meeting.self.enableScreenShare(); - -// Disable Screenshare -await meeting.self.disableScreenShare(); - -// Get current status -meeting.self.screenShareEnabled; -``` - -You can also define defaults for screen sharing during the client initialisation. Check out the [local user](/web-core/local-user/introduction#enable--disable-screen-share) reference for more details. - - - - -```jsx -// Enable Screenshare -await meeting.self.enableScreenShare(); - -// Disable Screenshare -await meeting.self.disableScreenShare(); - -// Get current status -meeting.self.screenShareEnabled; -``` - -You can also define defaults for screen sharing during the client initialisation. Check out the [local user](/web-core/local-user/introduction#enable--disable-screen-share) reference for more details. - - - - -```dart -// Enable Screenshare -dyteClient.localUser.enableScreenShare(); - -// Disable Screenshare -dyteClient.localUser.disableScreenShare(); - -// Get current status -dyteClient.localUser.screenShareEnabled; -``` - - - - -```jsx -// Enable Screenshare -await meeting.self.enableScreenShare(); - -// Disable Screenshare -await meeting.self.disableScreenShare(); - -// Get current status -meeting.self.screenShareEnabled; -``` - - - - -```kotlin -// Enable Screenshare -meeting.localUser.enableScreenShare(); - -// Disable Screenshare -meeting.localUser.disableScreenShare(); - -// Get current status -meeting.localUser.screenShareEnabled; -``` - - - - -```swift -// Enable Screenshare -meeting.localUser.enableScreenShare(); - -// Disable Screenshare -meeting.localUser.disableScreenShare(); - -// Get current status -meeting.localUser.screenShareEnabled; -``` - - - - -## Building UI for screen sharing - -### Screen share View - -Once the user starts sharing the screen, use the screenshare view from the UIKit to display the shared screen. The component allows you to nest other components inside it to create a custom layout based on your needs. Check out a the sample usage of UIKit on your prefered platform. - -This component does not render anything if the participant hasn't start sharing their screen. - - - - -```jsx - - - - - - - -``` - -Check out the [reference](/ui-kit/components/dyte-screenshare-view) for more details about the attributes. - -To create your own component, you can use the `screenShareTracks` property of the [local user](/web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. - - - - -```jsx -import { - DyteScreenshareView, - DyteNameTag, - DyteAudioVisualizer, -} from '@dytesdk/react-ui-kit'; - - - - - -; -``` - -Check out the [reference](/react-ui-kit/components/dyte-screenshare-view) for more details about the props. - -To create your own component, you can use the `screenShareTracks` property of the [local user](/react-web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. - - - - -```jsx - - - - - -``` - -Check out the [reference](/angular-ui-kit/components/dyte-screenshare-view) for more details about the attributes. - -To create your own component, you can use the `screenShareTracks` property of the [local user](/web-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. - - - - -:::info -This UI component does not currently exist in the Flutter UIKit. -::: - - - - -```jsx -import { - DyteScreenshareView, - DyteNameTag, - DyteAudioVisualizer, -} from '@dytesdk/react-native-ui-kit'; - - - - - -; -``` - -Check out the [reference](/react-native/components/dyte-screenshare-view) for more details about the props. - -To create your own component, you can use the `screenShareTracks` property of the [local user](/rn-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. - - - - -:::info -This UI component does not currently exist in the Android UIKit. -::: - -You can create your own component. To do so use the `screenShareTrack` property of the [local user](/android-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. - - - - -:::info -This UI component does not currently exist in the iOS UIKit. -::: - -You can create your own component. To do so use the `screenShareTrack` property of the [local user](/ios-core/local-user/introduction) to get the list of screen share tracks and control how you want to display them. - - - - -### Screen share toggle - -You can create your own button to toggle screen sharing for the user or use the default button provided by the UIKit. - - - - -```jsx - - - - - -``` - - - - -```jsx -import { DyteScreenShareToggle } from '@dytesdk/react-ui-kit'; -
- - - -
; -``` - - - - -```jsx - - - -``` - - - - -:::info -This UI component does not currently exist in the Flutter UIKit. -::: - - - - -```jsx -import { DyteScreenShareToggle } from '@dytesdk/react-native-ui-kit'; -
- - - -
; -``` - - - - -:::info -This UI component does not currently exist in the Android UIKit. -::: - - - - -:::info -This UI component does not currently exist in the iOS UIKit. -::: - - - diff --git a/docs/guides/live-video/concepts.mdx b/docs/guides/live-video/concepts.mdx index a4e1432701..1f485b76ca 100644 --- a/docs/guides/live-video/concepts.mdx +++ b/docs/guides/live-video/concepts.mdx @@ -79,10 +79,10 @@ Once you have grabbed your API key, we can begin to take a look at your server s ### Core SDK -That’s all for the server, now let’s move to the client side which will majorly define how your user interacts with the services. In video calls, there are a number of interactions that the user needs to perform. These interactions can become really complex with things like handling audio/video permissions, but Dyte's SDK makes it really simple for you. It abstracts away all these tiresome details through a thin layer of abstraction that is our **coreSDK**. You still get granular control without having to worry about messy implementation details. +That’s all for the server, now let’s move to the client side which will majorly define how your user interacts with the services. In video calls, there are a number of interactions that the user needs to perform. These interactions can become really complex with things like handling audio/video permissions, but Dyte's SDK makes it really simple for you. It abstracts away all these tiresome details through a thin layer of abstraction that is our **Core SDK**. You still get granular control without having to worry about messy implementation details. -To connect with the meetings from the client, you need to initialise the coreSDK. This requires the `authToken` which is unique to every participant in a meeting. Your client needs to connect with the meetings. The `authToken`is returned from the [Add Participant API](api#/operations/add_participant). The coreSDK itself does not provide any UI components but instead is a data-only API layer. +To connect with the meetings from the client, you need to initialise the Core SDK. This requires the `authToken` which is unique to every participant in a meeting. Your client needs to connect with the meetings. The `authToken`is returned from the [Add Participant API](api#/operations/add_participant). The Core SDK itself does not provide any UI components but instead is a data-only API layer. ### UIKit -We have separated the load of building user interactions from the UI components. You can simply use the coreSDK to enable components to perform actions around the meetings and extend your existing UI libraries. But to make your life easier, we offer a UIKit that can be easily integrated with your application including your branding! The UIKit provides multiple kinds of UI components which follow the atomic design principles. You can choose from a variety of basic components like buttons to very advanced components like meeting pages. Our UIKit is built on top of the coreSDK and it cannot function in isolation! Make sure you grab both the UIKit and the coreSDK when you choose to work with our UIKit. To learn more about how to work with UIKit you can head [here](/guides/capabilities/customize-ui/use-ui-kit-components). +We have separated the load of building user interactions from the UI components. You can simply use the Core SDK to enable components to perform actions around the meetings and extend your existing UI libraries. But to make your life easier, we offer a UIKit that can be easily integrated with your application including your branding! The UIKit provides multiple kinds of UI components which follow the atomic design principles. You can choose from a variety of basic components like buttons to very advanced components like meeting pages. Our UIKit is built on top of the Core SDK and it cannot function in isolation! Make sure you grab both the UIKit and the Core SDK when you choose to work with our UIKit. To learn more about how to work with UIKit you can head [here](/guides/capabilities/customize-ui/use-ui-kit-components). diff --git a/docs/guides/voice-conf/concepts.mdx b/docs/guides/voice-conf/concepts.mdx index a4e1432701..1f485b76ca 100644 --- a/docs/guides/voice-conf/concepts.mdx +++ b/docs/guides/voice-conf/concepts.mdx @@ -79,10 +79,10 @@ Once you have grabbed your API key, we can begin to take a look at your server s ### Core SDK -That’s all for the server, now let’s move to the client side which will majorly define how your user interacts with the services. In video calls, there are a number of interactions that the user needs to perform. These interactions can become really complex with things like handling audio/video permissions, but Dyte's SDK makes it really simple for you. It abstracts away all these tiresome details through a thin layer of abstraction that is our **coreSDK**. You still get granular control without having to worry about messy implementation details. +That’s all for the server, now let’s move to the client side which will majorly define how your user interacts with the services. In video calls, there are a number of interactions that the user needs to perform. These interactions can become really complex with things like handling audio/video permissions, but Dyte's SDK makes it really simple for you. It abstracts away all these tiresome details through a thin layer of abstraction that is our **Core SDK**. You still get granular control without having to worry about messy implementation details. -To connect with the meetings from the client, you need to initialise the coreSDK. This requires the `authToken` which is unique to every participant in a meeting. Your client needs to connect with the meetings. The `authToken`is returned from the [Add Participant API](api#/operations/add_participant). The coreSDK itself does not provide any UI components but instead is a data-only API layer. +To connect with the meetings from the client, you need to initialise the Core SDK. This requires the `authToken` which is unique to every participant in a meeting. Your client needs to connect with the meetings. The `authToken`is returned from the [Add Participant API](api#/operations/add_participant). The Core SDK itself does not provide any UI components but instead is a data-only API layer. ### UIKit -We have separated the load of building user interactions from the UI components. You can simply use the coreSDK to enable components to perform actions around the meetings and extend your existing UI libraries. But to make your life easier, we offer a UIKit that can be easily integrated with your application including your branding! The UIKit provides multiple kinds of UI components which follow the atomic design principles. You can choose from a variety of basic components like buttons to very advanced components like meeting pages. Our UIKit is built on top of the coreSDK and it cannot function in isolation! Make sure you grab both the UIKit and the coreSDK when you choose to work with our UIKit. To learn more about how to work with UIKit you can head [here](/guides/capabilities/customize-ui/use-ui-kit-components). +We have separated the load of building user interactions from the UI components. You can simply use the Core SDK to enable components to perform actions around the meetings and extend your existing UI libraries. But to make your life easier, we offer a UIKit that can be easily integrated with your application including your branding! The UIKit provides multiple kinds of UI components which follow the atomic design principles. You can choose from a variety of basic components like buttons to very advanced components like meeting pages. Our UIKit is built on top of the Core SDK and it cannot function in isolation! Make sure you grab both the UIKit and the Core SDK when you choose to work with our UIKit. To learn more about how to work with UIKit you can head [here](/guides/capabilities/customize-ui/use-ui-kit-components). diff --git a/src/css/custom.css b/src/css/custom.css index 1eb9586679..7f94b0904c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1221,3 +1221,27 @@ html[data-theme='dark'] .video_sidebar_header > div > a::before { border-right: 1px solid rgb(240, 240, 240); border-left: 1px solid rgb(240, 240, 240); } + +.header-tag { + @apply ml-1 mt-0.5 inline rounded-md bg-secondary-700 p-1 text-xs text-text-400; +} + +.header-tag.tag-core { + @apply bg-teal-500 text-white; +} + +.header-tag.tag-ui { + @apply bg-fuchsia-400 text-white; +} + +.table-of-contents .header-tag { + @apply mt-0 rounded-sm py-0.5 text-[0.5rem]; +} + +.anchor { + @apply flex items-center; +} + +.max-512 { + max-width: 512px; +} diff --git a/static/api/v2.yaml b/static/api/v2.yaml index b49bb1782e..7d3463a09b 100644 --- a/static/api/v2.yaml +++ b/static/api/v2.yaml @@ -2680,6 +2680,37 @@ paths: $ref: '#/components/requestBodies/UpdatePresetBody' tags: - Presets + '/sessions/peer-report/{peer_id}': + parameters: + - schema: + type: string + name: peer_id + in: path + required: true + description: ID of the peer + get: + summary: Fetch details of peer + tags: + - Sessions + responses: + '200': + $ref: '#/components/responses/GetParticipantDataFromPeerId' + operationId: GetParticipantDataFromPeerId + x-stoplight: + id: b693pckykbu4q + description: Returns details of the given peer ID along with call statistics for the given session ID. + parameters: + - schema: + type: string + enum: + - device_info + - ip_information + - precall_network_information + - events + - quality_stats + in: query + name: filters + description: Comma separated list of filters to apply. Note that there must be no spaces between the filters. components: schemas: LivestreamWithSessions: @@ -5902,6 +5933,855 @@ components: - $ref: '#/components/schemas/Preset' required: - data + GetParticipantDataFromPeerId: + description: Returns details of a participant (using peer id) along with callstats data. + content: + application/json: + schema: + type: object + properties: + success: + type: boolean + data: + type: object + properties: + participant: + type: object + properties: + id: + type: string + user_id: + type: string + custom_participant_id: + type: string + display_name: + type: string + role: + type: string + joined_at: + type: string + left_at: + type: string + duration: + type: number + created_at: + type: string + updated_at: + type: string + peer_stats: + type: object + properties: + events: + type: array + items: + type: object + properties: + type: + type: string + timestamp: + type: string + metadata: + type: object + properties: + connection_info: + type: object + properties: + ip_details: + type: object + properties: + city: + type: string + country: + type: string + region: + type: string + loc: + type: string + timezone: + type: string + ip: + type: string + postal: + type: string + asn: + type: object + properties: + asn: + type: string + effective_network_type: + type: string + location: + type: object + properties: + coords: + type: object + properties: + latitude: + type: number + longitude: + type: number + turn_connectivity: + type: boolean + connectivity: + type: object + properties: + host: + type: boolean + relay: + type: boolean + reflexive: + type: boolean + throughput: + type: integer + fractional_loss: + type: integer + r_t_t: + type: number + jitter: + type: integer + backend_r_t_t: + type: number + device_info: + type: object + properties: + browser: + type: string + browser_version: + type: string + cpus: + type: integer + engine: + type: string + is_mobile: + type: boolean + os: + type: string + os_version: + type: string + sdk_name: + type: string + sdk_version: + type: string + user_agent: + type: string + webgl_support: + type: 'null' + ip_information: + type: object + properties: + city: + type: string + country: + type: string + timezone: + type: string + region: + type: string + asn: + type: object + properties: + asn: + type: string + ipv4: + type: string + ip_location: + type: string + org: + type: string + precall_network_information: + type: object + properties: + backend_rtt: + type: number + effective_networktype: + type: string + fractional_loss: + type: integer + jitter: + type: integer + reflexive_connectivity: + type: boolean + relay_connectivity: + type: boolean + rtt: + type: number + throughput: + type: integer + turn_connectivity: + type: boolean + quality_stats: + type: object + properties: + audio_stats: + type: array + items: + type: object + properties: {} + video_stats: + type: array + items: + type: object + properties: {} + peer_ids: + type: array + items: + type: string + start: + type: 'null' + end: + type: 'null' + total_audio_packets: + type: integer + total_audio_packets_lost: + type: integer + total_video_packets: + type: integer + total_video_packets_lost: + type: integer + first_audio_packet_received: + type: 'null' + first_video_packet_received: + type: 'null' + last_audio_packet_received: + type: 'null' + last_video_packet_received: + type: 'null' + average_quality: + type: integer + audio_bandwidth: + type: integer + video_bandwidth: + type: integer + peer_report: + type: object + properties: + metadata: + type: object + properties: + events: + type: array + items: + type: object + properties: + name: + type: string + timestamp: + type: string + pc_metadata: + type: array + items: + type: object + properties: + effective_network_type: + type: string + reflexive_connectivity: + type: boolean + relay_connectivity: + type: boolean + turn_connectivity: + type: boolean + timestamp: + type: string + audio_devices_updates: + type: array + items: + type: object + properties: {} + video_devices_updates: + type: array + items: + type: object + properties: {} + speaker_devices_updates: + type: array + items: + type: object + properties: {} + selected_device_updates: + type: array + items: + type: object + properties: {} + candidate_pairs: + type: object + properties: + producing_transport: + type: array + items: + type: object + properties: + nominated: + type: boolean + current_round_trip_time: + type: number + total_round_trip_time: + type: number + bytes_received: + type: integer + bytes_sent: + type: integer + available_outgoing_bitrate: + type: integer + last_packet_received_timestamp: + type: integer + last_packet_sent_timestamp: + type: integer + local_candidate_id: + type: string + remote_candidate_id: + type: string + bytes_discarded_on_send: + type: integer + packets_sent: + type: integer + packets_received: + type: integer + packets_discarded_on_send: + type: integer + local_candidate_type: + type: string + local_candidate_address: + type: string + local_candidate_port: + type: integer + local_candidate_protocol: + type: string + local_candidate_network_type: + type: string + local_candidate_related_address: + type: string + local_candidate_related_port: + type: integer + remote_candidate_type: + type: string + remote_candidate_address: + type: string + remote_candidate_port: + type: integer + remote_candidate_protocol: + type: string + consuming_transport: + type: array + items: + type: object + properties: {} + device_info: + type: object + properties: + cpus: + type: integer + is_mobile: + type: boolean + os: + type: string + os_version: + type: string + browser_metadata: + type: object + properties: + browser: + type: string + browser_version: + type: string + engine: + type: string + user_agent: + type: string + webgl_support: + type: 'null' + sdk_name: + type: string + sdk_version: + type: string + room_view_type: + type: string + ip_information: + type: object + properties: + city: + type: string + country: + type: string + timezone: + type: string + region: + type: string + asn: + type: object + properties: + asn: + type: string + ipv4: + type: string + quality: + type: object + properties: + video_consumer: + type: array + items: + type: object + properties: {} + audio_consumer: + type: array + items: + type: object + properties: {} + screenshare_video_consumer: + type: array + items: + type: object + properties: {} + screenshare_audio_consumer: + type: array + items: + type: object + properties: {} + video_producer: + type: array + items: + type: object + properties: {} + audio_producer: + type: array + items: + type: object + properties: + mos_quality: + type: integer + timestamp: + type: string + packets_lost: + type: integer + jitter: + type: integer + rtt: + type: + - integer + - number + packets_sent: + type: integer + bytes_sent: + type: integer + producer_id: + type: string + ssrc: + type: integer + mid: + type: string + screenshare_video_producer: + type: array + items: + type: object + properties: {} + screenshare_audio_producer: + type: array + items: + type: object + properties: {} + video_consumer_cumulative: + type: object + properties: {} + audio_consumer_cumulative: + type: object + properties: {} + screenshare_video_consumer_cumulative: + type: object + properties: {} + screenshare_audio_consumer_cumulative: + type: object + properties: {} + video_producer_cumulative: + type: object + properties: {} + screenshare_video_producer_cumulative: + type: object + properties: {} + audio_producer_cumulative: + type: object + properties: + quality_mos: + type: object + properties: + avg: + type: integer + p50: + type: integer + p75: + type: integer + p90: + type: integer + packet_loss: + type: object + properties: + avg: + type: integer + 50_or_greater_event_fraction: + type: integer + 25_or_greater_event_fraction: + type: integer + 10_or_greater_event_fraction: + type: integer + 5_or_greater_event_fraction: + type: integer + rtt: + type: object + properties: + avg: + type: number + 500ms_or_greater_event_fraction: + type: number + 250ms_or_greater_event_fraction: + type: number + 100ms_or_greater_event_fraction: + type: number + screenshare_audio_producer_cumulative: + type: object + properties: {} + x-examples: + Example 1: + success: true + data: + participant: + id: bd45f5a3-44d0-4d48-a9e5-b880b39d9e1c + user_id: aaad2360-4bf6-451d-b89a-98617f2bc549 + custom_participant_id: 0.svveiltvjko + display_name: sush + role: group_call_participant + joined_at: '2023-12-14T13:35:36.332Z' + left_at: '2023-12-14T13:36:42.872Z' + duration: 1.109 + created_at: '2023-12-14T13:35:36.346Z' + updated_at: '2023-12-14T13:36:42.907Z' + peer_stats: + events: + - type: precall_begin + timestamp: '2023-12-14T13:35:33.288Z' + - type: video_off + timestamp: '2023-12-14T13:35:35.182Z' + - type: audio_off + timestamp: '2023-12-14T13:35:35.558Z' + - type: call_join + metadata: + peer_meta_data: + user_id: aaad2360-4bf6-451d-b89a-98617f2bc549 + peer_id: bd45f5a3-44d0-4d48-a9e5-b880b39d9e1c + display_name: sush + room_u_u_i_d: 8b25af6b-14f4-4c50-948a-ad1ca48d4ad8 + room_view_type: groupCall + room_name: bbbf5e93-289c-4c9b-bd44-d677a9206df7 + device_info: + is_mobile: false + browser_name: Chrome + os_name: macOS + browser_version: 119.0.0.0 + os_version_name: 10.15.7 + engine_name: Blink + user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36' + memory: 8 + cpus: 8 + sdk_name: web-core + sdk_version: 1.21.1-staging.3 + meta_data: {} + permissions: {} + meeting_env: devel + timestamp: '2023-12-14T13:35:36.552Z' + - type: audio_off + timestamp: '2023-12-14T13:35:36.553Z' + - type: video_off + timestamp: '2023-12-14T13:35:36.553Z' + - type: tab_change + metadata: + is_meetings_tab_active: false + timestamp: '2023-12-14T13:35:38.593Z' + - type: browser_backgrounded + timestamp: '2023-12-14T13:35:38.593Z' + - type: precall_end + metadata: + connection_info: + ip_details: + city: Nashik + country: IN + region: Maharashtra + loc: '20.00240,73.79450' + timezone: Asia/Kolkata + ip: 103.183.81.21 + postal: '422003' + asn: + asn: AS135248 + effective_network_type: 4g + location: + coords: + latitude: 20.0024 + longitude: 73.7945 + turn_connectivity: true + connectivity: + host: true + relay: true + reflexive: false + throughput: 7931 + fractional_loss: 0 + r_t_t: 0.03 + jitter: 0 + backend_r_t_t: 0.031 + timestamp: '2023-12-14T13:35:41.144Z' + device_info: + browser: Chrome + browser_version: 119.0.0.0 + cpus: 8 + engine: Blink + is_mobile: false + os: macOS + os_version: 10.15.7 + sdk_name: web-core + sdk_version: 1.21.1-staging.3 + user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36' + webgl_support: null + ip_information: + city: Nashik + country: IN + timezone: Asia/Kolkata + region: Maharashtra + asn: + asn: AS135248 + ipv4: 103.183.81.21 + ip_location: 103.183.81.21 + org: 103.183.81.21 + precall_network_information: + backend_rtt: 0.031 + effective_networktype: 4g + fractional_loss: 0 + jitter: 0 + reflexive_connectivity: false + relay_connectivity: true + rtt: 0.03 + throughput: 7931 + turn_connectivity: true + quality_stats: + audio_stats: [] + video_stats: [] + peer_ids: + - bd45f5a3-44d0-4d48-a9e5-b880b39d9e1c + start: null + end: null + total_audio_packets: 0 + total_audio_packets_lost: 0 + total_video_packets: 0 + total_video_packets_lost: 0 + first_audio_packet_received: null + first_video_packet_received: null + last_audio_packet_received: null + last_video_packet_received: null + average_quality: 0 + audio_bandwidth: 0 + video_bandwidth: 0 + peer_report: + metadata: + events: + - name: precall_begin + timestamp: '2023-12-14T13:35:33.288Z' + - name: video_off + timestamp: '2023-12-14T13:35:35.182Z' + - name: audio_off + timestamp: '2023-12-14T13:35:35.558Z' + - name: audio_off + timestamp: '2023-12-14T13:35:36.553Z' + - name: video_off + timestamp: '2023-12-14T13:35:36.553Z' + - name: meeting_view_backgrounded + timestamp: '2023-12-14T13:35:38.593Z' + pc_metadata: + - effective_network_type: 4g + reflexive_connectivity: false + relay_connectivity: true + turn_connectivity: true + timestamp: '2023-12-14T13:35:41.144Z' + audio_devices_updates: [] + video_devices_updates: [] + speaker_devices_updates: [] + selected_device_updates: [] + candidate_pairs: + producing_transport: + - nominated: true + current_round_trip_time: 0.009 + total_round_trip_time: 4.055 + bytes_received: 33950 + bytes_sent: 200996 + available_outgoing_bitrate: 54858 + last_packet_received_timestamp: 1702561000121 + last_packet_sent_timestamp: 1702561000139 + local_candidate_id: IKf7CPY3N + remote_candidate_id: IAEFfn0BW + bytes_discarded_on_send: 0 + packets_sent: 3203 + packets_received: 692 + packets_discarded_on_send: 0 + local_candidate_type: prflx + local_candidate_address: 103.183.81.21 + local_candidate_port: 64799 + local_candidate_protocol: udp + local_candidate_network_type: wifi + local_candidate_related_address: 192.168.0.119 + local_candidate_related_port: 64799 + remote_candidate_type: host + remote_candidate_address: 43.205.177.161 + remote_candidate_port: 46252 + remote_candidate_protocol: udp + consuming_transport: [] + device_info: + cpus: 8 + is_mobile: false + os: macOS + os_version: 10.15.7 + browser_metadata: + browser: Chrome + browser_version: 119.0.0.0 + engine: Blink + user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36' + webgl_support: null + sdk_name: web-core + sdk_version: 1.21.1-staging.3 + room_view_type: groupCall + ip_information: + city: Nashik + country: IN + timezone: Asia/Kolkata + region: Maharashtra + asn: + asn: AS135248 + ipv4: 103.183.81.21 + quality: + video_consumer: [] + audio_consumer: [] + screenshare_video_consumer: [] + screenshare_audio_consumer: [] + video_producer: [] + audio_producer: + - mos_quality: 1 + timestamp: '2023-12-14T13:35:36.554Z' + packets_lost: 0 + jitter: 0 + rtt: 0 + packets_sent: 5 + bytes_sent: 86 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:35:44.140Z' + packets_lost: 0 + jitter: 0 + rtt: 0.782913 + packets_sent: 382 + bytes_sent: 8162 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:35:51.140Z' + packets_lost: 0 + jitter: 0 + rtt: 0.014374 + packets_sent: 350 + bytes_sent: 6300 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:35:58.142Z' + packets_lost: 0 + jitter: 0 + rtt: 0.49529999999999996 + packets_sent: 351 + bytes_sent: 6318 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:36:05.143Z' + packets_lost: 0 + jitter: 0 + rtt: 0.009659 + packets_sent: 350 + bytes_sent: 6300 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:36:12.143Z' + packets_lost: 0 + jitter: 0 + rtt: 0.008513999999999999 + packets_sent: 350 + bytes_sent: 6300 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:36:19.136Z' + packets_lost: 0 + jitter: 0 + rtt: 0.013321 + packets_sent: 349 + bytes_sent: 6282 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:36:26.142Z' + packets_lost: 0 + jitter: 0 + rtt: 0.009888 + packets_sent: 351 + bytes_sent: 6318 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:36:33.141Z' + packets_lost: 0 + jitter: 0 + rtt: 0.011932 + packets_sent: 350 + bytes_sent: 6300 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + - mos_quality: 1 + timestamp: '2023-12-14T13:36:40.138Z' + packets_lost: 0 + jitter: 0 + rtt: 0.011108 + packets_sent: 350 + bytes_sent: 6300 + producer_id: fb6e75d3-d353-42a9-87cb-ce57f30e44b5 + ssrc: 2051826975 + mid: '0' + screenshare_video_producer: [] + screenshare_audio_producer: [] + video_consumer_cumulative: {} + audio_consumer_cumulative: {} + screenshare_video_consumer_cumulative: {} + screenshare_audio_consumer_cumulative: {} + video_producer_cumulative: {} + screenshare_video_producer_cumulative: {} + audio_producer_cumulative: + quality_mos: + avg: 1 + p50: 1 + p75: 1 + p90: 1 + packet_loss: + avg: 0 + 50_or_greater_event_fraction: 0 + 25_or_greater_event_fraction: 0 + 10_or_greater_event_fraction: 0 + 5_or_greater_event_fraction: 0 + rtt: + avg: 135.7009 + 500ms_or_greater_event_fraction: 0.1 + 250ms_or_greater_event_fraction: 0.2 + 100ms_or_greater_event_fraction: 0.2 + screenshare_audio_producer_cumulative: {} examples: GetActiveSessionSuccessResponse: summary: Success response for fetching active session diff --git a/static/static/guides/screenshare-max.png b/static/static/guides/screenshare-max.png new file mode 100644 index 0000000000..252a783d7e Binary files /dev/null and b/static/static/guides/screenshare-max.png differ