VideoGalleryProps interface

Package:

@azure/communication-react

Props for VideoGallery.

Properties

dominantSpeakers	List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant.
isTogetherModeActive	Indicates if together mode is active
layout	Layout of the video tiles.
localParticipant	Local video particpant
localScreenShareView	Controls the view of the local screenshare stream in the gallery
localVideoCameraCycleButtonProps	Camera control information for button to switch cameras.
localVideoTileSize	Determines the aspect ratio of local video tile in the video gallery.
localVideoViewOptions	Local video view options
maxParticipantsToSpotlight	Maximum participants that can be spotlighted
maxRemoteVideoStreams	Maximum number of participant remote video streams that is rendered.
onCreateLocalStreamView	Callback to create the local video stream view
onCreateRemoteStreamView	Callback to create a remote video stream view
onCreateTogetherModeStreamView	Callback to create a together mode stream view
onDisposeLocalScreenShareStreamView	Callback to dispose a local screen share stream view
onDisposeLocalStreamView	Callback to dispose of the local video stream view
onDisposeRemoteScreenShareStreamView	Callback to dispose a remote screen share stream view
onDisposeRemoteStreamView
onDisposeRemoteVideoStreamView	Callback to dispose a remote video stream view
onDisposeTogetherModeStreamView	Callback to dispose a together mode stream view
onForbidAudio	This callback is to forbid audio for remote participant(s)
onForbidVideo	This callback is to forbid video for remote participant(s)
onMuteParticipant	This callback is to mute a remote participant
onPermitAudio	This callback is to permit audio for remote participant(s)
onPermitVideo	This callback is to permit video for remote participant(s)
onPinParticipant	This callback will be called when a participant video tile is pinned.
onRenderAvatar	Callback to render a participant avatar
onRenderLocalVideoTile	Callback to render the local video tile
onRenderRemoteVideoTile	Callback to render a remote video tile
onSetTogetherModeSceneSize	This callback is to set the scene size for together mode
onStartLocalSpotlight	This callback is to start spotlight for local participant video tile.
onStartRemoteSpotlight	This callback is to stop spotlight for local participant video tile.
onStartTogetherMode	This callback is to start together mode
onStopLocalSpotlight	This callback is to start spotlight for remote participant video tiles.
onStopRemoteSpotlight	This callback is to stop spotlight for remote participant video tiles.
onUnpinParticipant	This callback will be called when a participant video tile is un-pinned.
overflowGalleryPosition	Determines the layout of the overflowGallery inside the VideoGallery.
pinnedParticipants	List of pinned participant userIds.
reactionResources	Reaction resources for like, heart, laugh, applause and surprised.
remoteParticipants	List of remote video particpants
remoteVideoTileMenu	Options for showing the remote video tile menu.
remoteVideoViewOptions	Remote videos view options
showCameraSwitcherInLocalPreview	Whether to display the local video camera switcher button
showMuteIndicator	Whether to display a mute icon beside the user's display name.
spotlightedParticipants	List of spotlighted participant userIds.
startTogetherModeEnabled	Indicates if the local participant can start together mode
strings	Optional strings to override in component
styles	Allows users to pass an object containing custom CSS styles for the gallery container.
togetherModeSeatingCoordinates	Seating position of participants in together mode
togetherModeStreams	Together mode video streams
videoTilesOptions	Additional Options for Video Tiles

Property Details

dominantSpeakers

List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant.

dominantSpeakers?: string[]

Property Value

string[]

isTogetherModeActive

Indicates if together mode is active

isTogetherModeActive?: boolean

Property Value

boolean

layout

Layout of the video tiles.

layout?: VideoGalleryLayout

Property Value

VideoGalleryLayout

localParticipant

Local video particpant

localParticipant: VideoGalleryLocalParticipant

Property Value

VideoGalleryLocalParticipant

localScreenShareView

Controls the view of the local screenshare stream in the gallery

localScreenShareView?: LocalScreenShareView

Property Value

LocalScreenShareView

localVideoCameraCycleButtonProps

Camera control information for button to switch cameras.

localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps

Property Value

LocalVideoCameraCycleButtonProps

localVideoTileSize

Determines the aspect ratio of local video tile in the video gallery.

localVideoTileSize?: LocalVideoTileSize

Property Value

LocalVideoTileSize

Remarks

'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and 16:9 (landscape) aspect ratios.

localVideoViewOptions

Local video view options

localVideoViewOptions?: VideoStreamOptions

Property Value

VideoStreamOptions

maxParticipantsToSpotlight

Maximum participants that can be spotlighted

maxParticipantsToSpotlight?: number

Property Value

number

maxRemoteVideoStreams

Maximum number of participant remote video streams that is rendered.

maxRemoteVideoStreams?: number

Property Value

number

onCreateLocalStreamView

Callback to create the local video stream view

onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>

Property Value

