Device settings
The SDK's default implementation of device settings components consists of audio and video device selectors. These are:
DeviceSelectorVideo
DeviceSelectorAudioInput
DeviceSelectorAudioOutput
There is also a composing component DeviceSettings
putting these together.
![Default device settings panel](/video/docs/assets/images/device-settings-5adf775ca455e4c923b84ecae7c99dff.png)
![Default camera device selector](/video/docs/assets/images/device-selector-video-0b2bea1572bd63a37e29c16aaacab427.png)
![Default audio input device selector](/video/docs/assets/images/device-selector-audio-input-066aef3bc8a940ea40220c8f0aad1470.png)
![Default audio output device selector](/video/docs/assets/images/device-selector-audio-output-f49c1faa8c997e75460d1bd2b528c779.png)
General usage
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:
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 | Visually display a list or dropdown selector | list | dropdown | undefined | list |
DeviceSelectorVideo
Name | Description | Type | Default |
---|---|---|---|
title | Title is displayed at the top of the selector component | string | undefined | Select a Camera |
visualType | Visually display a list or dropdown selector | list | dropdown | undefined | list |
DeviceSelectorAudioInput
Name | Description | Type | Default |
---|---|---|---|
title | Title is displayed at the top of the selector component | string | undefined | Select a Mic |
visualType | Visually display a list or dropdown selector | list | dropdown | undefined | list |
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 |
Customization
If you want to create your own component, you can make use of Devices Management API
to list and select devices.