useParams()

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 banner overlay is displayed. The banner can be used for TV-style "lower third" graphics, or displayed in any corner. You can configure the content of the overlay with the banner.* properties.

Sets whether a WebFrame overlay is displayed. You can configure the display of this live web browser overlay with the webFrame.* properties. The URL and the browser viewport size can be changed while your stream or recording is running.

Sets whether a sidebar is displayed. You can configure the display of the sidebar with the sidebar.* properties.

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.

Limits the number of non-screenshare streams that are included in the output.

Lets you do render-time reordering of video inputs according to participant IDs within a Daily room. To enable this sorting, pass a comma-separated list of participant IDs as the value for this param; video inputs matching these IDs will be moved to the top of the list. If you pass an ID that is not present in the room, it's ignored. All other video inputs will remain in their original order. The default value is an empty string indicating no reordering. Also note that videoSettings.preferScreenshare takes precedence over the ordering passed here. For more information about how participants and videos are sorted, see the section on selecting participants.

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. For more information about how participants and videos are sorted, see the section on selecting participants.

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

When enabled, audio-only inputs will not be included in rendering. By default this is off, and audio participants are displayed with a placeholder graphic.

When enabled, any screenshare video inputs beyond the first one will not be included in rendering. You can control the ordering of the inputs using the layout.participants property to explicitly select which participant should be first in the list of inputs.

Sets whether call participants' names are displayed on their video tiles.

Sets whether to display video tiles with squared or rounded corners. Note that some modes (dominant and pip) have additional params to control whether the main video has rounded corners or not.

Sets the corner radius applied to video layers when videoSettings.roundedCorners is enabled, in grid units.

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.

Controls how a screenshare 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')

Sets the highlight color. It's used as the border color to indicate the 'dominant' video input (typically the active speaker). Valid options:

• Hex color codes

• RGB or RGBA syntax

• Standard CSS color names (e.g. 'blue')

Sets the stroke width used to render a highlight border. See also 'videoSettings.highlight.color'. Specified in grid units.

Sets the visual margin between the two video layers shown in split mode, in grid units.

Selects whether the 'split' layout mode is rendered in a horizontal or vertical configuration. The default value 'auto-by-viewport' means that the split direction will be automatically selected to be most appropriate for the current viewport size: if the viewport is landscape or square, the split axis is vertical; if portrait, the split axis is horizontal. Valid options: 'auto-by-viewport', 'vertical', 'horizontal'

Overrides the scaleMode setting for the split layout mode. Both sides of the split can have separately defined scale modes. Pass a comma-separated list such as fill, fit (this would set the left-hand side video to fill and the right-hand side video to fit). See documentation for the videoSettings.scaleMode parameter for the valid options. Note that this setting also overrides videoSettings.scaleModeForScreenshare.

When enabled, the layout will automatically switch to dominant mode from grid if a screenshare video input is available. By using this automatic behavior, you avoid having to manually switch the mode via an API call.

Overrides the visual margin between items in grid mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable margin automatically depending on the number of videos.

Overrides the outer padding around items in grid mode, in grid units. The default value of -1 means that the layout algorithm selects a reasonable padding automatically depending on the number of videos.

By default, the grid mode will highlight the dominant video (typically the "active speaker") with a light outline. You can disable the highlight using this setting.

By default, the layout for the grid mode will try to preserve the aspect ratio of the input videos, i.e. avoid cropping the videos and instead add margins around the grid if needed. Setting this parameter to false will make the grid layout fill all available area, potentially cropping the videos.

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.

Padding around the row/column of “chiclet” items, in grid units.

Margin between the "dominant" video and the row/column of "chiclet" items, in grid units.

Sets whether the "dominant" video will be rendered with rounded corners when videoSettings.roundedCorners is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the dominant video is tightly aligned to viewport edges.

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.

Sets the margin between the smaller video and the edge of the frame in the pip layout, in grid units.

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 whether the main video in pip mode will be rendered with rounded corners when videoSettings.roundedCorners is enabled. Defaults to false because sharp corners are a more natural choice for the default configuration where the main video is full-screen (no margin to viewport edges).

Sets the participant label style option: font family. Valid options: DMSans, 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 participant label text font size.

Sets the offset value for participant labels on the x-axis, measured in grid units.

Sets the offset value for participant labels on the y-axis, measured in grid units.

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 left margin value applied to videos (in any layout mode), in grid units. You can use these videoSettings.margin.* params to shrink the video area, for example to make room for overlays.

