Echo issue in video call

[sukesh-pfx]

Hi, I'm facing a continuous echo issue on a video call. I may be wrong I found that when I toggled the mic on/off it's happening. Please let me know any workaround for this
Using
"agora-rtc-sdk-ng": "^4.6.0",
This is my code
please tell me what I have done wrong .

 `const useVideoCall = (videoClient, screenClient) => {
  const [allUsers, setUsers] = useState([]);
  const [trackStatus, setTrackStatus] = useState({
    video: false,
    audio: false,
  });
  const [localVideoTrack, setLocalVideoTrack] = useState(undefined);
  const [localAudioTrack, setLocalAudioTrack] = useState(undefined);
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const { chatDetails } = useVideoChatDetails();

  const createAudioAndVideoTrack = useCallback(async () => {
    try {
      const {
        videoCall: { uid },
      } = chatDetails;
      setIsLoading(true);
      const microphoneTrack = await AgoraRTC.createMicrophoneAudioTrack({
        AEC: true,
        ANS: true,
      });
      const cameraTrack = await AgoraRTC.createCameraVideoTrack();

      setLocalAudioTrack(microphoneTrack);
      setLocalVideoTrack(cameraTrack);
      setUsers((prevUsers) => [
        ...prevUsers,
        {
          videoTrack: cameraTrack,
          uid: uid,
        },
      ]);
      setTrackStatus({
        video: cameraTrack ? true : false,
        audio: microphoneTrack ? true : false,
      });
      setIsLoading(false);
    } catch (error) {}
  }, [chatDetails]);

  useEffect(() => {
    if (!isLoggedIn) {
      createAudioAndVideoTrack();
    }
  }, [createAudioAndVideoTrack, isLoggedIn]);

  const joinVideoCall = async () => {
    if (!videoClient || !chatDetails || isLoading) return;

    const {
      videoCall: { agoraToken, uid },
    } = chatDetails;

    try {
      await videoClient.join(
        chatDetails?.appId,
        chatDetails?.channelName,
        agoraToken,
        uid
      );
      init();
      videoClient.publish([localAudioTrack, localVideoTrack]);
      setLoggedIn(true);
    } catch (error) {}
  };


  const init = () => {
    videoClient.on("user-published", async (user, mediaType) => {
      await videoClient.subscribe(user, mediaType);
      console.log("subscribe success");
      //   updatePublishStatus(user);
      const remoteVideoTrack = user?.videoTrack || user?._videoTrack;
      const audio = user?.hasAudio;
      const video = user?.hasVideo;
      const id = user?.uid;
      if (mediaType === "video") {
        setUsers((preUser) => {
          return preUser.map((joinedUser) => {
            if (joinedUser?.uid === user?.uid) {
              return {
                ...user,
                videoTrack: remoteVideoTrack,
                video: video,
                audio: audio,
                uid: id,
              };
            }
            return joinedUser;
          });
        });
      }
      if (mediaType === "audio") {
        try {
          user.audioTrack.play();
          setUsers((prevUsers) => {
            return prevUsers.map((User) => {
              if (User.uid === user.uid) {
                return {
                  ...User,
                  videoTrack: remoteVideoTrack,
                  video: video,
                  audio: audio,
                  uid: id,
                };
              }
              return User;
            });
          });
        } catch (error) {}
      }
    });

    videoClient.on("user-unpublished", (user, type) => {
      console.log("unpublished", user, type);
      const remoteVideoTrack = user?.videoTrack || user?._videoTrack;
      const audio = user?.hasAudio;
      const video = user?.hasVideo;
      const id = user?.uid;
      if (type === "audio") {
        try {
          user.audioTrack.stop();
          setUsers((prevUsers) => {
            return prevUsers.map((User) => {
              if (User.uid === user.uid) {
                return {
                  ...User,
                  videoTrack: remoteVideoTrack,
                  video: video,
                  audio: audio,
                  uid: id,
                };
              }
              return User;
            });
          });
        } catch (error) {}
      }
      if (type === "video") {
        setUsers((prevUsers) => {
          return prevUsers.map((User) => {
            if (User.uid === user.uid) {
              return {
                ...User,
                videoTrack: remoteVideoTrack,
                video: video,
                audio: audio,
                uid: id,
              };
            }
            return User;
          });
        });
        
      }
    });

    videoClient.on("user-left", (user) => {
      console.log("leaving", user);
      setUsers((prevUsers) => {
        return prevUsers.filter((User) => User.uid !== user.uid);
      });
    });

    videoClient.on("user-joined", (user) => {
      setUsers((prevUsers) => {
        return [
          ...prevUsers,
          {
            ...user,
            videoTrack: undefined,
            video: false,
            audio: false,
            uid: user?.uid,
          },
        ];
      });
    });
  };

  const toggleAudio = (status) => {
    try {
      localAudioTrack.setEnabled(status);
    } catch (error) {}
  };
  const toggleVideo = (status) => {
    try {
      localVideoTrack.setEnabled(status);
    } catch (error) {}
  };

  return {
    toggleAudio,
    toggleVideo,
    joinVideoCall,
    allUsers,
    isLoggedIn,
  };
};`

[sukesh-pfx]

Issue fixed
local audio track caused the issue.

[dineshshaw]

Hii Sukesh,
How did you fix the issue related to localAudioTrack?

[sukesh-pfx]

Hii Sukesh,
How did you fix the issue related to localAudioTrack?

Hi @dineshshaw

Do not play localAudioTrack