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.

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 () => {
    const speakers = await getAudioDeviceList(); // ["SPEAKER_PHONE","WIRED_HEADSET"]
    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 () => {
    const webcams = await getWebcams();
    setCameras(webcams);
  };

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

  //Changing the camera with the selected deviceId
  const handleChangeCamera = (deviceId) => {
    changeWebcam(deviceId);
    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()