I’m trying to get the user to mute their microphone so that the other user on the call can’t hear them, but I’ve failed in every attempt.

I just wish the caller or callee could mute themselves so that one can’t hear the other.

By the way, the user can establish a connection, I can hear and be heard, I can end the call, etc., the only problem is the mute/unmute, besides, am I using good practices in this code?

This is my code:

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
        let currentCall = null;
        let remoteAudioElement = null;
        var localStream = stream;

        // Atender a chamada e fornecer a MediaStream
        peer.on('call', function(call) {
            currentCall = call;
            
            incommingCallToast.show();
            document.getElementById('callerUsername').innerText = call.metadata.callerUsername;

            document.getElementById('acceptCallButton').onclick = function() {
                incommingCallToast.hide();
                call.answer(localStream);  // Use apenas localStream aqui
                call.on('stream', function(remoteStream) {
                    remoteAudioElement = new Audio();
                    remoteAudioElement.srcObject = remoteStream;
                    remoteAudioElement.play();
                    document.getElementById('endCallButton').style.display = 'flex';
                });

                call.on('close', function() {
                    incommingCallToast.hide();
                    showErrorToast('Chamada encerrada.');
                    document.getElementById('endCallButton').style.display = 'none';
                });
            };

            document.getElementById('rejectCallButton').onclick = function() {
                incommingCallToast.hide();
                call.close();
            };
        });

        // Realizar a chamada ao clicar no botão
        document.getElementById('audioCallButton').addEventListener('click', function() {
            $.ajax({
                url: `/friends/${currentFriendId}`,
                method: 'GET',
                success: function (data) {
                    if (data.friend) {
                        const friend = data.friend;

                        if(!friend.online)
                            return showErrorToast("O seu amigo está offline, portanto não pode receber chamadas.");

                        document.getElementById('calleeUsername').innerText = friend.username;
                        callingToast.show();

                        console.log('Calling peer ID: ' + friend.peerid);

                        var call = peer.call(friend.peerid, localStream, {
                            metadata: { callerUsername: currentUsername }
                        });

                        currentCall = call;

                        call.on('stream', function(remoteStream) {
                            remoteAudioElement = new Audio();
                            remoteAudioElement.srcObject = remoteStream;
                            remoteAudioElement.play();
                            document.getElementById('endCallButton').style.display = 'flex';
                            callingToast.hide();
                        });

                        document.getElementById('rejectCallButton').onclick = function() {
                            callingToast.hide();
                            call.close();
                        };

                        call.on('close', function() {
                            callingToast.hide();
                            showErrorToast('Chamada encerrada.');
                            document.getElementById('endCallButton').style.display = 'none';
                        });

                    } else {
                        showErrorToast('Dados do amigo não encontrado.');
                    }
                },
                error: function (jqXHR) {
                    const errorMessage = jqXHR.responseJSON ? jqXHR.responseJSON.error : 'Dados do amigo não encontrados.';
                    showErrorToast(errorMessage);
                }
            });
        });

        document.getElementById('endCallButton').onclick = function() {
            callingToast.hide();

            if (currentCall) {
                currentCall.close();
                currentCall = null;
                document.getElementById('endCallButton').style.display = 'none';
                showErrorToast('Chamada encerrada.');
            } else {
                document.getElementById('endCallButton').style.display = 'none';
                showErrorToast('Nenhuma chamada ativa para encerrar.');
            }
        };

        // Controlar volume e mute
        var muteButton = document.getElementById('muteButton');
        var isMuted = false;

        muteButton.addEventListener('click', function() {
            const icon = muteButton.querySelector('i');
            if (remoteAudioElement) {
                isMuted = !isMuted;
                remoteAudioElement.muted = isMuted;

                if (isMuted) {
                    icon.classList.remove('fa-microphone');
                    icon.classList.add('fa-microphone-slash');
                    icon.style.color = '#FF6347'; // Define a cor para '#FF6347' quando o microfone está mutado
                } else {
                    icon.classList.remove('fa-microphone-slash');
                    icon.classList.add('fa-microphone');
                    icon.style.color = 'white'; // Define a cor para 'white' quando o microfone está desmutado
                }
            }
        });
    }).catch(function(err) {
        showErrorToast('Failed to get local stream', err);
    });
} else {
    showErrorToast('Seu navegador não suporta a API getUserMedia.');
}