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

Posted 2023-03-14

【中文标题】在用户作为主持人或观众加入后，在 Agora GroupVoice 中调用鼠标单击事件不起作用

【英文标题】：In Agora GroupVoice call mouse click event not working after user joining as host or audience

【发布时间】：2021-06-25 07:50:17

【问题描述】：

我正在尝试在 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',
                border: '3px solid black',
              
              id="remote_stream"
            >
              <Avatar src=user.avatarUrl ?? '/avatar_placeholder.svg' />
            </div>
            <div
              style=
                height: '20vh',
                backgroundColor: 'orange',
                border: '3px solid black',
              
            >
              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);

【问题讨论】：

您使用的是什么版本的 SDK？

【参考方案1】：

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