在用户作为主持人或观众加入后，Agora GroupVoice 呼叫鼠标点击事件不起作用

如何解决在用户作为主持人或观众加入后，Agora GroupVoice 呼叫鼠标点击事件不起作用

我正在尝试在 nextjs 项目中使用 creatstream 和 mode live 构建语音聊天。但遇到一些不寻常的行为。通话开始后，如果有多个主持人或有人离开并加入，在屏幕上失去鼠标点击事件。这意味着不能主持人/观众不能静音/取消静音或离开通话。但是可以对键盘控件执行相同的操作。有人可以解释一下，我错过了什么。我附上主机的agora代码。如果有人可以帮助我理解问题，那就太好了。我们也在生成 RTCtoken。提前致谢！

function AgoraVoiceCall({ channel,attendeeMode,appId,uid,user }) {
      console.log(attendeeMode);
      const [client,setClient] = useState(null);
      const [localStream,setLocalStream] = useState(null);

      //Mutation
      const [generateAgoraToken,{ data,loading }] = useMutation(
        GENERATE_SPACE_TOKEN
      );

      var options = {
        token: undefined,uid: Math.floor(Math.random() * Date.now() * 0.001).toString(),};

      const join = async () => {
        let clientInstance = Agora.createClient({ mode: 'live',codec: 'vp8' });
        clientInstance.setClientRole(attendeeMode);
        const token = await generateAgoraToken({
          variables: { channelName: channel,uid: options.uid,role: attendeeMode },});
        (options.token = token && token.data.generateAgoraToken),console.log('token',token.data.generateAgoraToken);
        clientInstance.init(appId,() => {
          clientInstance.join(options.token,channel,options.uid,uid => {
            let localStreamInstance = Agora.createStream({
              streamID: uid,audio: true,video: false,screen: false,});

            setLocalStream(localStreamInstance);
            localStreamInstance.init(() => {
              clientInstance.publish(localStreamInstance);
              const div = document
                .getElementById('local_stream')
                .insertAdjacentHTML(
                  'afterBegin',`<div id="player-wrapper-${options.uid}">
            <p class="player-name">LocalUser(${options.uid})</p>
          
            </div>`
                );
              localStreamInstance.play('local_stream');
            });

            clientInstance.on('stream-added',evt => {
              let remoteStream = evt.stream;
              const id = remoteStream.getId();
              const div = document
                .getElementById('remote_stream')
                .insertAdjacentHTML(
                  'afterBegin',`<div id="player-wrapper-${id}">
            <p class="player-name">RemoteUser(${id})</p>
            </div>`
                );
              console.log(div);
              clientInstance &&
                clientInstance.subscribe(remoteStream,function(err) {
                  console.log('Subscribe stream failed',err);
                });
            });

            clientInstance.on('stream-subscribed',evt => {
              let remoteStream = evt.stream;
              remoteStream.play('remote_stream');
            });
            clientInstance.on('stream-unpublished',evt => {
              console.log('peer-leave',evt.stream);
              let remoteStream = evt.stream;
              const id = remoteStream.getId();
              delete remoteUsers[id];
              const remoteUserContainer = document.getElementById(
                `player-wrapper-${id}`
              );
              remoteUserContainer.remove();
              console.log(remoteUsers);
              setRemoteUsersData(remoteUsers);
            });
          });
        });
        setClient(clientInstance);
      };

      const leaveCall = () => {
        // Destroy the local audio and track.
        client && client.unpublish(localStream);
        localStream && localStream.close();
        const id = localStream.getId();
        const localStreamContainer = document.getElementById(
          `player-wrapper-${id}`
        );
        localStreamContainer && localStreamContainer.remove();
        // Leave the channel.
        client &&
          client.leave(
            () => {
              console.log('Client succeed to leave.');
            },() => {
              console.log('Client failed to leave.');
            }
          );
        setLocalStream(null);
      };

      const handleMic = () => {
        const btn = document.getElementById('mic-btn');

        if (localStream.isAudioOn()) {
          localStream.muteAudio();
          btn.innerHTML = 'UNMUTE';
        } else {
          localStream.unmuteAudio();
          btn.innerHTML = 'MUTE';
        }

};

      return (
        <Wrapper>
          <div
            style={{
              display: 'flex',flexDirection: 'column',margin: '0 auto',height: '100vh',width: '60vw',backgroundColor: 'lightblue',}}
          >
            <h2>Welcome to Neospace Voice Call</h2>

            <div
              style={{
                height: '30vh',backgroundColor: 'pink',border: '3px solid black',}}
              id="local_stream"
            >
              <Avatar src={user.avatarUrl ?? '/avatar_placeholder.svg'} />
            </div>
            <div
              style={{
                height: '30vh',backgroundColor: 'yellow',}}
              id="remote_stream"
            >
              <Avatar src={user.avatarUrl ?? '/avatar_placeholder.svg'} />
            </div>
            <div
              style={{
                height: '20vh',backgroundColor: 'orange',}}
            >
              control
              <div
                style={{
                  margin: '5vh 0 0 30vh',}}
              >
                {/* All these button onclick with the mouse is not working  */}
                <button
                  onClick={join}
                  style={{ marginRight: '15px',fontSize: '20px' }}
                  disabled={localStream}
                >
                  JOIN CALL
                </button>

                <button
                  id="mic-btn"
                  onClick={e => {
                    handleMic(e);
                  }}
                  style={{ marginRight: '15px',fontSize: '20px' }}
                >
                  MUTE
                </button>
                <button onClick={leaveCall} style={{ fontSize: '20px' }}>
                  END CALL
                </button>
              </div>
            </div>
          </div>
        </Wrapper>
      );

} 导出默认 withApollo(AgoraVoiceCall);

解决方法

根据您的解释，这听起来像是 UI 问题，我只是注销了单击事件以查看是否是 UI 问题。