diff --git a/components/Callout.tsx b/components/Callout.tsx index 5e992796f3..824b33c451 100644 --- a/components/Callout.tsx +++ b/components/Callout.tsx @@ -1,5 +1,7 @@ -import { InfoIcon, LinkTwoIcon, ShieldIcon } from '@100mslive/react-icons'; +import { InfoIcon } from '@100mslive/react-icons'; import { Flex, Text, Box } from '@100mslive/react-ui'; +import dynamic from 'next/dynamic'; +import React from 'react'; const Callout = ({ title, icon, children }) => ( ( }}> - {getIcon(icon)} + {title} {children} @@ -27,15 +29,22 @@ const Callout = ({ title, icon, children }) => ( const iconStyle = { color: 'inherit' }; -const getIcon = (icon) => { - switch (icon) { - case 'shield': - return ; - case 'link': - return ; - default: - return ; +interface DynamicIconProps { + name: string; +} + +const DynamicIcon: React.FC = ({ name }) => { + let Icon; + try { + Icon = dynamic(() => import(`@100mslive/react-icons/dist/${name}.js`) as any, { + loading: () => , + ssr: false // Disable server-side rendering for dynamic imports + }); + } catch (error) { + console.error(`Error loading icon module for "${name}":`, error); + Icon = () => ; } + return ; }; export default Callout; diff --git a/docs/get-started/v2/get-started/features/recordings/live-stream-recording.mdx b/docs/get-started/v2/get-started/features/recordings/live-stream-recording.mdx index 69faee4856..783caaea8e 100644 --- a/docs/get-started/v2/get-started/features/recordings/live-stream-recording.mdx +++ b/docs/get-started/v2/get-started/features/recordings/live-stream-recording.mdx @@ -4,11 +4,12 @@ nav: 3.12 --- # Recording your live streams + This document is specifically for recording the **HLS streams**. To learn more about recording your conference calls, you can refer to [this document](/get-started/v2/get-started/features/recordings/overview). -100ms offers two major output formats for your HLS stream recordings. You can choose to record in *either* or *both* formats. +100ms offers two major output formats for your HLS stream recordings. You can choose to record in _either_ or _both_ formats. - + Get HLS VOD file which enables replayable recorded streams. @@ -16,7 +17,7 @@ Get HLS VOD file which enables replayable recorded streams. - + Get single recording files (MP4) for different resolution layers. @@ -25,79 +26,91 @@ Get single recording files (MP4) for different resolution layers. - > **Note - External Streaming** -> -> Recordings of **External Streams (RTMP-Out)** are similar to **Room Composite Recording**. They will be recorded in a single chosen resolution layer and generate a MP4 file. This recording will be a [recording asset](/server-side/v2/api-reference/recording-assets/overview#asset-types) of type `room-composite`. - +> +> Recordings of **External Streams (RTMP-Out)** are similar to **Room Composite Recording**. They will be recorded in a single chosen resolution layer and generate a MP4 file. This recording will be a [recording asset](/server-side/v2/api-reference/recording-assets/overview#asset-types) of type `room-composite`. ## Video-on-demand (VOD) recording + This recording is a HLS file (chunked MP4 with a manifest file (M3U8)), which can be used for replaying the recorded HLS streams. This option is more suitable for video-on-demand use-cases as it has adaptive bitrate (ABR). ### Configuring VOD recordings 1. Configure your recording storage. Use [this guide](/get-started/v2/get-started/features/recordings/storage) as your reference. Based on the storage upload type chosen (100ms storage or other cloud providers), the options supported to upload the VOD recording will differ. -2. Enable and configure your [live stream settings on the dashboard](/get-started/v2/get-started/features/live-streaming#customize-the-stream). +2. Enable and configure your [live stream settings on the dashboard](/get-started/v2/get-started/features/live-streaming#customize-the-stream). 3. Enable and configure the **Stream Recording** settings under the **Live Streaming** tab on the 100ms dashboard. 4. When configuring the recording settings, ensure the following options are selected correctly: - 1. **Resolution Layers** - This defines the renditions of video for the VOD recording. You can set this same as the ones configured (default) for the live stream or choose a subset of the layers from the ones configured for the live stream. - 2. **Type of Recording** - Select **VOD (On-demand playback)** from the dropdown menu. This makes the recording available in HLS format. + + 1. **Resolution Layers** - This defines the renditions of video for the VOD recording. You can set this same as the ones configured (default) for the live stream or choose a subset of the layers from the ones configured for the live stream. + 2. **Type of Recording** - Select **VOD (On-demand playback)** from the dropdown menu. This makes the recording available in HLS format. 3. **VOD Upload Format** - This option specifies the mode of uploading the VOD output to the configured cloud storage. We support two modes as of now - Unzipped and Zipped. By default, it will be 'Unzipped' for any newly created template. + 1. **Unzipped** - The VOD asset is directly uploaded to the configured storage. The following table will show the differences between 100ms and other cloud storage configuration. - | 100ms Hosted | User Cloud Bucket (Non-100ms) | - |:---------------------------------------------------------------------------------------------|:-------------------------------------------------------------------| - | Supports only **Unzipped** VOD upload mode. | Supports both **Unzipped** and **Zipped** VOD upload mode. | + | 100ms Hosted | User Cloud Bucket (Non-100ms) | + | :------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | + | Supports only **Unzipped** VOD upload mode. | Supports both **Unzipped** and **Zipped** VOD upload mode. | | CDN Playback URL is returned in pre-signed URL which can be played on any compatible player. | Pre-signed URL of the M3U8 file is returned which is not playable. The CDN playable link needs to be generated by the customer. | > **Note on on-demand playback via CDN** > > - **Beta Offer**: On-demand playback via CDN is currently offered for free during its `Beta` phase. This will be a chargeable service in the future. > - **Asset Storage Policy**: VOD assets are stored for 15 days in 100ms storage as per the current policy. Asset expiry duration will be customizable after the Beta phase concludes. - > + 2. **Zipped** - The HLS VOD asset is zipped up and uploaded as a single ZIP file to the configured storage. 100ms only returns the pre-signed URL of the uploaded ZIP file. It is the responsibility of the customers to enable a workflow to unzip the files, make it available on their CDN and generate the playback URL. + 4. **Validity of Download URLs**: This sets the expiry for the pre-signed URLs that are generated. 5. **Recording Thumbnail** - Enable this option to generate thumbnails for the VOD asset. -> **Note** +> **Note** > > Users can also configure their recording settings through the [Policy API](/server-side/v2/api-reference/policy/create-template-via-api) or provide a run-time configuration using the [Live streams API](/server-side/v2/api-reference/live-streams/start-live-stream-for-room). - The following video will do a walkthrough of the settings. -
+
-
- +
> **Important Note - Zipped Recording Files** > -> - For all the templates created before 27th August 2023, the HLS VOD asset file is zipped and uploaded, irrespective of the storage you've configured. -> - For older templates with recordings hosted on 100ms, you have an option to switch from Zipped to Unzipped asset files upload, but you cannot switch back once you've saved that setting. - +> - For all the templates created before 27th August 2023, the HLS VOD asset file is zipped and uploaded, irrespective of the storage you've configured. +> - For older templates with recordings hosted on 100ms, you have an option to switch from Zipped to Unzipped asset files upload, but you cannot switch back once you've saved that setting. ### Fetching VOD recordings + There are 3 methods to access and consume the recordings. - - - - - All files generated post recording are called **Recording Assets**. These will include various video and stream recordings, chat, transcripts and summary. They are accessible through the [Recording Assets API](/server-side/v2/api-reference/recording-assets/overview). - - VOD Recording is generated as an asset type called `room-vod`. Depending upon your choice of zipped or unzipped uploads, you can access the asset ID as well as the path using the [GET recording asset API](/server-side/v2/api-reference/recording-assets/get-asset). - - If the configured recording storage is 100ms, use [GET pre-signed URL API](/server-side/v2/api-reference/recording-assets/get-presigned-url) to get the CDN URL which can be inputted in a compatible player to enable on-demand playback. - - If the configured recording storage is your cloud bucket (Amazon S3, Google Cloud Storage, Alibaba OSS), the [GET pre-signed URL API](/server-side/v2/api-reference/recording-assets/get-presigned-url) will return the pre-signed URL of M3U8 file. This file is not usable as it is not playable unless you connect your cloud bucket to a CDN and generate a playback URL to enable on-demand playback. - - - - - - - Create a webhook listener and configure the webhook using the 'Developer' section of 100ms Dashboard. You can learn more about 100ms webhooks [here](/server-side/v2/how-to-guides/configure-webhooks/overview). - - On the successful completion of the recording, 100ms sends a webhook event called `hls.recording.success` which will contain the path to the file in the storage bucket (`hls_vod_recording_path`) and the CDN URL in `hls_vod_recording_presigned_url` (only if the configured storage is 100ms). - - + + + - All files generated post recording are called **Recording Assets**. These will include various + video and stream recordings, chat, transcripts and summary. They are accessible through the + [Recording Assets API](/server-side/v2/api-reference/recording-assets/overview). - VOD Recording + is generated as an asset type called `room-vod`. Depending upon your choice of zipped or + unzipped uploads, you can access the asset ID as well as the path using the [GET recording asset + API](/server-side/v2/api-reference/recording-assets/get-asset). - If the configured recording + storage is 100ms, use [GET pre-signed URL + API](/server-side/v2/api-reference/recording-assets/get-presigned-url) to get the CDN URL which + can be inputted in a compatible player to enable on-demand playback. - If the configured + recording storage is your cloud bucket (Amazon S3, Google Cloud Storage, Alibaba OSS), the [GET + pre-signed URL API](/server-side/v2/api-reference/recording-assets/get-presigned-url) will + return the pre-signed URL of M3U8 file. This file is not usable as it is not playable unless you + connect your cloud bucket to a CDN and generate a playback URL to enable on-demand playback. + + + + - Create a webhook listener and configure the webhook using the 'Developer' section of 100ms + Dashboard. You can learn more about 100ms webhooks + [here](/server-side/v2/how-to-guides/configure-webhooks/overview). - On the successful + completion of the recording, 100ms sends a webhook event called `hls.recording.success` which + will contain the path to the file in the storage bucket (`hls_vod_recording_path`) and the CDN + URL in `hls_vod_recording_presigned_url` (only if the configured storage is 100ms). + @@ -108,39 +121,31 @@ There are 3 methods to access and consume the recordings. 3. Click on the `Completed` status of the chosen session ID. 4. This will open the Session Details page. Access the `Recording Log` to find the available assets and view them. 5. Click on `View Assets` to open a pop-up with pre-signed URLs for the recording, chat, transcripts, and summary. - + > **Note** > - > - If the template configured **'VOD Upload Format'** is zipped, your `room-vod` asset, which will be a zipped VOD file, will be downloaded. + > - If the template configured **'VOD Upload Format'** is zipped, your `room-vod` asset, which will be a zipped VOD file, will be downloaded. > - If the selected storage is 100ms' and the VOD Upload Format is unzipped (default), you will be able to view the recording of the stream. > - If the configured storage is your cloud bucket and the *VOD Upload Format* is unzipped (default), you will be served with the following error toast: > ``` - > The given VOD recording cannot be played because it is not hosted in 100ms storage. + > The given VOD recording cannot be played because it is not hosted in 100ms storage. > Use GET recording assets API to retrieve location of the recording in your configured storage. > ``` ------------------------------------------------------------------------------------------------------------------------------------------------- +--- ## Single recording file per resolution layer -Based on the chosen resolution layers for live streaming, you can choose to record all or selected resolution layers and generate a MP4 file for each of those layers. This can be done in the following way. Also, Since the generated files are MP4, VOD Upload Format is not relevant to this. +Based on the chosen resolution layers for live streaming, you can choose to record all or selected resolution layers and generate a MP4 file for each of those layers. This can be done in the following way. Also, Since the generated files are MP4, VOD Upload Format is not relevant to this. ### Configuring MP4 recordings + The process is similar to [configuring VOD recordings](/get-started/v2/get-started/features/recordings/live-stream-recording#configuring-vod-recordings). The only difference in the process is to make sure you select 'Video files per layer' option in **Type of Recording** drop down menu under the **Stream Recording** option. ![select Video files per layer in Type of Recording](/docs/v2/type-of-recording-dashboard.png) ### Fetching the recordings -The method of retrieving these recordings is same as mentioned [above](#fetching-vod-recordings). Only thing to note is that the these recordings have an asset type called `room-composite` and they will be available in the resolutions selected in the template. - - - - - - - - - +The method of retrieving these recordings is same as mentioned [above](#fetching-vod-recordings). Only thing to note is that the these recordings have an asset type called `room-composite` and they will be available in the resolutions selected in the template. diff --git a/docs/get-started/v2/get-started/features/recordings/overview.mdx b/docs/get-started/v2/get-started/features/recordings/overview.mdx index c0b4a745fe..0e6a0432fd 100755 --- a/docs/get-started/v2/get-started/features/recordings/overview.mdx +++ b/docs/get-started/v2/get-started/features/recordings/overview.mdx @@ -5,8 +5,8 @@ nav: 3.1 Recordings enable you to convert live video from 100ms rooms into long-lived video assets. 100ms can generate different types of recordings -- [Composite recordings](#composite-recordings): One video file, composed with tracks of all peers in the room -- [Track recordings](#track-recordings): Separate media files for audio, video and screen-share tracks +- [Composite recordings](#composite-recordings): One video file, composed with tracks of all peers in the room +- [Track recordings](#track-recordings): Separate media files for audio, video and screen-share tracks ## Composite recordings @@ -28,7 +28,7 @@ There are 3 methods to start a recording. - + Start recording automatically when the first peer joins a room.
@@ -36,7 +36,7 @@ Start recording automatically when the first peer joins a room. - + Start recording by calling the 100ms server-side REST API. This is suitable to start/stop based on business logic.
@@ -44,7 +44,7 @@ Start recording by calling the 100ms server-side REST API. This is suitable to s - + Start recording with the client-side SDK. This is suitable to start/stop based on user action (click a button).
@@ -66,16 +66,16 @@ Start recording with the client-side SDK. This is suitable to start/stop based o After the recording is stopped and processed, a [recording asset](/server-side/v2/api-reference/recording-assets/overview) is generated. Composite generates an asset of type `room-composite`. You can fetch this asset through multiple methods: -* [Fetch on 100ms Dashboard](./storage#using-the-100ms-dashboard) -* Auto-send to your [cloud storage location](./storage) -* REST API to [get recording asset](/server-side/v2/api-reference/recording-assets/get-asset) -* Server-side webhooks: [use the `beam.recording.success` webhook](/server-side/v2/how-to-guides/configure-webhooks/webhook#beamrecordingsuccess) +- [Fetch on 100ms Dashboard](./storage#using-the-100ms-dashboard) +- Auto-send to your [cloud storage location](./storage) +- REST API to [get recording asset](/server-side/v2/api-reference/recording-assets/get-asset) +- Server-side webhooks: [use the `beam.recording.success` webhook](/server-side/v2/how-to-guides/configure-webhooks/webhook#beamrecordingsuccess) ### Customizing the recording -- No-code customization on the 100ms Dashboard: Modify the video resolution, which roles to be recorded -- Get audio-only recording: possible via the [REST API to start recording](/server-side/v2/how-to-guides/recordings/customize) -- [Customize the composition UI](/get-started/v2/get-started/features/ui-composition) +- No-code customization on the 100ms Dashboard: Modify the video resolution, which roles to be recorded +- Get audio-only recording: possible via the [REST API to start recording](/server-side/v2/how-to-guides/recordings/customize) +- [Customize the composition UI](/get-started/v2/get-started/features/ui-composition) ### Legacy composite through SFU recording @@ -101,5 +101,5 @@ Track recordings can be enabled for your template through the 100ms Dashboard. O You can fetch track recordings through two methods: -* Auto-send to your [cloud storage location](./storage) -* Server-side webhooks: use the `track.recording.success` webhook +- Auto-send to your [cloud storage location](./storage) +- Server-side webhooks: use the `track.recording.success` webhook diff --git a/docs/get-started/v2/get-started/overview.mdx b/docs/get-started/v2/get-started/overview.mdx index 3356368abb..6c1eb11e76 100644 --- a/docs/get-started/v2/get-started/overview.mdx +++ b/docs/get-started/v2/get-started/overview.mdx @@ -49,14 +49,14 @@ Level 1 participants publish their audio/video, and interact with others in sub- - + Generate room links or embed the 100ms web app as an iframe in your app [Integrate pre-built](/get-started/v2/get-started/prebuilt/overview) - + Build a custom UI with our headless client SDKs for web, Android, iOS, React Native and Flutter [Choose a client SDK to get started](/) diff --git a/docs/get-started/v2/get-started/security-and-tokens.mdx b/docs/get-started/v2/get-started/security-and-tokens.mdx index 14eec4a54f..452e4d86c9 100644 --- a/docs/get-started/v2/get-started/security-and-tokens.mdx +++ b/docs/get-started/v2/get-started/security-and-tokens.mdx @@ -17,18 +17,16 @@ Both tokens can be decoded with JWT utilities, like [jwt.io](https://jwt.io). 100ms client SDKs use auth tokens to [join a room](/javascript/v2/how--to-guides/set-up-video-conferencing/join). - + 1. No-Code way to get started - Get temporary auth tokens from [the dashboard](/javascript/v2/guides/token#get-a-temporary-token-from-100ms-dashboard) 2. [Auth token server](#set-up-your-token-server) - Programmatically generate auth tokens by setting up an auth token server 3. Via **[Room Codes](/concepts/v2/concepts/rooms/room-codes/room-codes)** - Get auth tokens by generating unique room codes. Head to [Room Code Authentication](/concepts/v2/concepts/rooms/room-codes/room-code-auth) for more details. - - - - + Room Codes also come in handy if you want to generate [Room Links](/concepts/v2/concepts/rooms/room-links) that can be shared with your users or embedded an as iframe in your application. + diff --git a/docs/javascript/v2/quickstart/embed-with-iframe.mdx b/docs/javascript/v2/quickstart/embed-with-iframe.mdx index 380ab51fdb..1cf3058a6b 100644 --- a/docs/javascript/v2/quickstart/embed-with-iframe.mdx +++ b/docs/javascript/v2/quickstart/embed-with-iframe.mdx @@ -8,41 +8,45 @@ nav: 1.05 If you want a quick integration of a fully featured video conferencing/live streaming app inside your application within a day, embedding [room links](/get-started/v2/get-started/prebuilt/room-codes/room-links) as iframe is the way to go. - -Embed role specific room links as iFrame - - when you customise, fork and deploy our [sample web app](https://github.com/100mslive/100ms-web/); create role specific [custom room links](/get-started/v2/get-started/prebuilt/room-codes/room-links#custom-domain-room-links) to embed in your app. - - alternatively, use [Prebuilt room links](/get-started/v2/get-started/prebuilt/overview) that uses the sample web app fully featured video conferencing/live streaming UI embedded to your web app - + + Embed role specific room links as iFrame - when you customise, fork and deploy our [sample + web app](https://github.com/100mslive/100ms-web/); create role specific [custom room + links](/get-started/v2/get-started/prebuilt/room-codes/room-links#custom-domain-room-links) + to embed in your app. - alternatively, use [Prebuilt room + links](/get-started/v2/get-started/prebuilt/overview) that uses the sample web app fully + featured video conferencing/live streaming UI embedded to your web app + ## Implementation -1. When customising and deploying our sample web app, you can create unique [custom domain room links](/javascript/v2/quickstart/react-sample-app/build-and-deploy) for each role in your room. For instance, custom room links for a self-hosted app with domain "my.video.app" +1. When customising and deploying our sample web app, you can create unique [custom domain room links](/javascript/v2/quickstart/react-sample-app/build-and-deploy) for each role in your room. For instance, custom room links for a self-hosted app with domain "my.video.app" - host : https://`my.video.app`/meeting/`room-code` - guest : https://`my.video.app`/meeting/`room-code` Here, [room codes](/get-started/v2/get-started/prebuilt/room-codes/overview) are unique role specific short-codes that helps generate room links. - 2. Once you have created role specific room links for your deployed app, embed these links as iframe in your application ```html - + + ``` Embedding 100ms prebuilt links allows usage of query parameters like `userId` and `name` further documented [here](/prebuilt/v2/prebuilt/room-codes/room-links#query-parameters). diff --git a/docs/prebuilt/v2/prebuilt/quickstart.mdx b/docs/prebuilt/v2/prebuilt/quickstart.mdx index 827c6d9583..c3e53d5d25 100644 --- a/docs/prebuilt/v2/prebuilt/quickstart.mdx +++ b/docs/prebuilt/v2/prebuilt/quickstart.mdx @@ -3,30 +3,33 @@ title: Quickstart nav: 2.1 --- -## Prerequisites +## Prerequisites + ### Set up a template -A [template](/get-started/v2/get-started/concepts/templates-and-roles) governs how its Prebuilt UI functions. Head over to [100ms dashboard](https://dashboard.100ms.live/dashboard) to create a template. + +A [template](/get-started/v2/get-started/concepts/templates-and-roles) governs how its Prebuilt UI functions. Head over to [100ms dashboard](https://dashboard.100ms.live/dashboard) to create a template. ### Create a room + A default room gets created for any template created using the 100ms dashboard. Create more rooms under the same template programmatically using the [create room API](/server-side/v2/api-reference/Rooms/create-via-api). ### Create and get room codes -[Room code](/get-started/v2/get-started/prebuilt/room-codes/overview) belongs to a unique `room_id` and `role`. Get room codes for each role -- from Dashboard - Copy role specific room code from Join Room section for a role in a room -- via API - Use [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api) to create room codes and get room codes using [retrieve room codes API](/server-side/v2/api-reference/room-codes/get-room-code-api). - +[Room code](/get-started/v2/get-started/prebuilt/room-codes/overview) belongs to a unique `room_id` and `role`. Get room codes for each role +- from Dashboard - Copy role specific room code from Join Room section for a role in a room +- via API - Use [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api) to create room codes and get room codes using [retrieve room codes API](/server-side/v2/api-reference/room-codes/get-room-code-api). + ## Get started with Prebuilt Depending on the desired user experience, you can use Prebuilt as shareable links or embeddable components. - + Create role specific Prebuilt links and share it with you users or embed them as iframe. @@ -34,7 +37,7 @@ Create role specific Prebuilt links and share it with you users or embed them as - + Embed the Prebuilt component natively in your iOS, Android or web app. [Embed as a component →](#embed-as-component) @@ -51,7 +54,7 @@ In this guide, we will create role-specific Prebuilt link and share/embed the li ### Get room code and template subdomain - + Prebuilt links are role specific room links with a format `https://.app.100ms.live/` where, - `template-subdomain`- is the subdomain that you’ve defined at the time of template creation on [100ms Dashboard](https://dashboard.100ms.live/dashboard). Copy `subdomain` from Template details page on 100ms Dashboard - `room-code`- unique room code of a role for which you're creating the room link. Get room codes for each role @@ -65,18 +68,20 @@ Prebuilt links are role specific room links with a format `https:// - - - Host Prebuilt Link : - https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-host`
- - Guest Prebuilt Link : https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-guest` - + + - Host Prebuilt Link : + https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-host` +
- Guest Prebuilt Link : + https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-guest` + ### Passing user context with Prebuilt links(optional) + When using Prebuilt links and room codes, you can pass your user ID and user name to the Prebuilt link by appending `?userId=&name=` to the link. This way, you can track user specific events when using server-side APIs and webhooks. - + - Host Prebuilt Link : https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-host`?`userId=`&`name=` - Guest Prebuilt Link : https://`template-subdomain`.app.100ms.live/meeting/`room-code-for-guest`?`userId=`&`name=` @@ -84,7 +89,9 @@ When using Prebuilt links and room codes, you can pass your user ID and user nam -When you pass a user name to 100ms Prebuilt, it pre-populates the user's name field on Prebuilt's preview screen. The user's name field becomes locked after being pre-filled, preventing users from modifying their name. + When you pass a user name to 100ms Prebuilt, it pre-populates the user's name field on + Prebuilt's preview screen. The user's name field becomes locked after being pre-filled, + preventing users from modifying their name. ### Share or Embed as iFrame @@ -94,10 +101,10 @@ Refer the sample code snippet to embed the Prebuilt link as an iframe. ```html ``` @@ -109,13 +116,14 @@ Refer the sample code snippet to embed the Prebuilt link as an iframe. 100ms Prebuilt can be embedded as a native component `HMSPrebuilt` by importing 100ms Room Kit package in your app. - -- The `HMSPrebuilt` component is available across React, iOS, Android, Flutter, and React Native - - This is the highest-level UI component of a room, covering all screens and functionality -- This component is shipped through `RoomKit` packages - - The `RoomKit` package will contain more (lower-level) UI components - - If you need a specific UI component, share your feedback on [our Prebuilt Discord channel](https://discord.com/channels/843749923060711464/1145960444230647808) - + + - The `HMSPrebuilt` component is available across React, iOS, Android, Flutter, and React + Native - This is the highest-level UI component of a room, covering all screens and + functionality - This component is shipped through `RoomKit` packages - The `RoomKit` package + will contain more (lower-level) UI components - If you need a specific UI component, share + your feedback on [our Prebuilt Discord + channel](https://discord.com/channels/843749923060711464/1145960444230647808) + @@ -126,16 +134,14 @@ HMSPrebuilt uses [room code](/concepts/v2/concepts/rooms/room-codes/room-codes) ### Embedding HMSPrebuilt component -- Import - HMSPrebuilt component requires importing RoomKit package -- Initialise - Along with room code, you can additionally set `userName` and `userID` of the user joining the room - - `userName` - prefills the user name on HMSPrebuilt preview screen - - `userID` - use your user IDs to track user of your app +- Import - HMSPrebuilt component requires importing RoomKit package +- Initialise - Along with room code, you can additionally set `userName` and `userID` of the user joining the room + - `userName` - prefills the user name on HMSPrebuilt preview screen + - `userID` - use your user IDs to track user of your app Sample code snippet to embed Prebuilt component. Head over for a step by step guides for [React](/javascript/v2/quickstart/prebuilt-quickstart), [Android](/android/v2/quickstart/prebuilt-android), [iOS](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt), [React Native](/react-native/v2/quickstart/prebuilt), [Flutter](/flutter/v2/quickstart/prebuilt). - + + ```jsx section=SampleCode sectionIndex=0 tab=React @@ -145,15 +151,16 @@ import { HMSPrebuilt } from '@100mslive/roomkit-react'; // add pre-built component function App() { - return ( -
- -
- ); - } - - export default App; -``` +return ( +
+ +
+); +} + +export default App; + +```` @@ -168,7 +175,8 @@ import live.hms.roomkit.ui.HMSRoomKit // launch prebuilt from your activity or fragment HMSRoomKit.launchPrebuilt(roomCode = "", context = Activity) -``` +```` + @@ -177,12 +185,12 @@ import SwiftUI import HMSRoomKit struct ContentView: View { - var body: some View { - HMSPrebuiltView(roomCode: /*pass room code as string here*/) - } +var body: some View { +HMSPrebuiltView(roomCode: /_pass room code as string here_/) +} } -``` +```` @@ -196,25 +204,22 @@ import 'package:hms_room_kit/hms_room_kit.dart'; // add pre-built component HMSPrebuilt(roomCode: ""); -``` - - +```` + ```jsx section=SampleCode sectionIndex=4 tab=React Native // import roomkit package -import { HMSPrebuilt } from "@100mslive/react-native-room-kit"; +import { HMSPrebuilt } from '@100mslive/react-native-room-kit'; // add pre-built component const ConferencingScreen = () => { - return ; + return ; }; ``` - - diff --git a/docs/prebuilt/v2/prebuilt/room-codes/overview.mdx b/docs/prebuilt/v2/prebuilt/room-codes/overview.mdx index 7179d8fd1e..24051dc2b6 100644 --- a/docs/prebuilt/v2/prebuilt/room-codes/overview.mdx +++ b/docs/prebuilt/v2/prebuilt/room-codes/overview.mdx @@ -5,50 +5,48 @@ nav: 5.1 A Room Code is a unique encrypted short code generated by 100ms for a given Role and Room. A Room Code represents a unique `role` and `room_id` combination. - ## Why use Room Codes? Essentially, Room Codes allow you to create unique Room Links and Room Code Authentication mechanism for every Role in a Room. - + Construct Prebuilt or custom domain Room Links; embed and share with your users [Room Links using Room Codes →](/concepts/v2/concepts/rooms/room-links) + - + Power Role specific authentication required to Join a Room [Join with Room Codes →](/concepts/v2/concepts/rooms/room-codes/room-code-auth) + - ## Room Codes Basics -- Room codes are 10 digit short codes and follow a standard format - `***-****-***` -- Room codes require a Template, a Room and at least one Role to be created. +- Room codes are 10 digit short codes and follow a standard format - `***-****-***` +- Room codes require a Template, a Room and at least one Role to be created. ### Room Code Lifecycle -A Room Code is a binary state entity represented by **enabled: true | false**. - - `enabled:true` represents an enabled Room Code. Effectively, Room links and Room Code Authentication work with only enabled Room Codes. - - `enabled:false` represents a disabled Room Code. Room links and Room Code Authentication does not work with disabled Room Codes. +A Room Code is a binary state entity represented by **enabled: true | false**. - `enabled:true` represents an enabled Room Code. Effectively, Room links and Room Code Authentication work with only enabled Room Codes. - `enabled:false` represents a disabled Room Code. Room links and Room Code Authentication does not work with disabled Room Codes. You can get the state of a Room Code `enable:true|false` using **[Get Room Code API](/server-side/v2/api-reference/room-codes/get-room-code-api).** Always make sure that this flag is enabled before creating Room Links or performing a peer join using Room Code Authentication. You can manage the state of a Room Code for a Role and make it enabled/disabled using **[Update Room Code API](/server-side/v2/api-reference/room-codes/update-room-code-api)** - + ### Room Codes do not expire Room Codes do not have an expiry, thus, you can reuse Room Codes infinitely. This enables “fixed Room Links” that can be reused / re-shared or allocated to your end users. No need to generate new Room Links for every Session for a given `room_id`. However, if your use case requires "fresh Room Links" and discard old links, you should first disable the intended Room Codes and then generate new Room Codes for a role using [Create Room Code API](/server-side/v2/api-reference/room-codes/create-room-code-api) or [Create Role Room Code API.](/server-side/v2/api-reference/room-codes/create-room-code-api#2-create-role-room-code-api) ### Creating Room Codes - + @@ -58,17 +56,12 @@ For Rooms created on [100ms dashboard](https://dashboard.100ms.live/dashboard), - -If you're using [Create Room API](/server-side/v2/api-reference/Rooms/create-via-api) to create Rooms, you need to explicitly create room codes for every role in the Room. Refer [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api). This API allows you to create room code for - - every role in the room at once using [Create Room Code API](/server-side/v2/api-reference/room-codes/create-room-code-api#1-create-a-room-code-api) - - a specific role in the room using [Create Role Room Code API](server-side/v2/api-reference/room-codes/create-room-code-api#2-create-role-room-code-api) +If you're using [Create Room API](/server-side/v2/api-reference/Rooms/create-via-api) to create Rooms, you need to explicitly create room codes for every role in the Room. Refer [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api). This API allows you to create room code for - every role in the room at once using [Create Room Code API](/server-side/v2/api-reference/room-codes/create-room-code-api#1-create-a-room-code-api) - a specific role in the room using [Create Role Room Code API](server-side/v2/api-reference/room-codes/create-room-code-api#2-create-role-room-code-api) ### Multiple Room Codes per role 100ms also supports multiple Room Codes per Role (up to 100 Room Codes per Room). This means that each user for a given role can be associated with a unique Room Code, and thus allow you to created unique room links for each user and unique Room Code based authentication. Please handle the logic to map Room Codes on user level at your end as we support Room Code creation only on Role and not Peer level. - - diff --git a/docs/prebuilt/v2/prebuilt/room-codes/room-code-auth.mdx b/docs/prebuilt/v2/prebuilt/room-codes/room-code-auth.mdx index 48a70fe933..a3f55d2e64 100644 --- a/docs/prebuilt/v2/prebuilt/room-codes/room-code-auth.mdx +++ b/docs/prebuilt/v2/prebuilt/room-codes/room-code-auth.mdx @@ -6,20 +6,19 @@ nav: 5.3 [Room Codes](/concepts/v2/concepts/rooms/room-codes/room-codes) are 100ms generated short codes, representing a Room ID and Role combination. Room codes not only simpify authentication, they can also be used to generate [Room Links.](https://www.100ms.live/docs/concepts/v2/concepts/rooms/room-links) - -- When using Room Codes, it eliminates the need to generate [auth token](/get-started/v2/get-started/security-and-tokens) at your end to join a room. - - If you're using 100ms [Prebuilt](https://www.100ms.live/docs/concepts/v2/concepts/prebuilt) solution, Prebuilt inherently takes care of generating the auth token using room codes. - - When building a custom UI, you need to make an additional SDK API call `getAuthTokenByRoomCode` to generate the auth token. - + + - When using Room Codes, it eliminates the need to generate [auth + token](/get-started/v2/get-started/security-and-tokens) at your end to join a room. - If + you're using 100ms [Prebuilt](https://www.100ms.live/docs/concepts/v2/concepts/prebuilt) + solution, Prebuilt inherently takes care of generating the auth token using room codes. - + When building a custom UI, you need to make an additional SDK API call + `getAuthTokenByRoomCode` to generate the auth token. + - - - ## Join rooms with room codes for custom UI -When building a custom UI and using room codes to generate room links, you can also use room codes to power authentication to join room without setting up an auth token server at your end. - +When building a custom UI and using room codes to generate room links, you can also use room codes to power authentication to join room without setting up an auth token server at your end. - ### Create Room Codes Room codes can be made available in two ways: - + @@ -48,32 +46,33 @@ Room codes can be made available in two ways: If you're using [Create Room API](/server-side/v2/api-reference/Rooms/create-via-api) to create Rooms, you need to explicitly create room codes for every role in the room. Refer [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api). This API allows you to create Room Code for - - every role in the room at once using [Create Room Code API](/server-side/v2/api-reference/room-codes/create-room-code-api#1-create-a-room-code-api) + - every role in the room at once using [Create Room Code API](/server-side/v2/api-reference/room-codes/create-room-code-api#1-create-a-room-code-api) - a specific role in the room using [Create Role Room Code API](server-side/v2/api-reference/room-codes/create-room-code-api#2-create-role-room-code-api) ### Retrieve role specific room code - - **No-Code** + - **No-Code** - Select a room from Room page on [100ms Dashboard](https://dashboard.100ms.live/rooms) and click on "Join Room" - Copy room code for the role you want to authenticate ![RoomCodeFromJoinRoomModal](/docs/v2/JoinRoomModal.png) - - + + - Programmatically, - From the [Room Link](/concepts/v2/concepts/rooms/room-links) that you generate. For instance, you can retrieve room code from a custom room link ` https://.app.100ms.live/meeting/ ` - Alternatively, you can use [Get Room Code API](/server-side/v2/api-reference/room-codes/get-room-code-api) to retrieve the room code for the role joining the room. ### Get auth token using room codes + Once you have a role specific room code, call the SDK function `getAuthTokenByRoomCode` with the retrieved room code. This function retrieves the auth token that is required to join the room. +#### Sample Code -#### Sample Code -You can use these code snippets to get auth token from room code. +You can use these code snippets to get auth token from room code. - + @@ -81,9 +80,9 @@ You can use these code snippets to get auth token from room code. const authToken = await hmsActions.getAuthTokenByRoomCode({ roomCode }); try { - await hmsActions.join({ userName, authToken }); + await hmsActions.join({ userName, authToken }); } catch (e) { - console.error(e); + console.error(e); } ``` @@ -92,40 +91,39 @@ try { ```js section=SampleCode sectionIndex=2 tab=React Native - try { - /** - * Important Note: Don't build new `HMSSDK` instance before destroying the previous one. - * for more info checkout {@link https://www.100ms.live/docs/react-native/v2/how--to-guides/install-the-sdk/hmssdk#what-does-destroy-method-do} - */ - const hmsInstance = await HMSSDK.build(); - - // Saving `hmsInstance` in ref - hmsInstanceRef.current = hmsInstance; - - /** - * `getAuthTokenByRoomCode` returns a promise which is resolved with "auth token" - * checkout {@link https://www.100ms.live/docs/react-native/v2/how--to-guides/install-the-sdk/hmssdk#what-does-destroy-method-do} - */ - const token = await hmsInstance.getAuthTokenByRoomCode('YOUR_ROOM_CODE'); - - // ... Adding HMSSDK Event Listeners before calling Join method on HMSSDK instance ... - - /** - * Create `HMSConfig` with the above auth token and username - */ - const hmsConfig = new HMSConfig({ authToken: token, username: USERNAME }); - - /** - * Joining Room. For more info, Check out {@link https://www.100ms.live/docs/react-native/v2/features/join#join-a-room | Join a Room} - */ - hmsInstance.join(hmsConfig); + /** + * Important Note: Don't build new `HMSSDK` instance before destroying the previous one. + * for more info checkout {@link https://www.100ms.live/docs/react-native/v2/how--to-guides/install-the-sdk/hmssdk#what-does-destroy-method-do} + */ + const hmsInstance = await HMSSDK.build(); + + // Saving `hmsInstance` in ref + hmsInstanceRef.current = hmsInstance; + + /** + * `getAuthTokenByRoomCode` returns a promise which is resolved with "auth token" + * checkout {@link https://www.100ms.live/docs/react-native/v2/how--to-guides/install-the-sdk/hmssdk#what-does-destroy-method-do} + */ + const token = await hmsInstance.getAuthTokenByRoomCode('YOUR_ROOM_CODE'); + + // ... Adding HMSSDK Event Listeners before calling Join method on HMSSDK instance ... + + /** + * Create `HMSConfig` with the above auth token and username + */ + const hmsConfig = new HMSConfig({ authToken: token, username: USERNAME }); + + /** + * Joining Room. For more info, Check out {@link https://www.100ms.live/docs/react-native/v2/features/join#join-a-room | Join a Room} + */ + hmsInstance.join(hmsConfig); } catch (error) { - // Handle errors here + // Handle errors here } -``` - +``` + @@ -134,7 +132,7 @@ func generateToken() { val hmsInstance = HMSSDK .Builder(application) .build() - + hmsInstance.getAuthTokenByRoomCode(TokenRequest(#room-code, #user-id), null , object : HMSTokenListener { override fun onError(error: HMSException) {} @@ -185,6 +183,7 @@ override func viewDidLoad() { // Handle the error } ``` + ### Quickstart with room code authentication @@ -195,4 +194,4 @@ override func viewDidLoad() { 4. [Flutter Quickstart](/flutter/v2/get-started/quickstart) 5. [React Quickstart](/javascript/v2/get-started/react-quickstart) - \ No newline at end of file + diff --git a/docs/prebuilt/v2/prebuilt/room-codes/room-links.mdx b/docs/prebuilt/v2/prebuilt/room-codes/room-links.mdx index 4c6b437ba2..2e988d34e5 100644 --- a/docs/prebuilt/v2/prebuilt/room-codes/room-links.mdx +++ b/docs/prebuilt/v2/prebuilt/room-codes/room-links.mdx @@ -6,15 +6,10 @@ nav: 5.4 A Room Link is a link that a peer can use to join a room. It is always associated to a specific room and role, allowing unique room links for each role in a room. - - -In order to construct unique room links for each role in your room, you need - - a domain to host the sample web app - - use 100ms hosted `template-subdomain` when using Prebuilt room links - - self-hosted `your-domain` when customising and deploying our sample web apps. - - a role specific [room code](/get-started/v2/get-started/prebuilt/room-codes/overview). For instance, - - host : `abc-perj-xno` - - guest : `jnj-owef-kjs` + + +In order to construct unique room links for each role in your room, you need - a domain to host the sample web app - use 100ms hosted `template-subdomain` when using Prebuilt room links - self-hosted `your-domain` when customising and deploying our sample web apps. - a role specific [room code](/get-started/v2/get-started/prebuilt/room-codes/overview). For instance, - host : `abc-perj-xno` - guest : `jnj-owef-kjs` + @@ -22,7 +17,7 @@ In order to construct unique room links for each role in your room, you need If you're using 100ms Prebuilt solution, the room link looks like : `https:///meeting/` -1. `template-subdomain` : This the subdomain that you’ve defined at the time of template creation on 100ms dashboard. +1. `template-subdomain` : This the subdomain that you’ve defined at the time of template creation on 100ms dashboard. 2. `room-code` : This belongs to a unique `room_id` and `role` for which you're creating the room link Head over to [Construct a Prebuilt Room Link](/concepts/v2/concepts/Prebuilt#create-prebuilt-room-links) for details. @@ -31,24 +26,22 @@ Head over to [Construct a Prebuilt Room Link](/concepts/v2/concepts/Prebuilt#cre Prebuilt links on the 100ms domain support the following query parameters: -- name: If the `name` key is specified, the input field in preview is locked and the peer will not have the option to change their name. +- name: If the `name` key is specified, the input field in preview is locked and the peer will not have the option to change their name. -- userId: The `userId` key is case-sensitive and can be used to uniquely identify a peer. +- userId: The `userId` key is case-sensitive and can be used to uniquely identify a peer. ## Custom Domain Room Links If you're using 100ms sample apps or building from scratch, you'd need to construct a custom Room Link to embed or share it with your users. A custom domain Room Link looks like `https:///` -1. `your-domain` : This allows you to define a customised Room Link +1. `your-domain` : This allows you to define a customised Room Link 2. `room-code` : This belongs to a unique `room_id` and `role` for which you're creating the Room Link - ### Sample Workflow for custom room links + 1. Create a Template, Room and at least one Role 2. Use [Create Room Code](/server-side/v2/api-reference/room-codes/create-room-code-api) to generate room codes for one or more roles in a room 3. [Retrieve Room Codes](/server-side/v2/api-reference/room-codes/get-room-code-api) for each role in the room. -3. Construct your custom domain room link by appending the retrieved [room code](/get-started/v2/get-started/prebuilt/room-codes/overview) to the URL format for each role in the room. - - +4. Construct your custom domain room link by appending the retrieved [room code](/get-started/v2/get-started/prebuilt/room-codes/overview) to the URL format for each role in the room. Make sure to use only enabled room codes to create room links. Read about [Room Code Basics](/concepts/v2/concepts/rooms/room-codes/room-codes#room-codes-basics) diff --git a/docs/server-side/v2/api-reference/room-codes/room-code-overview.mdx b/docs/server-side/v2/api-reference/room-codes/room-code-overview.mdx index 621a4acb8e..d442b49723 100644 --- a/docs/server-side/v2/api-reference/room-codes/room-code-overview.mdx +++ b/docs/server-side/v2/api-reference/room-codes/room-code-overview.mdx @@ -5,53 +5,49 @@ nav: 3.01 A Room Code is a unique encrypted short code generated by 100ms for a given Role and Room. A Room Code represents a unique `role` and `room_id` combination. - ## Why use Room Codes? Essentially, Room Codes allow you to create unique Room Links and Room Code Authentication mechanism for every Role in a Room. - + Construct Prebuilt or custom domain Room Links; embed and share with your users [Room Links using Room Codes](/concepts/v2/concepts/rooms/room-links) + - + Power Role specific authentication required to Join a Room [Join with Room Codes](/concepts/v2/concepts/rooms/room-codes/room-code-auth) + - ## Room Codes Basics -- Room codes are 10 digit short codes and follow a standard format - `***-****-***` -- Room codes require a Template, a Room and at least one Role to be created. +- Room codes are 10 digit short codes and follow a standard format - `***-****-***` +- Room codes require a Template, a Room and at least one Role to be created. ### Room Code Lifecycle -A Room Code is a binary state entity represented by **enabled: true | false**. - - `enabled:true` represents an enabled Room Code. Effectively, Room links and Room Code Authentication work with only enabled Room Codes. - - `enabled:false` represents a disabled Room Code. Room links and Room Code Authentication does not work with disabled Room Codes. +A Room Code is a binary state entity represented by **enabled: true | false**. - `enabled:true` represents an enabled Room Code. Effectively, Room links and Room Code Authentication work with only enabled Room Codes. - `enabled:false` represents a disabled Room Code. Room links and Room Code Authentication does not work with disabled Room Codes. You can get the state of a Room Code `enable:true|false` using **[Get Room Code API](/server-side/v2/api-reference/room-codes/get-room-code-api).** Always make sure that this flag is enabled before creating Room Links or performing a peer join using Room Code Authentication. You can manage the state of a Room Code for a Role and make it enabled/disabled using **[Update Room Code API](/server-side/v2/api-reference/room-codes/update-room-code-api)** - + ### Room Codes do not expire Room Codes do not have an expiry, thus, you can reuse Room Codes infinitely. This enables “fixed Room Links” that can be reused / re-shared or allocated to your end users. No need to generate new Room Links for every Session for a given `room_id`. However, if your use case requires "fresh Room Links", you should first disable existing Room Code and then generate new Room Codes ### Creating Room Codes -If you're using [Create Room API](/server-side/v2/api-reference/Rooms/create-via-api) to create Rooms, you need to explicitly create Room Codes for every Role in the Room. Refer [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api). This API allows you to create Room Code for - - every Role in the Room at once - - a specific Role in the Room - +If you're using [Create Room API](/server-side/v2/api-reference/Rooms/create-via-api) to create Rooms, you need to explicitly create Room Codes for every Role in the Room. Refer [Create Room Codes API](/server-side/v2/api-reference/room-codes/create-room-code-api). This API allows you to create Room Code for - every Role in the Room at once - a specific Role in the Room + ### Multiple Room Codes per Role 100ms also supports multiple Room Codes per Role (up to 100 Room Codes per Room). This means that each user for a given Role can be associated with a unique Room Code, and thus allow you to created unique room links for each user and unique Room Code based authentication. Please handle the logic to map Room Codes on user level at your end as we support Room Code creation only on Role and not Peer level. Drop a feedback if you want us to support this. diff --git a/docs/server-side/v2/how-to-guides/create-large-rooms.mdx b/docs/server-side/v2/how-to-guides/create-large-rooms.mdx index 676f8d9e41..c287a08a26 100644 --- a/docs/server-side/v2/how-to-guides/create-large-rooms.mdx +++ b/docs/server-side/v2/how-to-guides/create-large-rooms.mdx @@ -5,9 +5,10 @@ nav: 8 This guide will help you create large rooms which support a conferencing or HLS viewer count of up to **20,000** peers. Integration of multiple SFU instances in a mesh configuration, alongside optimized signaling mechanisms, facilitates efficient management of extensive peer lists and related actions like room joining and hand-raising at scale. This scalability enhancement is particularly valuable for webinar and live streaming scenarios in 100ms rooms. -Essentially, two implementation details need attention. +Essentially, two implementation details need attention. + - + Creation of a room which has the required optimisations to support a large number of peers. [Create a large room →](#create-a-large-room) @@ -50,8 +51,8 @@ curl --location --request POST 'https://api.100ms.live/v2/rooms' \ "enabled": true, "description": "This is a sample description for the room", "customer_id": "627cdddff2e4e30487862ad1", - "customer":"627cdddff2e4e30487862ad1", - "app_id":"62510797903d857ab8ec3ba5", + "customer": "627cdddff2e4e30487862ad1", + "app_id": "62510797903d857ab8ec3ba5", "recording_info": { "enabled": false }, @@ -64,76 +65,73 @@ curl --location --request POST 'https://api.100ms.live/v2/rooms' \ "updated_at": "2022-09-09T11:41:08.074Z" } ``` + When using the above API, following points need to be noted: + 1. The range of values for `size` can go up to 20,000 when the `large_room` flag is enabled. Expect the following error if a value larger than 20,000 is used. - ```json - { + +```json +{ "code": 400, "message": "Invalid body param", - "details": [ - "Invalid body param: room size greater than 20000" - ] + "details": ["Invalid body param: room size greater than 20000"] } ``` -2. All rooms which require the `size` to be greater than 2500 need to have the `large_room` flag enabled. Expect the following error if a value larger than 2500 is used without enabling the flag. + +2. All rooms which require the `size` to be greater than 2500 need to have the `large_room` flag enabled. Expect the following error if a value larger than 2500 is used without enabling the flag. + ```json { "code": 400, "message": "Invalid body param", - "details": [ - "Invalid body param: room size greater than 2500, set large_room flag as true" - ] + "details": ["Invalid body param: room size greater than 2500, set large_room flag as true"] } ``` -3. The client side SDK optimisations only kick in if the `large_room` flag is enabled. Additionally, large rooms cannot be created through the 100ms dashboard yet. + +3. The client side SDK optimisations only kick in if the `large_room` flag is enabled. Additionally, large rooms cannot be created through the 100ms dashboard yet. > **Note** > -> - Large rooms support only 200 publishing peers. Publishing peers are defined as peers with audio and video publishing permissions. -> - Large rooms support a maximum of 200 hand-raises at a single point of time. -> +> - Large rooms support only 200 publishing peers. Publishing peers are defined as peers with audio and video publishing permissions. +> - Large rooms support a maximum of 200 hand-raises at a single point of time. ## Client-side implementation In order to take advantage of these large rooms, you are required to use platform SDKs whose versions are higher than or equal to: + 1. For Web - `@100mslive/hms-video-store v0.10.17` and `@100mslive/react-sdk v0.8.17` 2. For Android - `@live.100ms/android-sdk v2.7.7` 3. For iOS - `v1.1.0` 4. For React Native - `@100mslive/react-native-hms v2.0.0-alpha.0` ### Handling peer hand-raise function + 100ms now supports first class APIs for hand-raise functionality. The following can be accomplished using them: -- How to raise and lower hand -- How to lower hand of a remote peer -- How to know when a peer raises or lowers their hand + +- How to raise and lower hand +- How to lower hand of a remote peer +- How to know when a peer raises or lowers their hand Follow the given documentation to implement the above functionalities. -- On [Web](/javascript/v2/how-to-guides/build-interactive-features/handraise) -- On [Android](/android/v2/how-to-guides/interact-with-room/peer/large-room) -- On [iOS](/ios/v2/how-to-guides/interact-with-room/peer/large-room) -- On [React Native](/react-native/v2/how-to-guides/interact-with-room/peer/large-room) -- On [Flutter](/flutter/v2/how-to-guides/interact-with-room/peer/large-room#handle-raise-and-lower-hand) +- On [Web](/javascript/v2/how-to-guides/build-interactive-features/handraise) +- On [Android](/android/v2/how-to-guides/interact-with-room/peer/large-room) +- On [iOS](/ios/v2/how-to-guides/interact-with-room/peer/large-room) +- On [React Native](/react-native/v2/how-to-guides/interact-with-room/peer/large-room) +- On [Flutter](/flutter/v2/how-to-guides/interact-with-room/peer/large-room#handle-raise-and-lower-hand) ### Working with the peer list -If the room is very large, it is difficult to fetch each and every peer. To get the **list of peers** or the **peer count** of the room, use the following documentation: -- On [Web](/javascript/v2/how-to-guides/set-up-video-conferencing/peerlist-optimizations) -- On [Android](/android/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-total-peer-count-of-the-room) -- On [iOS](/ios/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-peer-list-iterator-in-a-large-room) -- On [React Native](/react-native/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-total-peer-count-of-the-room) -- On [Flutter](/flutter/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-total-peer-count-of-the-room) +If the room is very large, it is difficult to fetch each and every peer. To get the **list of peers** or the **peer count** of the room, use the following documentation: +- On [Web](/javascript/v2/how-to-guides/set-up-video-conferencing/peerlist-optimizations) +- On [Android](/android/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-total-peer-count-of-the-room) +- On [iOS](/ios/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-peer-list-iterator-in-a-large-room) +- On [React Native](/react-native/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-total-peer-count-of-the-room) +- On [Flutter](/flutter/v2/how-to-guides/interact-with-room/peer/large-room#how-to-get-total-peer-count-of-the-room) > **Note** -> -> There will be no changes in functionality of the APIs shared above, if `large_room` flag is not enabled. > - - - - - - +> There will be no changes in functionality of the APIs shared above, if `large_room` flag is not enabled.