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

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

# VideoInputProvider

Provides a list of the user's available video input devices and the currently selected video input device.

## State

```ts
{
  // A list of the user's available video input devices
  devices: [{
    deviceId: string;
    label: string;
  }],

  // The current selected video input device
  selectedDevice: VideoInputDevice | undefined;
}

```

You can access the provided values using [useVideoInputs](/docs/sdk-hooks-usevideoinputs--page) hook.

## Importing

```javascript
import { VideoInputProvider } from 'amazon-chime-sdk-component-library-react';
```

## Usage

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

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

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

const MyChild = () => {
  const { devices, selectedDevice } = useVideoInputs();
  const items = devices.map((device) => (
    <li key={device.deviceId}>{device.label}</li>
  ));

  return (
    <div>
      <p>Current Selected Video Input Device: {JSON.stringify(selectedDevice)}</p>
      <p>Devices</p>
      <ul>{items}</ul>
    </div>
  );
};
```

### Dependencies

- `MeetingProvider`