# Compositing audio and video into a single view in Amazon Chime SDK meetings
Compositing audio and video into a single view

The Amazon Chime SDK media pipelines support compositing of audio, webcam videos, and content-share video streams into a single view. You can then use live connector to send that single view to streaming services such as Amazon Interactive Video Service, Twitch, or YouTube Live. Composited video can also be captured to Amazon Simple Storage Service for storage or further consumption.

Compositing uses a default screen layout called `GridView`, which has the following behaviors. 
+ When only webcam videos are active, `GridView` organizes the streams in the following grid pattern:  
![\[A four-column, four-row grid showing the outlines of people.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/grid-no-content-share.png)

  The grid displays a maximum of 25 webcam streams, and it orders the tiles by when users turn on their cameras.
+ `GridView` provides two canvas orientations, `Landscape` and `Portrait`. Landscape, the default orientation, supports video resolutions of 1280x720 and 1920x1080 for FHD. Portrait supports resolutions of 720x1280 and 1080x1920 for FHD.
+ You can configure the order, position, total number, tile aspect ratio, corner radius, border color, border thickness and highlight color of the video tiles.
+ During a meeting, when someone shares their screen, the webcam video tiles transition dynamically to make room for the content share. You control those transitions, and the locations of the video tiles, by using one of the layout configurations described in the next section.

**About the layout configurations**  
When someone starts a content share, you can choose how to composite the content share and webcam video streams by using one of the following layout configurations.
+ `ActiveSpeakerOnlyConfiguration` composites the content video full screen, with the active speaker’s webcam video overlaid in a corner. You can specify the corner.
+ `PresenterOnlyConfiguration` composites the content video full screen, with the presenter's webcam video overlaid in a corner. You can specify the corner.
+ `VerticalLayoutConfiguration` composites the content video with the webcam video in an adjacent vertical column. You can display the column to the right or left of the content share.
+ `HorizontalLayoutConfiguration` composites the content video with the webcam video in an adjacent horizontal row. You can display the row above or below the content share.

Composited layouts automatically transition between `GridView` and your chosen layout, based on whether content share is active or not.

The following topics explain how to use the global `GridView` settings and each configuration layout.

**Topics**
+ [

# Setting canvas orientation for compositing in Amazon Chime SDK meetings
](canvas-orientation.md)
+ [

# Setting border and corner attributes for compositing in Amazon Chime SDK meetings
](video-attribute.md)
+ [

# Using the layout configurations for compositing in Amazon Chime SDK meetings
](compositing-layouts.md)

# Setting canvas orientation for compositing in Amazon Chime SDK meetings
Setting canvas orientation

In compositing, the *canvas* contains all your video streams. You can specify a `Landscape` or `Portrait` orientation for the canvas. Landscape provides a 16:9 aspect ratio. Portrait provides a 9:16 aspect ratio.

The following image shows the portrait orientation.

![\[Image showing two video tiles in a portrait (vertical) window.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/compositing-portrait-with-tile.png)


The following example shows how to implement a portrait canvas with the video tile in the upper-right corner. In this example, the active speaker appears in the tile. For more information, see [ActiveSpeakerOnlyConfiguration](compositing-layouts.md#active-speaker-only)

```
{
   "CompositedVideo":{
      "Layout":"GridView",
      "Resolution":"FHD",
      "GridViewConfiguration":{
         "ContentShareLayout":"ActiveSpeakerOnly",
         "ActiveSpeakerOnlyConfiguration":{
            "ActiveSpeakerPosition":"TopRight"
         }
      },
      "CanvasOrientation": "Portrait"       
   }
}
```

The following image shows the landscape orientation.

![\[Image showing two video tiles in a landscape (horizontal) window.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/compositing-landscape-with-tile.png)


**CanvasOrientation**  
*Description* – The orientation setting, Landscape or Portrait.  
*Allowed values* – `Landscape` \$1 `Portrait`  
*Required* – No  
*Default* – Landscape

# Setting border and corner attributes for compositing in Amazon Chime SDK meetings
Setting border and corner attributes

As desired, you can use the `VideoAttribute` parameter to specify border and corner settings for your video tiles. You can specify colors, widths, and rounded corners. You can also specify a highlight color, and the border changes to that color when someone speaks. 

Your attribute settings apply to all layouts, regardless of content sharing.

The following image shows a video tile with a border color and corner radius applied.

![\[Image of a screen share and video tile with a red border and rounded corners.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/compositing-speaker-border.png)


The following example shows how to use each attribute. In this case, video tiles have rounded corners with a five-pixel radius. The tiles have a green border, also five pixels wide. When the speaker talks, the `HighlightColor` attribute changes the border color to red.

```
{
   "CompositedVideo":{
      "Layout":"GridView",
      "Resolution":"FHD",
      "GridViewConfiguration":{
         "ContentShareLayout":"ActiveSpeakerOnly",
         "ActiveSpeakerOnlyConfiguration":{
            "ActiveSpeakerPosition":"TopRight"
         }
         "VideoAttribute": {
            "CornerRadius"   : 10,                               
            "BorderColor"    : "Green", 
            "HighlightColor" : "Red",  
            "BorderThickness": 5 
          },      
       }
   }
}
```

**VideoAttribute**  
*Description* – Specifies the settings for video tile borders and rounded corners  
*Allowed values* – `BorderColor` \$1 `BorderThickness` \$1 `CornerRadius` \$1 `HighlightColor`  
*Required* – No

**VideoAttribute.BorderColor**  
*Description* – Defines the border color for all video tiles  
*Allowed values* – Color names, such as Red, Green, or Blue  
*Required* – No

**VideoAttribute.BorderThickness**  
*Description* – Defines the border thickness in pixels for all video tiles  
*Type* – Integer  
*Allowed values* – 1–20  
*Required* – No

**VideoAttribute.CornerRadius**  
*Description* – Defines the corner radius in pixels for all video tiles.   
*Type* – Integer  
*Allowed values* – 1–20  
*Required* – No

**VideoAttribute.HighlightColor**  
*Description* – Defines a border color that appears when a presenter or speaker talks  
*Allowed values* – Color names, such as Red, Green, or Blue  
*Required* – No

# Using the layout configurations for compositing in Amazon Chime SDK meetings
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


`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.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/compositing-active-speaker-4x.png)


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 values* – `TopLeft` \$1 `TopRight` \$1 `BottomLeft` \$1 `BottomRight`  
*Required* – No  
*Default* – `TopRight`

## PresenterOnlyConfiguration


`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.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/compositing-presenter-only-4x.png)


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  
*Type* – `PresenterOnlyConfiguration` object  
*Required* – No

**PresenterOnlyConfiguration.PresenterPosition**  
*Description* – The position of the presenter video tile  
*Type* – String  
*Valid values* – `TopLeft` \$1 `TopRight` \$1 `BottomLeft` \$1 `BottomRight`  
*Required* – No  
*Default* – `TopRight`

## HorizontalLayoutConfiguration


`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.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/compositing-horizontal-bottom.png)


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 values* – `Bottom` \$1 `Top`  
*Required* – No  
*Default* – Bottom

**HorizontalLayoutConfiguration.TileOrder**  
*Description* – Orders tiles by when users join or when they speak  
*Type* – String  
*Valid values* – `JoinSequence` \$1 `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 values* – *n***/***n*  
*Required* – No  
*Default* – 16/9, value applies to all tiles

## VerticalLayoutConfiguration


`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.\]](http://docs.aws.amazon.com/chime-sdk/latest/dg/images/grid-vertical.png)


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 values* – `Bottom` \$1 `Top`  
*Required* – No  
*Default* – Bottom

**VerticalLayoutConfiguration.TileOrder**  
*Description* – Orders tiles by when users join or when they speak  
*Type* – String  
*Valid values* – `JoinSequence` \$1 `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 values* – *n***/***n*  
*Required* – No  
*Default* – 9/16, value applies to all tiles