(options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>

onCreateRemoteStreamView

Callback to create a remote video stream view

onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>

Property Value

(userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>

onCreateTogetherModeStreamView

Callback to create a together mode stream view

onCreateTogetherModeStreamView?: (options?: TogetherModeStreamOptions) => Promise<void | TogetherModeStreamViewResult>

Property Value

(options?: TogetherModeStreamOptions) => Promise<void | TogetherModeStreamViewResult>

onDisposeLocalScreenShareStreamView

Callback to dispose a local screen share stream view

onDisposeLocalScreenShareStreamView?: () => Promise<void>

Property Value

() => Promise<void>

onDisposeLocalStreamView

Callback to dispose of the local video stream view

onDisposeLocalStreamView?: () => void

Property Value

() => void

onDisposeRemoteScreenShareStreamView

Callback to dispose a remote screen share stream view

onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>

Property Value

(userId: string) => Promise<void>

onDisposeRemoteStreamView

Warning

This API is now deprecated.

use onDisposeRemoteVideoStreamView and onDisposeRemoteScreenShareStreamView instead

Callback to dispose a remote video stream view

onDisposeRemoteStreamView?: (userId: string) => Promise<void>

Property Value

(userId: string) => Promise<void>

onDisposeRemoteVideoStreamView

Callback to dispose a remote video stream view

onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>

Property Value

(userId: string) => Promise<void>

onDisposeTogetherModeStreamView

Callback to dispose a together mode stream view

onDisposeTogetherModeStreamView?: () => Promise<void>

Property Value

() => Promise<void>

onForbidAudio

This callback is to forbid audio for remote participant(s)

onForbidAudio?: (userIds: string[]) => Promise<void>

Property Value

(userIds: string[]) => Promise<void>

onForbidVideo

This callback is to forbid video for remote participant(s)

onForbidVideo?: (userIds: string[]) => Promise<void>

Property Value

(userIds: string[]) => Promise<void>

onMuteParticipant

This callback is to mute a remote participant

onMuteParticipant?: (userId: string) => Promise<void>

Property Value

(userId: string) => Promise<void>

onPermitAudio

This callback is to permit audio for remote participant(s)

onPermitAudio?: (userIds: string[]) => Promise<void>

Property Value

(userIds: string[]) => Promise<void>

onPermitVideo

This callback is to permit video for remote participant(s)

onPermitVideo?: (userIds: string[]) => Promise<void>

Property Value

(userIds: string[]) => Promise<void>

onPinParticipant

This callback will be called when a participant video tile is pinned.

onPinParticipant?: (userId: string) => void

Property Value

(userId: string) => void

onRenderAvatar

Callback to render a participant avatar

onRenderAvatar?: OnRenderAvatarCallback

Property Value

OnRenderAvatarCallback

onRenderLocalVideoTile

Callback to render the local video tile

onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => Element

Property Value

(localParticipant: VideoGalleryLocalParticipant) => Element

onRenderRemoteVideoTile

Callback to render a remote video tile

onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => Element

Property Value

(remoteParticipant: VideoGalleryRemoteParticipant) => Element

onSetTogetherModeSceneSize

This callback is to set the scene size for together mode

onSetTogetherModeSceneSize?: (width: number, height: number) => void

Property Value

(width: number, height: number) => void

onStartLocalSpotlight

This callback is to start spotlight for local participant video tile.

onStartLocalSpotlight?: () => Promise<void>

Property Value

() => Promise<void>

onStartRemoteSpotlight

This callback is to stop spotlight for local participant video tile.

onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>

Property Value

(userIds: string[]) => Promise<void>

onStartTogetherMode

This callback is to start together mode

onStartTogetherMode?: () => Promise<void>

Property Value

() => Promise<void>

onStopLocalSpotlight

This callback is to start spotlight for remote participant video tiles.

onStopLocalSpotlight?: () => Promise<void>

Property Value

() => Promise<void>

onStopRemoteSpotlight

This callback is to stop spotlight for remote participant video tiles.

onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>

Property Value

(userIds: string[]) => Promise<void>

onUnpinParticipant

This callback will be called when a participant video tile is un-pinned.

onUnpinParticipant?: (userId: string) => void

Property Value

(userId: string) => void

overflowGalleryPosition

Determines the layout of the overflowGallery inside the VideoGallery.

overflowGalleryPosition?: OverflowGalleryPosition

Property Value

OverflowGalleryPosition

pinnedParticipants

List of pinned participant userIds.

pinnedParticipants?: string[]

Property Value

string[]

reactionResources

Reaction resources for like, heart, laugh, applause and surprised.

reactionResources?: ReactionResources

Property Value

ReactionResources

remoteParticipants

List of remote video particpants

remoteParticipants?: VideoGalleryRemoteParticipant[]

Property Value

VideoGalleryRemoteParticipant[]

remoteVideoTileMenu

Options for showing the remote video tile menu.

remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps

Property Value

false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps

remoteVideoViewOptions

Remote videos view options

remoteVideoViewOptions?: VideoStreamOptions

Property Value

VideoStreamOptions

showCameraSwitcherInLocalPreview

Whether to display the local video camera switcher button

showCameraSwitcherInLocalPreview?: boolean

Property Value

boolean

showMuteIndicator

Whether to display a mute icon beside the user's display name.

showMuteIndicator?: boolean

Property Value

boolean

spotlightedParticipants

List of spotlighted participant userIds.

spotlightedParticipants?: string[]

Property Value

string[]

startTogetherModeEnabled

Indicates if the local participant can start together mode

startTogetherModeEnabled?: boolean

Property Value

boolean

strings

Optional strings to override in component

strings?: Partial<VideoGalleryStrings>

Property Value

Partial<VideoGalleryStrings>

styles

Allows users to pass an object containing custom CSS styles for the gallery container.

styles?: VideoGalleryStyles

Property Value

VideoGalleryStyles

togetherModeSeatingCoordinates

Seating position of participants in together mode

togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition

Property Value

VideoGalleryTogetherModeParticipantPosition

togetherModeStreams

Together mode video streams

togetherModeStreams?: VideoGalleryTogetherModeStreams

Property Value

VideoGalleryTogetherModeStreams

videoTilesOptions

Additional Options for Video Tiles

videoTilesOptions?: VideoTilesOptions

Property Value

VideoTilesOptions