> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# VCS: useActiveVideo()

> Developers can use Daily's VCS SDK to build custom video layouts and add graphics to live streamed and recorded video calls.

`useActiveVideo(params?): Object`

Contains a set of convenient properties, including which video inputs are available and available metadata for them.

The various IDs referenced below are video slot source IDs. These are opaque identifiers, meaning the values won't be meaningful to the reader. You can pass them to the `src` property of a [`<Video>`](/docs/vcs/components/video) component to render the video feed as the source.

## Params

<Badge color="blue">optional</Badge>

An object with the following properties:

| Parameter           | Required | Type      | Description                                                                                                                                                                                            |
| :------------------ | :------: | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `preferScreenshare` |    No    | `Boolean` | When enabled, screen share inputs will be sorted before camera inputs. This is useful when prioritizing screen shares in your layout, especially when all inputs are not included in the final stream. |

## Return type

`useActiveVideo()` returns an object with the following propeties:

| Property                     | Type             | Description                                                                                                                                                                                                                                         |
| :--------------------------- | :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `activeIds`                  | `Array`          | Currently active video source IDs.                                                                                                                                                                                                                  |
| `activeScreenshareIds`       | `Array`          | Currently active video source ids that are of type `'screenshare'`.                                                                                                                                                                                 |
| `dominantId`                 | `String`, `null` | The first video source which has the `'dominant'` flag set. In a video call context, the first video source with the `'dominant'` flag is the active speaker. If none of the inputs are set as `'dominant'`, this will be `null`.                   |
| `displayNamesById`           | `Object`         | A map of display names for each active video ID. Keys are video IDs, values are strings.                                                                                                                                                            |
| `pausedById`                 | `Object`         | A map of paused flags for each active video ID. Keys are video IDs, values are booleans.                                                                                                                                                            |
| `maxSimultaneousVideoInputs` | `Number`         | A count that indicates how many video inputs the embedding host can support. This number represents the number of simultaneous participant video connections the cloud server running the VCS composition can support. (E.g. 20 video connections.) |

## Sample code

<Tip>
  Additional examples of usage for this custom hook can be found in the [source code for the VCS SDK](https://github.com/daily-co/daily-vcs).
</Tip>

```javascript theme={null}
import * as React from 'react';
import { Box, Video } from '#vcs-react/components';
import { useActiveVideo } from '#vcs-react/hooks';

  scaleMode,
  videoStyle,
  placeholderStyle,
  preferScreenshare,
}) {
  const { activeIds } = useActiveVideo({ preferScreenshare });
  const activeId = activeIds.length > 0 ? activeIds[0] : null;

  if (activeId === null) {
    // if nobody is active, show a placeholder
    return <Box style={placeholderStyle} />;
  }

  return (
    <Video
      id="videosingle"
      src={activeId}
      style={videoStyle}
      scaleMode={scaleMode}
    />
  );
}
```