Custom Audio Sources - React Native

You can provide a custom audio track for a host's stream both before and during a live session.

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

A custom audio track lets you choose the audio profile and turn noise suppression, echo cancellation and auto gain control on or off.

How to Create a Custom Audio Track ?

• You can create a Custom Audio Track using createMicrophoneAudioTrack() method of @videosdk.live/react-native-sdk.
• This method lets you configure encoding parameters and noise control settings, and returns a CustomStreamTrack.
• The microphone opens when you call this method. The method does not ask the user for microphone access. Call requestPermission() of useMediaDevice() first, or the Promise rejects with ERROR_MICROPHONE_ACCESS_DENIED_OR_DISMISSED (3018).
• If you don't pass the track to the live stream, call stop() on it to close the microphone.

Example

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

let customTrack = await createMicrophoneAudioTrack({
  // It will be the id of the mic from which the voice should be captured.
  microphoneId: "mic-id", // OPTIONAL

  // 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,
  },
});

encoderConfig takes one of six profiles:

encoderConfig	Channels	Use it for
speech_low_quality	Mono	Speech, at a lower quality
speech_standard (default)	Mono	Normal voice
music_standard	Mono	Music, such as songs or instruments
standard_stereo	Stereo	Stereo sources
high_quality	Mono	Unprocessed audio
high_quality_stereo	Stereo	Unprocessed stereo audio

noiseConfig works with any profile:

• If you pass a noiseConfig, it decides every flag. A flag you leave out takes its default: true for noiseSuppression, echoCancellation and autoGainControl, and false for highPassFilter.
• If you don't pass one, the profile decides. speech_low_quality and speech_standard turn noise suppression, echo cancellation and auto gain control on. The music, stereo and high-quality profiles turn them off.

How to Setup Custom Audio Track ?

You can plug in your custom audio track either before going live or dynamically while the session is ongoing.

1. Setup during live stream initialization
2. Setup dynamically using methods

1. Setup during live stream initialization

If you're starting the stream with the mic enabled (micEnabled: true) and wish to use a custom track from the beginning, pass it through the config of RoomProvider.

caution

Custom Track will not apply on micEnabled: false configuration. The track is not published, so call stop() on it if you no longer need it.

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: "<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. Setup dynamically using methods

During the live stream, you can update the audio source by passing the CustomStreamTrack into the unmuteMic() method from 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().

Example

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


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

  const handleToggleMic = async () => {
    if (isMicEnabled) {
      try {
        await muteMic();
      } catch (err) {
        console.error("muteMic failed:", err);
      }
    } else {
      try {
        const 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={handleToggleMic}>
      <Text>{isMicEnabled ? "Mute mic" : "Unmute mic"}</Text>
    </TouchableOpacity>
  );
};

info

Pass only tracks created with the createMicrophoneAudioTrack() method. RoomProvider, unmuteMic() and changeMic() do not accept other objects. A stopped or released track is refused with ERROR_INVALID_CUSTOM_AUDIO_TRACK (3030).

API Reference

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

• Custom Audio Track