Sets the right margin value applied to videos (in any layout mode), in grid units. You can use these videoSettings.margin.* params to shrink the video area, for example to make room for overlays.

Sets the top margin value applied to videos (in any layout mode), in grid units. You can use these videoSettings.margin.* params to shrink the video area, for example to make room for overlays.

Sets the bottom margin value applied to videos (in any layout mode), in grid units. You can use these videoSettings.margin.* params to shrink the video area, for example to make room for overlays.

Sets the string to be displayed if showTextOverlay is true.

Sets the data source used for the text displayed in the overlay. The default value 'param' means that the value of param text.content is used. Valid options: param, highlightLines.items, chatMessages, transcript

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 (horizontal) to be applied to the text overlay's position based on the values of text.align_horizontal and text.align_vertical.

Sets a y-offset (vertical) to be applied to the text overlay's position based on the values of text.align_horizontal and text.align_vertical.

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: DMSans, 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 text. Valid options: 'normal','italic'.

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

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 width of the stroke drawn around the characters in the text overlay. Specified in grid units.

Sets the color and transparency of a highlighted item in the text overlay. To display a highlight, the value of param text.source must be set to highlightLines.items. Valid options:

• Hex color codes

• RGB or RGBA syntax

• Standard CSS color names (e.g. 'blue')

Sets the font weight of a highlighted item in the text overlay. To display a highlight, the value of param text.source must be set to highlightLines.items.

Sets the overlay image. Icon asset must be included in session_assets object. showImageOverlay must be true.

Sets an emoji to be rendered instead of an image asset. If this string is non-empty, it will override the value of image.assetName. The string value must be an emoji.

Sets position of overlay image. Valid options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'

Sets overlay image to full screen.

Sets aspect ratio of overlay image.

Sets height of overlay image, in grid units.

Sets margin between the overlay image and the viewport edge, in grid units.

Sets opacity of overlay image, in range 0-1. Default value of 1 is full opacity.

Sets the overlay image to fade in or out when the showImageOverlay property is updated.

Sets the web page URL to be loaded into the WebFrame overlay's embedded browser.

Sets the width of the embedded browser window used to render the WebFrame overlay.

Sets the height of the embedded browser window used to render the WebFrame overlay.

Sets position of the WebFrame overlay. Valid options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'

Sets the WebFrame overlay to full screen.

Sets height of the WebFrame overlay, in grid units.

Sets margin between the WebFrame overlay and the viewport edge, in grid units.

Sets opacity of the WebFrame overlay, in range 0-1. Default value of 1 is full opacity.

Sets the WebFrame overlay to fade in or out when the showWebFrameOverlay property is updated.

Sets the keyboard key to be sent to the WebFrame browser in a simulated key press. Valid options:

• Digits 0 - 9
• Letters A - Z
• ASCII special characters, e.g. !, @, +, >, etc.
• Function keys F1 - F12
• Enter
• Escape
• Backspace
• Tab
• Arrow keys ArrowUp, ArrowDown, ArrowLeft, ArrowRight
• PageDown, PageUp

Sets keyboard modifier keys to be sent to the WebFrame browser in a simulated key press. Valid options: "Shift", "Control", "Alt", "Meta" (on a Mac keyboard, Alt is equal to Option and Meta is equal to Command).

Triggers a simulated key press to be sent to WebFrame. To send a key press, increment the value of key. (Note the difference between this and keyName which is the simulated key to be sent.)

Sets the title text displayed in the banner component.

Sets the subtitle text displayed in the banner component.

Sets the data source for the text displayed in the banner component. Valid options: param, highlightLines.items, chatMessages, transcript

Sets position of the banner component. Valid options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'

Sets the banner to fade in or out when the showBannerOverlay property is updated.

Horizontal margin, specified in grid units.

Vertical margin, specified in grid units.

Padding inside the component, specified in grid units.

Sets whether the banner component will always use its maximum width (specified using banner.maxW_pct_default and banner.maxW_pct_portrait). If false, the banner component will shrink horizontally to fit text inside it, if appropriate.

Sets the maximum width for the banner component, as a percentage of the viewport size.

Sets the maximum width for the banner component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the banner display typically needs more horizontal space than on a landscape screen.

Applies a rotation to the banner component. Units are degrees, and positive is a clockwise rotation.

Sets the corner radius of the banner component outline. Specified in grid units.

Sets whether an icon is displayed in the banner component (true or false).

Sets image asset value for the banner icon. Icon asset must be included in session_assets object.

