# Device settings

The SDK provides device settings components for audio and video selection:

- `DeviceSelectorVideo` - camera selection
- `DeviceSelectorAudioInput` - microphone selection
- `DeviceSelectorAudioOutput` - speaker selection
- `AudioVolumeIndicator` - visual audio level indicator
- `SpeakerTest` - test speaker output
- `DeviceSettings` - combines all selectors

## Best Practices

- Use `DeviceSettings` for a complete settings panel.
- Use individual selectors for custom layouts.
- Show device settings in a lobby/preview screen before joining calls.

![Default device settings panel](https://getstream.io/docs-assets/images/93cbb6a53c45.png)

![Default camera device selector](https://getstream.io/docs-assets/images/84d7d70364f6.png)

![Default audio input device selector](https://getstream.io/docs-assets/images/42d2cb268b07.png)

![Default audio output device selector](https://getstream.io/docs-assets/images/cb20ba1143f0.png)

## General usage

```tsx
import { Call, DeviceSettings, StreamCall } from "@stream-io/video-react-sdk";

const MyDevicePanel = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <DeviceSettings />
    </StreamCall>
  );
};
```

Or use the components individually:

```tsx
import {
  Call,
  DeviceSelectorAudioInput,
  DeviceSelectorVideo,
  StreamCall,
} from "@stream-io/video-react-sdk";

const MyDevicePanel = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <DeviceSelectorVideo />
      <DeviceSelectorAudioInput />
    </StreamCall>
  );
};
```

## Props

### DeviceSettings

| Name         | Description                                       | Type                              | Default |
| ------------ | ------------------------------------------------- | --------------------------------- | ------- |
| `visualType` | Controls how the device settings menu is rendered | `portal` \| `menu` \| `undefined` | `menu`  |

### DeviceSelectorVideo

| Name         | Description                                               | Type                              | Default           |
| ------------ | --------------------------------------------------------- | --------------------------------- | ----------------- |
| `title`      | Title is displayed at the top of the selector component   | `string` \| `undefined`           | `Select a Camera` |
| `visualType` | Display as a radio list, dropdown, or live device preview | `list` \| `dropdown` \| `preview` | `list`            |

### DeviceSelectorAudioInput

| Name                     | Description                                               | Type                              | Default        |
| ------------------------ | --------------------------------------------------------- | --------------------------------- | -------------- |
| `title`                  | Title is displayed at the top of the selector component   | `string` \| `undefined`           | `Select a Mic` |
| `visualType`             | Display as a radio list, dropdown, or live device preview | `list` \| `dropdown` \| `preview` | `list`         |
| `volumeIndicatorVisible` | Show volume indicator                                     | `boolean` \| `undefined`          | `true`         |

### DeviceSelectorAudioOutput

| Name                  | Description                                                       | Type                                | Default                        |
| --------------------- | ----------------------------------------------------------------- | ----------------------------------- | ------------------------------ |
| `title`               | Title is displayed at the top of the selector component           | `string` \| `undefined`             | `Select a Speaker`             |
| `visualType`          | Visually display a list or dropdown selector                      | `list` \| `dropdown` \| `undefined` | `list`                         |
| `speakerTestVisible`  | Show speaker test button                                          | `boolean` \| `undefined`            | `true`                         |
| `speakerTestAudioUrl` | URL of the audio file to play when speaker test button is clicked | `string` \| `undefined`             | `SDK provided audio test file` |

### AudioVolumeIndicator

This component does not accept any props.

### SpeakerTest

| Name       | Description                                         | Type                    | Default                        |
| ---------- | --------------------------------------------------- | ----------------------- | ------------------------------ |
| `audioUrl` | URL of the audio file to play for the speaker test. | `string` \| `undefined` | `SDK provided audio test file` |

## Preview mode

Setting `visualType` to `preview` renders a live preview for each available device. For cameras, each option shows a real-time video feed. For microphones, each option shows an audio level indicator.

> **Note:** The `preview` mode calls `getUserMedia` for every available device in order to render a live feed or audio level for each one. Mobile browsers and Safari restrict concurrent `getUserMedia` streams and can fail or behave inconsistently when many are opened at once, so `preview` is not reliable there. Use `list` or `dropdown` on mobile devices and Safari.

```tsx
import {
  Call,
  DeviceSelectorAudioInput,
  DeviceSelectorVideo,
  StreamCall,
} from "@stream-io/video-react-sdk";

const MyDevicePreviewPanel = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <DeviceSelectorVideo visualType="preview" />
      <DeviceSelectorAudioInput visualType="preview" />
    </StreamCall>
  );
};
```

## Customization

If you want to create your own component, you can make use of [`Devices Management API`](https://getstream.io/video/docs/react/v2/guides/camera-and-microphone/) to list and select devices.

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-components/participants/device-settings/](https://getstream.io/video/docs/react/v2/ui-components/participants/device-settings/).