Using the layout configurations - Amazon Chime SDK

Using the layout configurations

The following topics explain how to use the different configuration layouts. The layouts only take effect when someone starts a content share. Expand each section to learn more.

ActiveSpeakerOnlyConfiguration displays the content share and the active speaker’s video, meaning the person talking appears in the small video tile that overlays the content share stream.

The following image shows the configuration and the available locations for the speaker tile.

Image showing a large video tile in the center of a window and a small tile in the upper-left.

The following example shows how to implement the ActiveSpeakerOnly layout programmatically. In this case, the presenter tile appears in the upper-left corner.

{ "CompositedVideo":{ "Layout":"GridView", "Resolution":"FHD", "GridViewConfiguration":{ "ContentShareLayout":"ActiveSpeakerOnly", "ActiveSpeakerOnlyConfiguration":{ "ActiveSpeakerPosition":"TopLeft" } } } }
ActiveSpeakerOnlyConfiguration

Description – The configuration settings for an ActiveSpeakerOnly video tile

Type – ActiveSpeakerOnlyConfiguration object

Required – No

ActiveSpeakerOnlyConfiguration.ActiveSpeakerPosition

Description – The position of the active speaker video tile

Type – String

Valid valuesTopLeft | TopRight | BottomLeft | BottomRight

Required – No

DefaultTopRight

PresenterOnlyConfiguration displays the content share and only the presenter’s video regardless of who talks. The following image shows the configuration.

Image of four screens. Each screen has a share window in the middle and a video tile in each corner.

The following example shows how to implement the layout programmatically with the presenter at top-right.

{ "CompositedVideo": { "Layout": "GridView", "Resolution": "FHD", "GridViewConfiguration": { "ContentShareLayout": "PresenterOnly", "PresenterOnlyConfiguration": { "PresenterPosition": "TopRight" } } } }
PresenterOnlyConfiguration

Description – The configuration settings for a PresenterOnly layout

TypePresenterOnlyConfiguration object

Required – No

PresenterOnlyConfiguration.PresenterPosition

Description – The position of the presenter video tile

Type – String

Valid valuesTopLeft | TopRight | BottomLeft | BottomRight

Required – No

DefaultTopRight

HorizontalLayoutConfiguration displays the content sharing and video streams horizontally. You can use the TilePosition setting to display the tiles above or below the content share stream. Presenters always appear on the left. Additional tiles appear in the order dictated by JoinSequence.

The following image shows the tiles below the content share stream.

Image showing a large central tile and 4 smaller tiles in a line below.

The following example shows how to implement a horizontal layout programmatically. In this case, the layout orders the tiles by SpeakerSequence and places them below the screen share. The layout allows a maximum of four tiles and applies a 16/9 aspect ratio.

{ "CompositedVideo":{ "Layout":"GridView", "Resolution":"FHD", "GridViewConfiguration":{ "ContentShareLayout":"Horizontal", "HorizontalLayoutConfiguration":{ "TileOrder":"SpeakerSequence", "TilePosition":"Bottom", "TileCount":4, "TileAspectRatio":"16/9" } } } }
HorizontalLayoutConfiguration

Description – The configuration settings for a horizontal layout

Type – HorizontalLayoutConfiguration object

Required – No

HorizontalLayoutConfiguration.TilePosition

Description – Places tiles above or below a content share.

Type - String

Valid valuesBottom | Top

Required – No

Default – Bottom

HorizontalLayoutConfiguration.TileOrder

Description – Orders tiles by when users join or when they speak

Type – String

Valid valuesJoinSequence | SpeakerSequence

Required – No

Default – JoinSequence

HorizontalLayoutConfiguration.TileCount

Description – Specifies the number of tiles that remain visible during a screen share

Type – Integer

Valid values – 1–10

Required – No

Default – 4

HorizontalLayoutConfiguration.TileAspectRatio

Description – Specifies the tiles' aspect ratio

Type – Integer

Valid valuesn/n

Required – No

Default – 16/9, value applies to all tiles

VerticalLayoutConfiguration displays the content share and the four most recent videos stacked on the right. Presenters always appear on top. Other attendees appear in the order dictated by TileOrder.

Image showing a large video tile in the center of a window and 4 smaller tiles stacked on the right.

The following example shows how to implement the vertical layout programmatically. In this case, the layout orders tiles by JoinSequence and places them to the right of the screen share. The layout allows a maximum of four tiles and applies a 16/9 aspect ratio.

{ "CompositedVideo":{ "Layout": "GridView", "Resolution": "FHD", "GridViewConfiguration":{ "ContentShareLayout": "Vertical", "VerticalLayoutConfiguration":{ "TileOrder": "JoinSequence", "TilePosition": "Right", "TileCount": 4, "TileAspectRatio": "16/9" } } } }
VerticalLayoutConfiguration

Description – The configuration settings for a vertical layout

Type – VerticalLayoutConfiguration object

Required – No

VerticalLayoutConfiguration.TilePosition

Description – Places tiles to the right or left of a content share.

Type – String

Valid valuesBottom | Top

Required – No

Default – Bottom

VerticalLayoutConfiguration.TileOrder

Description – Orders tiles by when users join or when they speak

Type – String

Valid valuesJoinSequence | SpeakerSequence

Required – No

Default – JoinSequence

VerticalLayoutConfiguration.TileCount

Description – Specifies the number of tiles

Type – Integer

Valid values – 1–10

Required – No

Default – 4

VerticalLayoutConfiguration.TileAspectRatio

Description – Specifies the tiles' aspect ratio

Type – Integer

Valid valuesn/n

Required – No

Default – 9/16, value applies to all tiles