import { Meta } from '@storybook/blocks';

<Meta title="SDK Providers/LocalVideoProvider" />

# LocalVideoProvider

The `LocalVideoProvider` provides `tileId` of video tile associated with the local video, `isVideoEnabled` specifying the local video state, `setIsVideoEnabled` function to set the value of `isVideoEnabled`, `hasReachedVideoLimit` specifying whether or not video limit is reached, and `toggleVideo()` to toggle local video.

> Note: `setIsVideoEnabled` is a workaround for [GitHub Issue 529](https://github.com/aws/amazon-chime-sdk-component-library-react/issues/529) to synchronize the state of `PreviewVideo` and `LocalVideo` internally. This function does not change the actual state of `LocalVideo` and `PreviewVideo`. Don't use this in your application.

The React SDK depends on the Amazon Chime SDK for JavaScript, wherein, a single video stream is attached to a video element at a time. Hence, if `PreviewVideo` and `LocalVideo` component both are rendered on the same page and if both are enabled, stopping the video preview in `PreviewVideo` component will result into disconnecting the video stream for `LocalVideo` as well showing a black screen.

To start/stop a video preview, please check `PreviewVideo` component [documentation](/docs/sdk-components-previewvideo--page).
To start/stop user's local video, use `toggleVideo` function from the `LocalVideoProvider`.

In the case of a video being unplugged, the React SDK will automatically stop the local video tile, and will not choose another video device automatically.

## State

```javascript
{
  // The tile ID associated with the local video
  tileId: null | number;

  // Whether or not the local user has video enabled
  // This does not tell whether the video preview from `PreviewVideo` component is enabled or not.
  isVideoEnabled: boolean;

  // A function to set the value of `isVideoEnabled`, it can not change the state of camera
  // This is aimed to be used internally to synchronize the state of `PreviewVideo` and `LocalVideo`
  setIsVideoEnabled: (isEnabled: boolean) => void;

  // Whether or not video limit is reached, it defaults to false
  hasReachedVideoLimit: boolean;

  // A function that toggles the local video
  toggleVideo: () => Promise<void>;
}
```

You can access the state by using the [useLocalVideo](/docs/sdk-hooks-uselocalvideo--page) hook.

## Usage

If you are using `MeetingProvider`, `LocalVideoProvider` is rendered by default.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useLocalVideo
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
const { tileId, isVideoEnabled, hasReachedVideoLimit, toggleVideo } = useLocalVideo();

  return (
    <p>Tile ID: {tileId}</p>

    <p>
      {isVideoEnabled ? 'LocalVideo is enabled' : 'LocalVideo is disabled'}
    </p>

    <p>
      {hasReachedVideoLimit ? 'Video limit reached' : 'Video limit not reached'}
    </p>

    <button onClick={toggleVideo}>
      {isVideoEnabled ? 'Stop your video' : hasReachedVideoLimit ?
      'Has reached the video limit, can not turn on video' : 'Start your video'}
    </button>
  );
};
```

### Dependencies

- `MeetingProvider`