Manage Audio and Video Devices - React Native

Hosts can switch their microphone, camera or audio output during a live stream. Audience members (in RECV_ONLY mode) don't publish media, but they can still use setAudioDevice() to pick the speaker, earpiece, wired headset or Bluetooth device they listen on.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• getMics()
• setAudioDevice()
• getCameras()
• changeCam()

The examples on this page load the device lists when the view mounts, so show them once the live stream is joined.

Changing Audio Output Device

getMics()

• This method of the useMediaDevice hook lists the audio devices that audio can be routed to, which can be shown in a list for selection.

• It returns an array of objects, each with a deviceId and a label representing the audio device. On Android, the deviceId is one of the values listed below.

setAudioDevice()

• This method of the useRoom hook switches audio to a device from getMics(). Pass the device object, or one of the device kinds listed below.
• It does not change whether the mic is muted.
• It returns a Promise that rejects when the device you pass is not connected.
• 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 { useState, useEffect } from "react";
import { View, TouchableOpacity, Text } from "react-native";
import { useMediaDevice, useRoom } from "@videosdk.live/react-native-sdk";

const LiveStreamView = () => {
  //Creating two react states to store list of available speakers and selected speaker
  const [speakers, setSpeakers] = useState([]);
  const [selectedSpeaker, setSelectedSpeaker] = useState("");

  //Getting the method to list the audio devices
  const { getMics } = useMediaDevice();

  //Getting the method to switch the audio device
  const { setAudioDevice } = useRoom();

  //Method to get the speakers and load in our state
  const handleGetSpeakers = async () => {
    try {
      // For example: [{ deviceId: "SPEAKER_PHONE", label: "SPEAKER_PHONE", ... }, ...]
      const devices = await getMics();
      setSpeakers(devices);
    } catch (err) {
      console.error("getMics failed:", err);
    }
  };

  useEffect(() => {
    handleGetSpeakers();
  }, []);

  //Changing the speaker with the selected device
  const handleChangeSpeaker = async (device) => {
    try {
      await setAudioDevice(device);
      setSelectedSpeaker(device.deviceId);
    } catch (err) {
      console.error("setAudioDevice failed:", err);
    }
  };

  return (
    <View>
      {speakers.map((speaker) => (
        <TouchableOpacity
          key={speaker.deviceId}
          onPress={() => handleChangeSpeaker(speaker)}
        >
          <Text>
            {speaker.label}
            {speaker.deviceId === selectedSpeaker ? " (selected)" : ""}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

tip

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

const { getMics } = useMediaDevice({
  onAudioDeviceChanged: (devices) => {
    setSpeakers(Array.from(devices.values()));
  },
});

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.

Changing Camera Input Device

getCameras()

• This method of the useMediaDevice hook lists all available cameras, which can be shown in a list for selection.

• It returns an array of objects, each containing a deviceId, a label and a facingMode ("front" or "back") representing the camera device.

changeCam()

• To change the camera device of the host, you need to call this method by passing the desired device's deviceId.

• If the camera is on, it is turned off and on again with the new camera, so every participant receives onStreamDisabled() and then onStreamEnabled() for the video stream.

• If the camera is off, it stays off. The next enableCam() call uses the new camera.

• Call changeCam() without a deviceId to switch to the next camera in the getCameras() list, wrapping around to the first. Use it to flip between the front and back cameras.

• If the deviceId does not match any camera, the call rejects with 3051 ERROR_NO_WEBCAM_DEVICE_FOUND, which is also reported on onError.

Example

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

const LiveStreamView = () => {
  //Creating two react states to store list of available cameras and selected camera
  const [cameras, setCameras] = useState([]);
  const [selectedCamera, setSelectedCamera] = useState("");

  //Getting the method to list the cameras
  const { getCameras } = useMediaDevice();

  //Getting the method to change the camera
  const { changeCam } = useRoom();

  //Method to get the cameras and load in our state
  const handleGetCameras = async () => {
    try {
      const devices = await getCameras();
      setCameras(devices);
    } catch (err) {
      console.error("getCameras failed:", err);
    }
  };

  useEffect(() => {
    handleGetCameras();
  }, []);

  //Changing the camera with the selected deviceId
  const handleChangeCamera = async (deviceId) => {
    try {
      await changeCam(deviceId);
      setSelectedCamera(deviceId);
    } catch (err) {
      console.error("changeCam failed:", err);
    }
  };

  return (
    <View>
      {cameras.map((camera) => (
        <TouchableOpacity
          key={camera.deviceId}
          onPress={() => handleChangeCamera(camera.deviceId)}
        >
          <Text>
            {camera.label}
            {camera.deviceId === selectedCamera ? " (selected)" : ""}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

API Reference

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

• getMics()
• setAudioDevice()
• onAudioDeviceChanged
• getCameras()
• changeCam()