Skip to content

Commit

Permalink
SS-3439 : support all react-icons in Callout (#2044)
Browse files Browse the repository at this point in the history 
* using dynamic icons

* using dynamic icons
  • Loading branch information
@AnkitRastogi3
AnkitRastogi3 authored Mar 1, 2024
1 parent b3b5f86 commit 5d0f290
Show file tree
Hide file tree
Showing 12 changed files with 294 additions and 294 deletions.
29 changes: 19 additions & 10 deletions components/Callout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 }) => (
<Flex
Expand All @@ -17,7 +19,7 @@ const Callout = ({ title, icon, children }) => (
}}>
<Box css={{ m: '20px 24px' }}>
<Flex align="center" css={{ color: '$textHighEmp', gap: '$2', mb: '$2' }}>
{getIcon(icon)}
<DynamicIcon name={icon} />
<Text css={{ color: '$textHighEmp', fontWeight: '$semiBold' }}>{title}</Text>
</Flex>
{children}
Expand All @@ -27,15 +29,22 @@ const Callout = ({ title, icon, children }) => (

const iconStyle = { color: 'inherit' };

const getIcon = (icon) => {
switch (icon) {
case 'shield':
return <ShieldIcon style={iconStyle} />;
case 'link':
return <LinkTwoIcon style={iconStyle} />;
default:
return <InfoIcon style={iconStyle} />;
interface DynamicIconProps {
name: string;
}

const DynamicIcon: React.FC<DynamicIconProps> = ({ name }) => {
let Icon;
try {
Icon = dynamic(() => import(`@100mslive/react-icons/dist/${name}.js`) as any, {
loading: () => <InfoIcon style={iconStyle} />,
ssr: false // Disable server-side rendering for dynamic imports
});
} catch (error) {
console.error(`Error loading icon module for "${name}":`, error);
Icon = () => <InfoIcon style={iconStyle} />;
}
return <Icon />;
};

export default Callout;
113 changes: 59 additions & 54 deletions docs/get-started/v2/get-started/features/recordings/live-stream-recording.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,20 @@ 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.

<FlexContainer>
<Callout icon="link" title="Video-on-demand (VOD) recording">
<Callout icon="LinkTwoIcon" title="Video-on-demand (VOD) recording">

Get HLS VOD file which enables replayable recorded streams.

[Read more →](#video-on-demand-vod-recording)

</Callout>

<Callout icon="link" title="Single file per layer">
<Callout icon="LinkTwoIcon" title="Single file per layer">

Get single recording files (MP4) for different resolution layers.

Expand All @@ -25,79 +26,91 @@ Get single recording files (MP4) for different resolution layers.
</Callout>
</FlexContainer>


> **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.

<br/>
<br />
<video loop="true" controls="controls" id="vid">
<source src="https://storage.googleapis.com/100ms-cms-prod/cms/enable_vod_recording_l_aa16608ff0/enable_vod_recording_l_aa16608ff0.mp4?updated_at=2023-08-24T07:09:42.167Z" type="video/mp4" />
<source
src="https://storage.googleapis.com/100ms-cms-prod/cms/enable_vod_recording_l_aa16608ff0/enable_vod_recording_l_aa16608ff0.mp4?updated_at=2023-08-24T07:09:42.167Z"
type="video/mp4"
/>
</video>
<br/>

<br />

> **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.

<Tabs id="fetching-vod" items={['Recording Assets API','Webhooks','Dashboard']} />
<Tab id='fetching-vod-0'>

- 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.

</Tab>

<Tab id='fetching-vod-1'>

- 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).

</Tab>
<Tabs id="fetching-vod" items={['Recording Assets API', 'Webhooks', 'Dashboard']} />
<Tab id="fetching-vod-0">
- 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.
</Tab>

<Tab id="fetching-vod-1">
- 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).
</Tab>

<Tab id='fetching-vod-2'>

Expand All @@ -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.
> ```
</Tab>
------------------------------------------------------------------------------------------------------------------------------------------------
---
## 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.
Loading

0 comments on commit 5d0f290

Please sign in to comment.