Call layout

The SDK comes with two built-in call layouts.

The PaginatedGridLayout displays participants in a grid that is paginated.

Preview of the PaginatedGridLayout component.

The SpeakerLayout displays participants in a configuration where the dominant speaker/shared screen is in focus and other participants are displayed in a smaller bar.

The LivestreamLayout is suitable for livestreaming and displays the dominant speaker/shared screen in a large video.

Preview of the LivestreamLayout component.

General usage

Both layouts gather all necessary state information via hooks, so you don’t need to provide state-related props:

import "@stream-io/video-react-sdk/dist/css/styles.css";
import {
  CallControls,
  StreamCall,
  StreamTheme,
  StreamVideo,
  SpeakerLayout,
} from "@stream-io/video-react-sdk";

const MyApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamTheme>
        <StreamCall call={call}>
          <SpeakerLayout />
          <CallControls />
        </StreamCall>
      </StreamTheme>
    </StreamVideo>
  );
};

import "@stream-io/video-react-sdk/dist/css/styles.css";
import {
  CallControls,
  StreamCall,
  StreamTheme,
  StreamVideo,
  PaginatedGridLayout,
} from "@stream-io/video-react-sdk";

const MyApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamTheme>
        <StreamCall call={call}>
          <PaginatedGridLayout />
          <CallControls />
        </StreamCall>
      </StreamTheme>
    </StreamVideo>
  );
};

Built-in Layouts

`PaginatedGridLayout`

Props

Name	Description	Type
`groupSize`	The number of participants to display per page	`number` \| `undefined`
`excludeLocalParticipant`	Whether to exclude the local participant from the grid	`boolean` \| `undefined`
`filterParticipants`	Optional predicate to determine whether a participant should be displayed in the grid	`((participant: StreamVideoParticipant) => boolean)` \| `undefined`
`mirrorLocalParticipantVideo`	Whether to mirror the user’s own video (default `true`)	`boolean` \| `undefined`
`pageArrowsVisible`	Turns on/off the pagination arrows	`boolean` \| `undefined`
`ParticipantViewUI`	See `ParticipantView` documentation	See `ParticipantView` documentation
`VideoPlaceholder`	See `ParticipantView` documentation	See `ParticipantView` documentation
`PictureInPicturePlaceholder`	See `ParticipantView` documentation	See `ParticipantView` documentation

`SpeakerLayout`

Props

Name	Description	Type
`participantsBarPosition`	The position of the participants who are not in focus, the default is `bottom`. Providing `null` will hide the bar	`top` \| `bottom` \| `left` \| `right` \| `null`
`excludeLocalParticipant`	Whether to exclude the local participant from the layout	`boolean` \| `undefined`
`filterParticipants`	Optional predicate to determine whether a participant should be displayed in the layout	`((participant: StreamVideoParticipant) => boolean)` \| `undefined`
`mirrorLocalParticipantVideo`	Whether to mirror the user’s own video (default `true`)	`boolean` \| `undefined`
`pageArrowsVisible`	Turns on/off the pagination arrows	`boolean` \| `undefined`
`ParticipantViewUISpotlight`	The participant UI for the spotlight view, see `ParticipantView` documentation	See `ParticipantView` documentation
`ParticipantViewUIBar`	The participant UI for the participants in the bar, see `ParticipantView` documentation	See `ParticipantView` documentation
`VideoPlaceholder`	See `ParticipantView` documentation	See `ParticipantView` documentation
`PictureInPicturePlaceholder`	See `ParticipantView` documentation	See `ParticipantView` documentation

`LivestreamLayout`

Props

Name	Description	Type
`muted`	Mutes all audio	`boolean`
`enableFullscreen`	Will render a button to enable fullscreen mode	`boolean`
`showParticipantCount`	Will show the number of participants	`boolean`
`showDuration`	Will show the duration of the livestream	`boolean`
`showLiveBadge`	Will show a badge whether the livestream is live or not	`boolean`
`showSpeakerName`	Will show the name of the speaker	`boolean`
`mirrorLocalParticipantVideo`	Whether to mirror the user’s own video (default `true`)	`boolean`
`floatingParticipantProps`	Props to pass to the floating participant view	`object`
`floatingParticipantProps.position`	Position of the floating participant view	`string`

Customization

If the built-in layouts aren’t what you’re looking for, it’s also possible to create your own layout, see our Custom Call Layout guide for more information.

Ringing call

ParticipantView