Skip to content

Commit

Permalink
docs: add participant.aspect-ratio (#595)
Browse files Browse the repository at this point in the history 
Docs for: GetStream/stream-video-js#1381
  • Loading branch information
@oliverlaz
oliverlaz authored Jun 24, 2024
1 parent 69735c2 commit ea8e350
Showing 1 changed file with 32 additions and 27 deletions.
59 changes: 32 additions & 27 deletions docusaurus/video/docusaurus/docs/api/recording/recording_calls.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ slug: /recording/calls
title: Recording calls
---



import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Expand All @@ -13,7 +15,7 @@ Call recording is done by Stream server-side and later stored on AWS S3. There i

By default, calls will be recorded as mp4 video files. You can configure recording to only capture the audio.

> **Note:** by default, recordings contain all tracks mixed in a single file. You can follow the discussion [here](https://github.com/GetStream/protocol/discussions/247) if you are interested in different ways to record calls.
> **Note:** by default, recordings contain all tracks mixed in a single file. You can follow the discussion [here](https://github.com/GetStream/protocol/discussions/247) if you are interested in different ways to record calls.
## Start and stop call recording

Expand Down Expand Up @@ -87,7 +89,7 @@ curl "https://video.stream-io-api.com/api/v2/video/call/${CALL_TYPE}/${CALL_ID}/

## Delete call recording

This endpoint allows to delete call recording.
This endpoint allows to delete call recording.
Please note that recordings will be deleted only if they are stored on Stream side (default).

An error will be returned if the recording doesn't exist.
Expand All @@ -96,7 +98,7 @@ An error will be returned if the recording doesn't exist.
<TabItem value="js" label="JavaScript">

```js
call.deleteRecording({ session: '<session id>', filename: '<filename>' })
call.deleteRecording({ session: '<session id>', filename: '<filename>' });
```

</TabItem>
Expand Down Expand Up @@ -528,29 +530,30 @@ Here you can find the complete list of options available to each layout.

### Single Participant

| Option | Type | Default | Allowed Values | Description |
| ---------------------------------------- | ------- | ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| video.background_color | color | `#000000` | | The background color |
| video.screenshare_scale_mode | string | `fit` | `[fit fill]` | How source video is displayed inside a box when aspect ratio does not match. 'fill' crops the video to fill the entire box, 'fit' ensures the video fits inside the box by padding necessary padding |
| participant.label_horizontal_position | string | `left` | `[center left right]` | horizontal position for the participant label |
| participant.video_border_radius | number | `1.2` | | The corner radius used for the participant video border |
| logo.horizontal_position | string | `center` | `[center left right]` | horizontal position of the logo |
| participant.label_display | boolean | `true` | | Show the participant label |
| participant.label_text_color | color | `#000000` | | Text color of the participant label |
| participant.label_background_color | color | `#00000000` | | Background color of the participant label |
| participant.label_border_radius | number | `1.2` | | The corner radius used for the label border |
| logo.vertical_position | string | `top` | `[top bottom center]` | vertical position of the logo |
| participant.label_display_border | boolean | `true` | | Render label border |
| participant.label_vertical_position | string | `bottom` | `[top bottom center]` | vertical position for the participant label |
| participant.video_highlight_border_color | color | `#7CFC00` | | The color used for highlighted participants video border |
| participant.video_border_rounded | boolean | `true` | | Render the participant video border rounded |
| participant.video_border_width | boolean | `true` | | The stroke width used to render a participant border |
| participant.placeholder_background_color | color | `#000000` | | Sets the background color for video placeholder tile |
| video.scale_mode | string | `fill` | `[fit fill]` | How source video is displayed inside a box when aspect ratio does not match. 'fill' crops the video to fill the entire box, 'fit' ensures the video fits inside the box by padding necessary padding |
| logo.image_url | string | | | add a logo image to the video layout |
| participant.label_border_color | color | `#CCCCCC` | | Label border color |
| participant.label_border_rounded | boolean | `true` | | Render the label border rounded |
| participant.video_border_color | color | `#CCCCCC` | | The color used for the participant video border |
| Option | Type | Default | Allowed Values | Description |
| ---------------------------------------- | ------- | ----------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| video.background_color | color | `#000000` | | The background color |
| video.screenshare_scale_mode | string | `fit` | `[fit fill]` | How source video is displayed inside a box when aspect ratio does not match. 'fill' crops the video to fill the entire box, 'fit' ensures the video fits inside the box by padding necessary padding |
| participant.label_horizontal_position | string | `left` | `[center left right]` | horizontal position for the participant label |
| participant.video_border_radius | number | `1.2` | | The corner radius used for the participant video border |
| logo.horizontal_position | string | `center` | `[center left right]` | horizontal position of the logo |
| participant.label_display | boolean | `true` | | Show the participant label |
| participant.label_text_color | color | `#000000` | | Text color of the participant label |
| participant.label_background_color | color | `#00000000` | | Background color of the participant label |
| participant.label_border_radius | number | `1.2` | | The corner radius used for the label border |
| logo.vertical_position | string | `top` | `[top bottom center]` | vertical position of the logo |
| participant.label_display_border | boolean | `true` | | Render label border |
| participant.label_vertical_position | string | `bottom` | `[top bottom center]` | vertical position for the participant label |
| participant.video_highlight_border_color | color | `#7CFC00` | | The color used for highlighted participants video border |
| participant.video_border_rounded | boolean | `true` | | Render the participant video border rounded |
| participant.video_border_width | boolean | `true` | | The stroke width used to render a participant border |
| participant.placeholder_background_color | color | `#000000` | | Sets the background color for video placeholder tile |
| video.scale_mode | string | `fill` | `[fit fill]` | How source video is displayed inside a box when aspect ratio does not match. 'fill' crops the video to fill the entire box, 'fit' ensures the video fits inside the box by padding necessary padding |
| logo.image_url | string | | | add a logo image to the video layout |
| participant.label_border_color | color | `#CCCCCC` | | Label border color |
| participant.label_border_rounded | boolean | `true` | | Render the label border rounded |
| participant.video_border_color | color | `#CCCCCC` | | The color used for the participant video border |
| participant.aspect_ratio | string | | `"9/16", "4/3", "1/1", ...` | The aspect ratio of the participant |

### Spotlight

Expand Down Expand Up @@ -584,6 +587,7 @@ Here you can find the complete list of options available to each layout.
| video.screenshare_scale_mode | string | `fit` | `[fit fill]` | How source video is displayed inside a box when aspect ratio does not match. 'fill' crops the video to fill the entire box, 'fit' ensures the video fits inside the box by padding necessary padding |
| participant.label_text_color | color | `#000000` | | Text color of the participant label |
| participant.label_vertical_position | string | `bottom` | `[top bottom center]` | vertical position for the participant label |
| participant.aspect_ratio | string | | `"9/16", "4/3", "1/1", ...` | The aspect ratio of the participant |

### Grid

Expand Down Expand Up @@ -616,6 +620,7 @@ Here you can find the complete list of options available to each layout.
| participant.video_border_radius | number | `1.2` | | The corner radius used for the participant video border |
| participant.video_highlight_border_color | color | `#7CFC00` | | The color used for highlighted participants video border |
| grid.rows | number | `4` | | how many rows to use in grid mode |
| participant.aspect_ratio | string | | `"9/16", "4/3", "1/1", ...` | The aspect ratio of the participant |

## Custom recording styling using external CSS

Expand Down Expand Up @@ -694,7 +699,7 @@ curl -X PUT "https://video.stream-io-api.com/api/v2/video/calltypes/${CALL_TYPE_

If needed, you can use your own custom application to record a call. This is the most flexible and complex approach to record calls, make sure to reach out to our customer support before going with this approach.

The layout app used to record calls is available on GitHub and is a good starting point. The repository also includes information on how to build your own.
The layout app used to record calls is available on [GitHub](https://github.com/GetStream/stream-video-js/tree/main/sample-apps/react/egress-composite) and is a good starting point. The repository also includes information on how to build your own.

<Tabs groupId="examples">
<TabItem value="js" label="JavaScript">
Expand Down

0 comments on commit ea8e350

Please sign in to comment.