Custom Audio Track - React
We have introduced the ability to pass a custom Audio track for the Audio of the participants. This feature can be used to add custom layers like background noise removal, echo cancellation, etc. on audio and send it to other participants.
Creating a Custom Audio Track
- You can create a Audio Track using
createMicrophoneAudioTrack()
method of@videosdk.live/react-sdk
. - This method can be used to create audio track using different encoding parameters and noise cancellation configuration.
Parameters
-
microphoneId:
- type:
String
- required:
false
- It will be the id of the mic from which the audio should be captured.
- type:
-
encoderConfig:
- type:
String
- required:
false
- default:
speech_standard
- Allowed values :
speech_low_quality
|speech_standard
|music_standard
|standard_stereo
|high_quality
|high_quality_stereo
- It will be the encoder configuration you want to use for Audio Track.
- type:
-
noiseConfig
-
echoCancellation
- type:
boolean
- required:
false
- If
true
echo cancellation will turned on else it would be turned off.
- type:
-
autoGainControl
- type:
boolean
- required:
false
- If
true
auto gain will turned on else it would be turned off.
- type:
-
noiseSuppression
- type:
boolean
- required:
false
- If
true
noise suppression will turned on else it would be turned off.
- type:
-
Returns
MediaStream
Example
import { createMicrophoneAudioTrack } from "@videosdk.live/react-sdk";
let customTrack = await createMicrophoneAudioTrack({
encoderConfig: "high_quality",
noiseConfig: {
noiseSuppression: true,
echoCancellation: true,
autoGainControl: true,
},
});
Using Custom Audio Track
Custom Track while initializing the 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.
import {
createMicrophoneAudioTrack,
MeetingProvider,
} from "@videosdk.live/react-sdk";
function App() {
const getTrack = async () => {
const track = await await createMicrophoneAudioTrack({
encoderConfig: "high_quality",
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}
reinitialiseMeetingOnConfigChange={true}
joinWithoutUserInteraction={true}
>
<MeetingView />
</MeetingProvider>
)
);
}
Custom Track with unmuteMic()
In order to switch tracks during the meeting, you have to pass the MediaStream
in the unmuteMic()
method of useMeeting
.
You can also pass custom track in toggleMic()
method of useMeeting
.
Make sure to call muteMic()
before you create a new track as it may lead to unexpected behavior.
import {
createMicrophoneAudioTrack,
useMeeting,
} from "@videosdk.live/react-sdk";
let customTrack = await createMicrophoneAudioTrack({
encoderConfig: "high_quality",
noiseConfig: {
noiseSuppression: true,
echoCancellation: true,
autoGainControl: true,
},
});
const { unmuteMic, toggleMic } = useMeeting();
unmuteMic(customTrack);
//or
toggleMic(customTrack);
Got a Question? Ask us on discord