In Agora GroupVoice call mouse click event not working after user joining as host or audience - agora.io

Question

I am trying to build voice chat using creatstream and mode live in nextjs project. But experiencing some unsual behaviour. After the call started if there is more than one host or someone leave and join , loosing the mouse click event on the screen. Which means cannot host/audience can’t mute/unmute or leave the call. But can do the same with the keyboard controls. Could someone please explain, what is that i am missing. I am attaching the code of agora for host. It will be great if someone can help me to understand the problem. We are also generating RTCtoken. Thanks in advance!
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>
);
}
export default withApollo(AgoraVoiceCall);

Answer 1

From your explanation it sounds like a UI problem, I'd just logging out the click event to see if it's a problem with the UI.