Audio/video - Device Selection

To let the user choose between multiple available input / output devices, you can use the <RtkSettings > component

function DeviceSettings({ open, onClose }) {
  const { meeting } = useRealtimeKitMeeting();
  return (
    <SomeDialogComponent open={open} onClose={onClose}>
      <RtkSettings meeting={meeting} />
    </SomeDialogComponent>
  );
}

If you added RtkDialogManager as suggested in the Basic Structure guide, you can also use <RtkSettingsToggle> component to trigger the inbuilt Dialog.

Extending the last code sample with device selector.

function CustomMeetingPreview() {
  const { meeting } = useRealtimeKitMeeting();

  return (
    <View
      className="bg-secondary-900 flex flex-col items-center justify-center"
      style={{ minHeight: '400px' }}
    >
      {/* Do not re-add this, if already added in the parent component */}
      <RtkDialogManager meeting={meeting} />
      <View className="flex w-full items-center justify-around p-[10%]">
        <View className="relative">
          <RtkParticipantTile meeting={meeting} participant={meeting.self}>
            <RtkAvatar participant={meeting.self} />
            <RtkNameTag participant={meeting.self}>
              <RtkAudioVisualizer participant={meeting.self} slot="start" />
            </RtkNameTag>
            <View
              className="absolute flex"
              style={{
                top: '8px',
                right: '8px',
              }}
            >
              <RtkSettingsToggle meeting={meeting} size="sm" />
            </View>
            <View
              className="absolute flex"
              style={{
                bottom: '8px',
                right: '8px',
              }}
            >
              <RtkMicToggle meeting={meeting} size="sm" />
              <RtkCameraToggle meeting={meeting} size="sm" />
            </View>
          </RtkParticipantTile>
        </View>
        <View className="flex w-1/4 flex-col justify-between">
          <View className="flex flex-col items-center">
            <p>Joining as {meeting.self.name}</p>
          </View>
          <RtkButton
            kind="wide"
            size="lg"
            onClick={async () => {
              await meeting.join();
            }}
          >
            Join
          </RtkButton>
        </View>
      </View>
    </View>
  );
}