Sets an emoji to be rendered as the banner icon. If this string is non-empty, it will override banner.icon.assetName. The string value must be an emoji.

Sets the size of the banner icon, specified in grid units.

Sets the banner 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 outline drawn around the banner component. Valid options:

• Hex color codes

• RGB or RGBA syntax

• Standard CSS color names (e.g. 'blue')

Sets the width of the stroke drawn around the banner component. Specified in grid units.

Sets the banner component's text 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 characters in the banner component. Valid options:

• Hex color codes

• RGB or RGBA syntax

• Standard CSS color names (e.g. 'blue')

Sets the width of the stroke drawn around the characters in the banner component. Specified in grid units.

Sets the font of text displayed in the banner component. Valid options: DMSans, Roboto, RobotoCondensed, Anton, Bangers, Bitter, Exo, Magra, PermanentMarker, SuezOne, Teko

Sets the banner 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 banner title 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 font style for the banner title. Valid options: 'normal','italic'.

Sets the banner subtitle 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 banner subtitle 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 font style for the banner subtitle. Valid options: 'normal','italic'.

Triggers display of toast component. To send a toast, increment the value of key

Sets text displayed in toast component.

Sets the data source used for the text displayed in the toast component. The default value param means that the value of param toast.content is used. Valid options: param, chatMessages, transcript

Sets duration of time toast component is displayed (in seconds).

Sets the maximum width for the toast component, as a percentage of the viewport size.

Sets the maximum width for the toast component, as a percentage of the viewport size, applied only when the viewport aspect ratio is portrait (i.e. smaller than 1). This override is useful because on a narrow screen the toast display typically needs more horizontal space than on a landscape screen.

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 an emoji to be rendered as the toast icon. If this string is non-empty, it will override toast.icon.assetName. The string value must be an emoji.

Sets the size of the toast icon, in grid units.

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: DMSans, 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 font size for the toast component's text.

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 main title of the opening slate.

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: DMSans, 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 the slate to fade in or out when the showTitleSlate property is updated.'

Sets text displayed in the main title of the slate.

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: DMSans, 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 whether the sidebar is displayed on top of video elements. If set to true , the video layout is shrunk horizontally to make room for the sidebar so they don't overlap.

Sets the data source for the text displayed in the sidebar. Valid options: param, highlightLines.items, chatMessages, transcript

Padding inside the sidebar, specified in grid units.

Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is landscape (its aspect ratio is greater than 1).

Sets the width of the sidebar, as a percentage of the viewport size, applied when the viewport is portrait or square (its aspect ratio is less than or equal to 1).

Sets the sidebar's background color and opacity. Valid options:

• Hex color codes

• RGB or RGBA syntax

• Standard CSS color names (e.g. 'blue')

Sets the sidebar's text color and opacity. Valid options:

• Hex color codes

• RGB or RGBA syntax

• Standard CSS color names (e.g. 'blue')

Sets the font of text displayed in the sidebar. Valid options: DMSans, Roboto, RobotoCondensed, Anton, Bangers, Bitter, Exo, Magra, PermanentMarker, SuezOne, Teko

Sets the sidebar 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 font style for text in the sidebar. Valid options: 'normal','italic'.

Sets the sidebar text 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 color used for the highlighted item in the sidebar.

Sets the font weight used for the highlighted item in the sidebar.

Sets a list of text items. Items must be separated by newline characters. This param is a data source that can be displayed in other components like TextOverlay, Banner and Sidebar using the various "source" params available in the settings for those components.

Sets the highlight index associated with the text items specified in highlightLines.items. The item at this index will be displayed using a special highlight style (which depends on the component used to display this data). If you don't want a highlight, set this value to -1.

Sets the data source used for emoji reactions. The default value emojiReactions means that this component will display emojis that are sent via the standard source API.

The other valid option is param, which lets you send a reaction using param values instead of the standard source. The steps are as follows: set emojiReactions.source to param, set a single-emoji string for emojiReactions.emoji, and increment the value of emojiReactions.key to send one emoji for display.

If emojiReactions.source is set to param, increment this numeric key to send a new emoji for display.

If emojiReactions.source is set to param, set a single emoji as the string value for this param, and it will be the next emoji reaction rendered when emojiReactions.key is incremented.

Sets a horizontal offset applied to the emoji reactions animation rendering (each new emoji floats up from the bottom of the screen). Specified in grid units.

When set to true, a room state debugging display is visible. It prints various information about participant state.

Sets the opacity of the debugging display which can be toggled using debug.showRoomState.