VideoTileProps interface

  • Reference
Package:
@azure/communication-react

Props for VideoTile.

Properties

children

React Child components. Child Components will show as overlay component in the VideoTile.
displayName

Display Name of the Participant to be shown in the label.
initialsName

Name of the participant used to generate initials. For example, a name John Doe will display JD as initials.
isMirrored

Determines if the video is mirrored or not.
isMuted

Whether the video is muted or not.
isSpeaking

Whether the participant in the videoTile is speaking. Shows a speaking indicator (border).
noVideoAvailableAriaLabel

Optional property to set the aria label of the video tile if there is no available stream.
onRenderPlaceholder

Custom render Component function for no video is available. Render a Persona Icon if undefined.
personaMaxSize

Maximum size of the personal avatar in px. The persona avatar is the default placeholder shown when no video stream is available. For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona
personaMinSize

Minimum size of the persona avatar in px. The persona avatar is the default placeholder shown when no video stream is available. For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona
renderElement

Component with the video stream.
showLabel

Show label on the VideoTile
showMuteIndicator

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

Allows users to pass in an object contains custom CSS styles.
userId

user id for the VideoTile placeholder.

Property Details

children

React Child components. Child Components will show as overlay component in the VideoTile.

children?: ReactNode

Property Value

ReactNode

displayName

Display Name of the Participant to be shown in the label.

displayName?: string

Property Value

string

Remarks

displayName is used to generate avatar initials if initialsName is not provided.

initialsName

Name of the participant used to generate initials. For example, a name John Doe will display JD as initials.

initialsName?: string

Property Value

string

Remarks

displayName is used if this property is not specified.

isMirrored

Determines if the video is mirrored or not.

isMirrored?: boolean

Property Value

boolean

isMuted

Whether the video is muted or not.

isMuted?: boolean

Property Value

boolean

isSpeaking

Whether the participant in the videoTile is speaking. Shows a speaking indicator (border).

isSpeaking?: boolean

Property Value

boolean

noVideoAvailableAriaLabel

Optional property to set the aria label of the video tile if there is no available stream.

noVideoAvailableAriaLabel?: string

Property Value

string

onRenderPlaceholder

Custom render Component function for no video is available. Render a Persona Icon if undefined.

onRenderPlaceholder?: OnRenderAvatarCallback

Property Value

OnRenderAvatarCallback

personaMaxSize

Maximum size of the personal avatar in px. The persona avatar is the default placeholder shown when no video stream is available. For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona

personaMaxSize?: number

Property Value

number

personaMinSize

Minimum size of the persona avatar in px. The persona avatar is the default placeholder shown when no video stream is available. For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona

personaMinSize?: number

Property Value

number

renderElement

Component with the video stream.

renderElement?: null | Element

Property Value

null | Element

showLabel

Show label on the VideoTile

showLabel?: boolean

Property Value

boolean

showMuteIndicator

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

showMuteIndicator?: boolean

Property Value

boolean

styles

Allows users to pass in an object contains custom CSS styles.

styles?: VideoTileStylesProps

Property Value

VideoTileStylesProps

userId

user id for the VideoTile placeholder.

userId?: string

Property Value

string