Optimize Audio Track - React Native

Set the audio track's quality to match your use case.

You can pass a custom audio track for a participant's media before and during the room.

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.

• muteMic()
• unmuteMic()

Custom Audio Track

This feature allows you to configure audio processing such as noise suppression and echo cancellation, and send these modifications to other participants.

Once you set a custom audio track created using createMicrophoneAudioTrack(), the SDK remembers its settings and reuses them whenever the mic is turned back on. To change the track configuration, pass a new track created using createMicrophoneAudioTrack(). The SDK accepts only tracks created using createMicrophoneAudioTrack().

Encoder Config Reference

Encoder Config	Channels	Auto Gain	Echo Cancellation	Noise Suppression
speech_low_quality	Mono	TRUE	TRUE	TRUE
speech_standard	Mono	TRUE	TRUE	TRUE
music_standard	Mono	FALSE	FALSE	FALSE
standard_stereo	Stereo	FALSE	FALSE	FALSE
high_quality	Mono	FALSE	FALSE	FALSE
high_quality_stereo	Stereo	FALSE	FALSE	FALSE

note

If you face issues related to echo, you can use noiseConfig with echoCancellation: true. Echo cancellation attempts to prevent echo effects on a two-way audio connection by reducing or eliminating crosstalk between the user's output device and their input device — for example, keeping the microphone from picking up sound from the speakers.

How to Create a Custom Audio Track ?

• You can create an audio track using createMicrophoneAudioTrack() method of @videosdk.live/react-native-sdk.

• This method enables the creation of a audio track with various encoding parameters and noise cancellation configuration, ultimately returning a CustomStreamTrack.

• The microphone opens when you call this method. The method does not ask the user for microphone access, so get it first with requestPermission() from useMediaDevice(). If you don't pass the track to the room, call stop() on it to close the microphone.

Example

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

let customTrack = await createMicrophoneAudioTrack({
  // This will accept the voice profile you want to capture.
  encoderConfig: "speech_standard", // `high_quality` | `music_standard`,  Default : `speech_standard`

  noiseConfig: {
    // It is used to improve the quality of audio by removing background noise
    // that can interfere with the clarity of speech.
    noiseSuppression: true,

    // It is used to remove unwanted echoes from voice.
    echoCancellation: true,

    // It is used to maintain a consistent level of loudness or amplitude in a voice.
    autoGainControl: true,
  },
});

Here are different configurations for customizing audio tracks based on specific use cases:

• speech_standard : This config is optimised for normal voice communication.

• high_quality : This config is used for obtaining RAW audio, allowing you to apply your noiseConfig.

• music_standard : This config is optimised for communication scenarios, where the sharing of musical elements, such as songs or instrumental sounds, is crucial.

How to Setup Custom Audio Track ?

The custom track can be configured both before and after the room is initialized. Following are the methods that help in doing so:

1. Setting up a Custom Track during the initialization of a room
2. Setting up a Custom Track with methods

1. Setting up a Custom Track during the initialization of a room

If you are enabling the mic (micEnabled: true) in the config of RoomProvider and wish to use custom tracks from the start of the room, you can pass a custom track in the config as demonstrated below.

caution

Custom Track will not apply on micEnabled: false configuration.

Example

import { useEffect, useState } from "react";
import {
  Constants,
  createMicrophoneAudioTrack,
  RoomProvider,
  useMediaDevice,
} from "@videosdk.live/react-native-sdk";

function App() {
  const { requestPermission } = useMediaDevice();

  const getTrack = async () => {
    // createMicrophoneAudioTrack() does not ask for access, so ask first.
    await requestPermission(Constants.permission.AUDIO_AND_VIDEO);
    const track = await createMicrophoneAudioTrack({
      encoderConfig: "speech_standard",
      noiseConfig: {
        noiseSuppression: true,
        echoCancellation: true,
        autoGainControl: true,
      },
    });
    setCustomTrack(track);
  };

  let [customTrack, setCustomTrack] = useState(null);

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

  return (
    customTrack && (
      <RoomProvider
        config={{
          roomId,
          participantName: "John Doe",
          micEnabled: true, //If true, it will use the passed custom track to turn mic on
          camEnabled: true,
          //Pass the custom audio track here
          customMicrophoneTrack: customTrack,
        }}
        token={token}
      >
        <RoomView />
      </RoomProvider>
    )
  );
}

2. Setting up a Custom Track with methods

To switch tracks during the room, you need to pass the CustomStreamTrack to the unmuteMic() method of the useRoom hook.

tip

Make sure to call the muteMic() method before you pass a new track to unmuteMic(). While the mic is on, unmuteMic() rejects with ERROR_ALREADY_IN_REQUESTED_STATE (3054). To replace the track while the mic is on, pass it to changeMic().

A stopped or released track is refused with ERROR_INVALID_CUSTOM_AUDIO_TRACK (3030).

Example

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

const RoomControls = () => {
  const { isMicEnabled, unmuteMic, muteMic } = useRoom();

  const handleUnmuteMic = async () => {
    if (isMicEnabled) {
      try {
        await muteMic();
      } catch (err) {
        console.error("muteMic failed:", err);
      }
    } else {
      try {
        let customTrack = await createMicrophoneAudioTrack({
          encoderConfig: "speech_standard",
          noiseConfig: {
            noiseSuppression: true,
            echoCancellation: true,
            autoGainControl: true,
          },
        });

        await unmuteMic(customTrack);
      } catch (err) {
        console.error("unmuteMic failed:", err);
      }
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleUnmuteMic();
        }}
      >
        <Text>Unmute Mic</Text>
      </TouchableOpacity>
    </>
  );
};

How to Know When a Custom Track Ends ?

• isEnded is true once the device the track opened has gone: after stop(), when the room turns the mic off or replaces the track, when the participant leaves the room, or when the microphone fails.

• Set onEnded on the track to find out when that happens. It is called once, with the error that ended the track, such as a microphone failure, or with null when the track was stopped, turned off, replaced, or the room was left.

• If you set onEnded after the track has already ended, it is called right away.

• An ended track cannot be passed to the room again. Create a new track with createMicrophoneAudioTrack().

Example

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

const customTrack = await createMicrophoneAudioTrack({
  encoderConfig: "speech_standard",
});

customTrack.onEnded = (error) => {
  if (error) {
    console.error("Microphone track ended:", error.code, error.message);
  } else {
    console.log("Microphone track stopped");
  }
};

if (customTrack.isEnded) {
  // Create a new track before you pass it to unmuteMic() or changeMic()
}

API Reference

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

• Custom Audio Track