Agora IO，使用 agora-rtc-react 进行音频回声

Question

我有一个使用 nextjs 开发的网络应用程序，它使用 agora-rtc-react v2.3.0 和 agora-rtc-sdk-ng v4.22.1。当我进入视频通话时，我的本地用户不断听到他所说的一切，就像回声一样。例如：如果我说“你好”，这个声音就会返回到我的音频输出设备。这里会出现什么问题呢？我遵循了我发现的所有关于 Agora 集成的教程，没有一个没有这个 echo 就可以工作。这是我的代码的一些部分：

这是我创建本地曲目的地方

    function useAgoraLocalTrack() {
      const [micOn, setMic] = useState(true);
      const [camOn, setCam] = useState(true);

      const camTrack = useLocalCameraTrack(camOn);
      const micTrack = useLocalMicrophoneTrack(micOn, { AEC: true, ANS: true });

      const toggleMicTrack = async (newState?: boolean) => {
        setMic(newState ?? ((prev) => !prev));
      };

      const toggleCamTrack = async (newState?: boolean) => {
        setCam(newState ?? ((prev) => !prev));
      };

      const localVolume = useVolumeLevel(
        micTrack.localMicrophoneTrack as ILocalAudioTrack
      );

      const tracksReady = !!(
        camTrack.localCameraTrack && micTrack.localMicrophoneTrack
      );

      const { error: publishTracksError, isLoading: publishTracksLoading } =
        usePublish([micTrack.localMicrophoneTrack, camTrack.localCameraTrack]);

      return {
        camOn,
        camTrack,

        micOn,
        micTrack,

        tracksReady,

        localVolume,

        toggleCamTrack,
        toggleMicTrack,

        publishTracksError,
        publishTracksLoading,
      };
    }

这是我加入房间的地方：

    function useAgoraLocalChannel(client: IAgoraRTCClient | null) {
      const tokenPacienteRef = useRef<string>("");

      const [isInCall, setIsInCall] = useState(false);
      const [salaVitualData, setSalaVirtualData] =
        useState<SalaVirtualParticipanteResponse | null>(null);

      const [roomData, setRoomData] = useState<{
        uid: string | number;
        token: string | null;
        channel: string;
      } | null>(null);

      const joinOptions: JoinOptions = {
        uid: roomData?.uid || "",
        token: roomData?.token ?? null,
        channel: roomData?.channel || "",
        appid: process.env.NEXT_PUBLIC_APP_AGORA_APP_ID,
      };

      const {
        data: joinData,
        error: joinError,
        isLoading: joinIsLoading,
        isConnected: joinIsConnected,
      } = useJoin(joinOptions, isInCall);

      const isConnected = useIsConnected();
      const networkQuality = useNetworkQuality();
      const connectionState = useConnectionState();

      const joinChannel = useCallback(
        async (
          channel: string,
          idDto: SalaVirtualParticipanteDTO,
          tokenPaciente: string | null = null,
          token: string | null = null
        ): Promise<SalaVirtualParticipanteResponse | null> => {
          try {
            if (!client) {
              throw new Error("Client is not initialized");
            }

            if (salaVitualData) {
              setRoomData({
                channel,
                token: token ?? null,
                uid: salaVitualData.id,
              });

              return salaVitualData;
            }

            const url =
              idDto.tipo === "COLABORADOR"
                ? API_ENDPOINT
                : API_ENDPOINT_2(tokenPaciente ?? "");

            const res: SalaVirtualParticipanteResponse = await frontendFetcher({
              url,
              data: idDto,
              method: "POST",
              redirectOnUnauthorized: false,
            });

            setSalaVirtualData(res);

            tokenPacienteRef.current = tokenPaciente ?? "";

            setRoomData({
              channel,
              uid: res.id,
              token: token ?? null,
            });

            setIsInCall(true);

            return res;
          } catch (error) {
            console.error("JOIN CHANNEL ERROR", error);

            return null;
          }
        },
        [client, salaVitualData]
      );

      const leaveChannel = useCallback(async () => {
        try {
          if (!client) {
            throw new Error("Client is not initialized");
          }

          const dto: AtualizaSalaVirtualParticipanteDTO = {
            dataHoraSaida: new Date().toISOString(),
          };

          const url =
            salaVitualData?.tipo === "COLABORADOR"
              ? API_ENDPOINT
              : API_ENDPOINT_2(tokenPacienteRef.current);

          await frontendFetcher({
            url: `${url}/${salaVitualData?.id}`,
            method: "PATCH",
            data: dto,
            redirectOnUnauthorized: false,
          });

          setSalaVirtualData(null);

          setIsInCall(false);

          tokenPacienteRef.current = "";
        } catch (error) {
          console.error("LEAVE CHANNEL ERROR", error);
        }
      }, [client, salaVitualData?.id, salaVitualData?.tipo]);

      return {
        isInCall,

        isConnected,

        roomData,
        salaVitualData,

        joinChannel,
        leaveChannel,

        networkQuality,

        connectionState,

        joinData,
        joinError,
        joinIsLoading,
        joinIsConnected,
      };
    }

这就是我使用本地曲目的方式：

    <LocalUser
      micOn={micOn}
      id="local-user"
      allowFullScreen
      cameraOn={camOn}
      className="tele-view__call-view__video"
      videoTrack={camTrack?.localCameraTrack}
      audioTrack={micTrack?.localMicrophoneTrack}
      cover="/images/users/user-dummy-img-dark.webp"
    />

此代码中是否存在导致这些问题的错误？如果不是我能做什么来解决它？

我尝试更改 MicrophoneAudioTrackInitConfig、ClientConfig 和 LocalUser 组件中的一些配置，但没有任何效果。

Answer 1

对于那些来自未来的人，我找到了解决这个问题的方法，只需在 LocalUser 组件中设置“playAudio={false}”即可

<LocalUser
  micOn={micOn}
  id="local-user"
  allowFullScreen
  playAudio={false}
  cameraOn={camOn}
  className="tele-view__call-view__video"
  videoTrack={camTrack?.localCameraTrack}
  audioTrack={micTrack?.localMicrophoneTrack}
  cover="/images/users/user-dummy-img-dark.webp"
/>