VCS Video component

Renders a video input, similar to <video> in HTML. To set the Video component src, pass the id of a video input.

// See the "hello" component for an example of how to use the Video component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Video } from '#vcs-react/components';
import { useActiveVideo } from '#vcs-react/hooks';

  const { dominantId } = useActiveVideo();
  return <Video key="video" src={dominantId} />;
}

Like with the Image component, video sources are selected using a src prop. However, video sources aren’t assets like they are with Images. Instead, they are external inputs described in an array of “video input slots”. You can think of the slots as representing video call participants or potentially any other type of video input (for example, in a video editing application the input slots could represent tracks simultaneously active on a timeline). There are two hooks available that let you discover what sources are available. useActiveVideo() gives you a list of video source IDs that you can pass directly to a Video component’s src prop. There is also useMediaInput(), which gives you access to the video input slots as a raw array.

Using useMediaInput() is rarely necessary for a typical application, as useActiveVideo() provides a filtered summary of available video sources.

Note that VCS optimizes for video performance and tries to keep video rendering on a video-specific fast path. This places some special restrictions on how you can mix video and graphics components. See the section Core concepts for more information.

Props

Properties specific to the <Video> component.

Name	Type	Description	Default value
`src`	`String`	`id` of the video source that should be displayed. Retrieve video stream `id`s with the `useActiveVideo()` hook — specifically the `activeIds` property in its returned object.	`null`
`scaleMode`	`String`	Determines how an imaine should be rendered within its layout frame. Available values: `fit` — image is rendered without any cropping, centered inside its layout frame, scaled as needed, `fill` — image is cropped and scaled to fill its layout frame	`fit`

Properties available to all VCS components, including this one.

Name	Type	Description	Default value
`id`	`String`	A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.	`null`
`key`	`String`, `Number`	This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.	`null`
`style`	`Object`	An object of style. Each component class has its own supported style properties. For example, the `Text` lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.	`{}`
`layout`	`Array`	Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See Layout API for more details.	`null`

`style` prop

The style prop accepts an object that can have the following values set.

Name	Type	Description
`cornerRadius_px`	`Number`	Apply a rounded mask to the corners of the component.

Getting Started

Core Concepts

Components

Custom React Hooks

Tools

VCS Video component

Props

`style` prop

​Props

​style prop

Props

`style` prop