useParams()
useParams(): Object
Contains current values for the composition's params as declared in compInterface
in your composition root. These values are passed from the embedding host.
See Composition file structure and interface for more information on the composition root.
Return type
The default return value is a object with the baseline composition parameters. Developers can also edit the composition parameters in their own copy of the VCS SDK and retrieve them via this hook.
The default properties available in the return value using VCS are as follows:
Sets the layout mode. Valid options:
- single: Show a single full-screen video.
- split: Show the first two participants side-by-side.
- grid: Show up to 20 videos in a grid layout.
- dominant: Show the active speaker in a large pane on the left, with additional video thumbnails on the right.
- pip: Show the active speaker in a full-screen view, with the first participant inlaid in a corner.
Sets whether a text overlay is displayed. You can configure the contents of the overlay with the text.*
properties.
Sets whether an image overlay is displayed. You can configure the display of the overlay with the image.*
properties. The image used must be passed in the session_id
layout option when the stream or recording is started.
Sets whether a title screen (a "slate") is displayed. You can configure the display of the slate with the titleSlate.*
properties.
Sets whether a title screen (a "slate") is automatically shown at the start of the stream. You can configure the display of this automatic slate with the openingSlate.
properties.
When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream.
When enabled, paused video inputs will not be included. By default this is off, and paused inputs are displayed with a placeholder graphic. ("Paused video" means that the video track for a participant is not available, either due to user action or network conditions.)
Sets whether call participants' names are displayed on their video tiles.
Sets whether to display video tiles with squared or rounded corners.
Controls how source video is displayed inside a tile if they have different aspect ratios. Use fill
to crop the video to fill the entire tile. Use fit
to make sure the entire video fits inside the tile, adding letterboxes or pillarboxes as necessary.
Sets the background color for video placeholder tile. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Control where the dominant (or "active speaker") video is displayed in the dominant
layout mode. Values are left
, right
, top
or bottom
.
Sets the position of the imaginary line separating the dominant video from the smaller tiles when using the dominant
layout. Values are from 0 to 1. The default is 0.8, so if videoSettings.dominant.position
is set to left
, the dominant video will take 80% of the width of the screen on the left.
Controls how many "chiclets", or smaller video tiles, appear alongside the dominant video when using the dominant
layout.
When in "dominant" mode, the large tile displays the active speaker by default. Turn off this followDomFlag
to display the first participant instead of the active speaker.
Margin between the “chiclet” items, in grid units. Steps: 0.01.
Padding around the row/column of “chiclet” items, in grid units. Steps: 0.01.
Sets the position of the smaller video in the pip
(picture-in-picture) layout. Valid options: top-left
, top-right
, bottom-left
, bottom-right
.
Sets the aspect ratio of the smaller video in the pip
layout. The default is 1.0, which produces a square video.
Sets the height of the smaller video in the pip
layout, measured in grid units. Steps: 1.
Sets the margin between the smaller video and the edge of the frame in the pip
layout. Steps: 0.01.
When in "pip" (or picture-in-picture) mode, the overlay tile displays the first participant in the participant array by default. Turn on this followDomFlag
to display the active speaker instead.
Sets the participant label style option: font family. Valid options: Roboto
, RobotoCondensed
, Bitter
, Exo
, Magra
, SuezOne
, Teko
Sets the participant label text font weight. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sets the offset value for participant labels on the x-axis, measured in grid units. Steps: 0.1
Sets the offset value for participant labels on the y-axis, measured in grid units. Steps: 0.1
Sets the participant label font color. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the label font stroke color (the line outlining the text letters). Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the right margin value applied to videos. Steps: 1.
Sets the bottom margin value applied to videos. Steps: 1.
Sets the horizontal alignment of the text overlay within the video frame. Values are left
, right
, or center
.
Sets the vertical alignment of the text overlay within the video frame. Values are top
, bottom
, or center
.
Sets an X offset to be applied to the text overlay's position based on the values of text.align_horizontal
and text.align_vertical
. Steps: 0.1
Sets a Y offset to be applied to the text overlay's position based on the values of text.align_horizontal
and text.align_vertical
. Steps: 0.1
Applies a rotation to the text overlay. Units are degrees, and positive is a clockwise rotation.
Sets the font of the text overlay. Valid options: Roboto
, RobotoCondensed
, Anton
, Bangers
, Bitter
, Exo
, Magra
, PermanentMarker
, SuezOne
, Teko
Selects a weight variant from the selected font family. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sets the text overlay font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280*720 stream). Steps: 0.1
Sets the color and transparency of the text overlay. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the color of the stroke drawn around the characters in the text overlay. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the overlay image. Icon asset must be included in session_assets
object. showImageOverlay
must be true
.
Sets position of overlay image. Valid options: top-left
, top-right
, bottom-left
, bottom-right
Sets the overlay image to fade in or out when the showImageOverlay
property is updated.
Triggers display of toast component. To send a toast, increment the value of key
Sets whether icon is displayed in toast component (true
or false
).
Sets asset value for toast icon. Icon asset must be included in session_assets
object.
Sets the toast component's background color. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the color of the stroke drawn around the text characters in the toast component. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the toast component's text color. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the toast component's font family. Valid options: Roboto
, RobotoCondensed
, Bitter
, Exo
, Magra
, SuezOne
, Teko
Sets the font weight for the toast component's text. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sets the number of seconds that the opening slate will be displayed when the stream starts. After this time, the slate goes away with a fade-out effect.
Sets text displayed in the subtitle (second line) of the opening slate.
Sets an image to be used as the background for the slate. This image asset must be included in session_assets
object when starting the stream/recording.
Sets the slate's background color. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the text color of the titles in the slate. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the font of the titles in the slate. Valid options: Roboto
, RobotoCondensed
, Anton
, Bangers
, Bitter
, Exo
, Magra
, PermanentMarker
, SuezOne
, Teko
Selects a weight variant from the selected font family. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280*720 stream).
Sets the subtitle font size as a percentage of the main title.
Selects a weight variant from the selected font family specifically for the subtitle. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sets text displayed in the subtitle (second line) of the slate.
Sets an image to be used as the background for the slate. This image asset must be included in session_assets
object when starting the stream/recording.
Sets the slate's background color. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the text color of the titles in the slate. Valid options:
-
Hex color codes
-
RGB or RGBA syntax
-
Standard CSS color names (e.g. 'blue')
Sets the font of the titles in the slate. Valid options: Roboto
, RobotoCondensed
, Anton
, Bangers
, Bitter
, Exo
, Magra
, PermanentMarker
, SuezOne
, Teko
Selects a weight variant from the selected font family. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sets the font style for the titles in the slate. Valid options: 'normal','italic'.
Sets the main title font size using grid units (gu). By default, one grid unit is 1/36 of the smaller dimension of the viewport (e.g. 20px in a 1280*720 stream).
Sets the subtitle font size as a percentage of the main title.
Selects a weight variant from the selected font family specifically for the subtitle. Valid options: 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
.
Note: Not all font weights are valid for every font family.
Sample code
Additional examples of usage for this custom hook can be found in the source code for the VCS SDK.