Change Audio Output Device - React Native

During the room, at any point, a participant wishing to switch their output audio device, such as from headphones to speakers, can do so using the below-mentioned methods.

Getting Output Device

The getMics() method of the useMediaDevice hook lists the audio devices that audio can be routed to. It resolves with an array of device objects, each with a deviceId and a label. On Android, the deviceId is one of the values below.

Supported Audio Output Devices :

SPEAKER_PHONE - Switch audio to the device speaker

EARPIECE - Switch audio to the device earpiece

WIRED_HEADSET - Switch audio to the connected wired device

BLUETOOTH - Switch audio to the connected bluetooth device

import { useMediaDevice } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

const RoomView = () => {
  const { getMics } = useMediaDevice();

  const onPress = async () => {
    let devices;
    try {
      devices = await getMics();
    } catch (err) {
      console.error("getMics failed:", err);
    }
    // For example: [{ deviceId: "SPEAKER_PHONE", label: "SPEAKER_PHONE", ... }, ...]
    console.log("Devices :", devices);
  };

  return (
    <TouchableOpacity onPress={onPress}>
      <Text>Get audio devices</Text>
    </TouchableOpacity>
  );
};

tip

To refresh your device list when a headset or Bluetooth device is connected or removed, pass an onAudioDeviceChanged callback to the useMediaDevice hook. It is called with a Map of the available audio devices, keyed by deviceId.

import { useState } from "react";
import { useMediaDevice } from "@videosdk.live/react-native-sdk";

const AudioDeviceList = () => {
  const [devices, setDevices] = useState([]);

  useMediaDevice({
    onAudioDeviceChanged: (availableDevices) => {
      setDevices(Array.from(availableDevices.values()));
    },
  });

  return null;
};

Changing Output Device

The setAudioDevice() method of the useRoom hook switches audio to the device you choose. Pass a device from getMics() or its deviceId. Call it after join(); before that it rejects. It returns a Promise that rejects when the device you pass is not connected.

import { useRoom } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

const RoomView = () => {
  const { setAudioDevice } = useRoom();

  const changeAudioDevice = async (device) => {
    try {
      await setAudioDevice(device);
    } catch (err) {
      console.error("setAudioDevice failed:", err);
    }
  };

  return (
    <>
      {/* for device speaker */}
      <TouchableOpacity onPress={() => changeAudioDevice("SPEAKER_PHONE")}>
        <Text>Speaker</Text>
      </TouchableOpacity>

      {/* for device earpiece */}
      <TouchableOpacity onPress={() => changeAudioDevice("EARPIECE")}>
        <Text>Earpiece</Text>
      </TouchableOpacity>

      {/* for wired headset */}
      <TouchableOpacity onPress={() => changeAudioDevice("WIRED_HEADSET")}>
        <Text>Wired headset</Text>
      </TouchableOpacity>

      {/* for bluetooth device */}
      <TouchableOpacity onPress={() => changeAudioDevice("BLUETOOTH")}>
        <Text>Bluetooth</Text>
      </TouchableOpacity>
    </>
  );
};

note

• On Android, while a wired headset is connected, switching to EARPIECE keeps the audio on the headset.
• On Android 12 and later, switching to BLUETOOTH needs the BLUETOOTH_CONNECT permission. Ask for it with requestBluetoothPermission() of the useMediaDevice hook.

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• getMics()
• setAudioDevice()
• onAudioDeviceChanged
• requestBluetoothPermission()