Overview:
When implementing a video chat application with the agora-rtc-react SDK, local users may experience echo issues under specific configurations. This issue is related to the default behavior of the LocalUser component.
For more information about using agora-rtc-react with React Hooks, refer to the following resources:
- Agora Blog Post: Building a Video Chat App Using React Hooks and Agora
- GitHub Repository: Agora RTC React SDK
Root Cause:
The echo issue arises from the default configuration of the LocalUser component, specifically the playAudio property.
By default, the value of playAudio is determined by the micOn state, which is a boolean. When the local user’s micOn state is set to true, playAudio is also set to true. This causes the local user’s own audio to play back, resulting in an echo.
This behavior only affects the local user and does not impact other users in the session.
Solution:
To resolve the issue, explicitly set the playAudio property to false in the LocalUser component, rather than relying on the micOn state. Below is the corrected configuration:
<LocalUser
audioTrack={localMicrophoneTrack}
cameraOn={cameraOn}
className="m-2"
micOn={micOn}
playAudio={false} //if this is based on micOn state, it will always be true when the mic is on
playVideo={playVideo}
style={{ width: "300px", height: "300px" }}
videoTrack={localCameraTrack}
/>
By setting playAudio to false, you ensure that the local user’s audio is not played back to themselves, eliminating the echo issue.
Additional Resources:
For more details, refer to the related example in the Agora RTC React GitHub repository: