Manage Audio and Video Devices - React Native

This feature allows hosts to switch their audio or video devices during a live stream. Only hosts (in SEND_AND_RECV mode) can change input/output devices, ensuring they maintain control over their audio and video quality, while audience members (in RECV_ONLY mode) continue to receive the broadcast seamlessly.

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.

• changeWebcam()

Changing Audio Output Device

getAudioDeviceList()

• This method of the useMeeting hook provides a list of all available audio devices, which can be shown in a picker for selection.

• It returns an array of objects, each containing a deviceId representing the audio device.

switchAudioDevice()

• The switchAudioDevice() method sllows you to switch to a specific audio output device of your choice.
• 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 { View, Picker } from 'react-native';
import { useState, useEffect } from 'react';
import { getAudioDeviceList, switchAudioDevice} 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("");

  //Method to get the speaker and load in our state
  const handleGetSpeakers = async () => {
    let speakers;
    try {
      speakers = await getAudioDeviceList(); // ["SPEAKER_PHONE","WIRED_HEADSET"]
    } catch (err) {
      console.error("getAudioDeviceList failed:", err);
    }
    setSpeakers(speakers);
  };

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

  //Changing the speaker with the selected deviceId
  const handleChangeSpeaker = (deviceId) => {
    // Note: Audio output device selection might be handled differently on mobile platforms
    switchAudioDevice(deviceId);
  };

  return (
    <View>
      <Picker
        selectedValue={selectedSpeaker}
        onValueChange={handleChangeSpeaker}
      >
        {speakers.map((speaker) => (
          <Picker.Item 
            key={speaker}
            label={speaker} 
            value={speaker} 
          />
        ))}
      </Picker>
    </View>
  );
};

note

EARPIECE is not supported whenever WIRED_HEADSET or BLUETOOTH device is connected

Changing Camera Input Device

getWebcams()

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

• It returns an array of objects, each containing a deviceId and a label representing the camera device.

changeWebcam()

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

Example

import { View, Picker } from 'react-native';
import { useState, useEffect } from 'react';
import { useMeeting } 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 methods to change and get the camera
  const { getWebcams, changeWebcam } = useMeeting();

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

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

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

  return (
    <View>
      <Picker
        selectedValue={selectedCamera}
        onValueChange={handleChangeCamera}
      >
        {cameras.map((camera) => (
          <Picker.Item 
            key={camera.deviceId}
            label={camera.label} 
            value={camera.deviceId} 
          />
        ))}
      </Picker>
    </View>
  );
};

API Reference

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

• getWebcams()
• changeWebcam()