Optimize Audio Track - React Native

While optimizing for the best listening experience, it is necessary to fine-tune the audio track that is being used during the calls.

For the best fine-tuning experience, we have introduced the ability to pass a custom audio track for the participant's media before and during the meeting.

Custom Audio Track

This feature can be used to add custom layers like background noise removal, echo cancellation, etc. on audio and send it to other participants.

How to Create Custom Audio Track ?

• You can create a Audio Track using createMicrophoneAudioTrack() method of @videosdk.live/react-native-sdk.

• This method can be used to create audio track using different encoding parameters and noise cancellation configuration.

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

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

• high_quality : This config is used for getting RAW audio, where you can apply your noiseConfig.

• music_standard : This config is optimised for communication, where sharing of musical notes such as songs or instrumental sounds, is important.

How to Setup Custom Audio Track ?

The custom track can be set up both before and after the initialization of the meeting.

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

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

If you are passing micEnabled: true in the config of MeetingProvider and want to use custom tracks from start of the meeting, you can pass custom track in the config as shown below.

caution

Custom Track will not apply on micEnabled: false configuration.

Example

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

function App() {
  const getTrack = async () => {
    const track = await createMicrophoneAudioTrack({
      encoderConfig: "speech_standard",
      noiseConfig: {
        noiseSuppression: true,
        echoCancellation: true,
        autoGainControl: true,
      },
    });
    setCustomTrack(track);
  };

  let [customTrack, setCustomTrack] = useState();

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

  return (
    customTrack && (
      <MeetingProvider
        config={{
          meetingId,
          micEnabled: true, //If true, it will use the passed custom track to turn mic on
          webcamEnabled: true,
          //Pass the custom audio track here
          customMicrophoneAudioTrack: customTrack,
        }}
        token={token}
      >
        <MeetingView />
      </MeetingProvider>
    )
  );
}

2. Setting up a Custom Track with methods

In order to switch tracks during the meeting, you have to pass the MediaStream in the unmuteMic() or toggleMic() method of useMeeting.

tip

Make sure to call muteMic() before you create a new track as it may lead to unexpected behavior.

Example

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

const MeetingControls = () => {
  const { localMicOn, unmuteMic, muteMic, toggleMic } = useMeeting();

  const handleToggleMic = async () => {
    if (localMicOn) {
      toggleMic();
    } else {
      let customTrack = await createMicrophoneAudioTrack({
        encoderConfig: "speech_standard",
        noiseConfig: {
          noiseSuppression: true,
          echoCancellation: true,
          autoGainControl: true,
        },
      });

      toggleMic(customTrack);
    }
  };

  const handleUnmuteMic = async () => {
    if (localMicOn) {
      muteMic();
    } else {
      let customTrack = await createMicrophoneAudioTrack({
        encoderConfig: "speech_standard",
        noiseConfig: {
          noiseSuppression: true,
          echoCancellation: true,
          autoGainControl: true,
        },
      });

      unmuteMic(customTrack);
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleToggleMic();
        }}
      >
        <Text>Toggle Mic</Text>
      </TouchableOpacity>

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

API Reference

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

• Custom Audio Track