Daily Video

<DailyVideo sessionId={sessionId} />

Props

sessionId

string

required

The participant’s session_id for which the video track should be played.

automirror

boolean

default:"false"

When enabled, mirrors a local participant’s user-facing camera video.

fit

'contain' | 'cover'

default:"'contain'"

Determines whether the video should be fully contained or cover the element. See object-fit for details.

mirror

boolean

default:"false"

When set to true, video is mirrored.

playableStyle

Object

default:"{}"

Inline styles to be applied when the video is in a playable state. These will overwrite styles passed with the style prop. Use this to style the <video> differently when it’s playing or not (e.g. when the participant’s camera is muted or not).

onResize

Function

Callback when the video element is resized. Reports the video’s height, width and aspectRatio.

style

Object

default:"{}"

Inline styles to be applied to the <video> element.

type

'video' | 'screenVideo' | 'rmpVideo' | string

default:"'video'"

The participant’s track type to play. In addition to the built-in track types, you can pass the trackName of a custom video track started via startCustomTrack().

DailyVideo also accepts any other React.VideoHTMLAttributes.

Data attributes

DailyVideo renders a couple of dynamic data attributes:

Attribute	Description
`data-local`	`"true"` in case the video comes from the local participant
`data-mirrored`	`"true"` in case the video is mirrored, due to `automirror` or `mirror`
`data-playable`	`"true"` in case the video is in a playable state
`data-session-id`	Contains the corresponding `sessionId`
`data-subscribed`	`"true"` or `"staged"` in case the video track is subscribed or staged
`data-video-type`	Contains the corresponding `type`

Example

import { DailyVideo } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  return <DailyVideo automirror sessionId={sessionId} />;
}

To play a custom video track, pass its trackName as the type:

// Started elsewhere with:
// call.startCustomTrack({ track, trackName: 'slides' });

function Slides({ sessionId }) {
  return <DailyVideo sessionId={sessionId} type="slides" />;
}

Components

Hooks

Props

Data attributes

Example

See also

Components

Hooks

​Props

​Data attributes

​Example

​See also

Components

Hooks

Props

Data attributes

Example

See also