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.

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

DeviceSelectorVideo

DeviceSelectorAudioInput

DeviceSelectorAudioOutput

AudioVolumeIndicator

This component does not accept any props.

SpeakerTest

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.

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 to list and select devices.