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.
This is my code:
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
let currentCall = null;
let remoteAudioStream = 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) {
remoteAudioStream = remoteStream;
var audioElement = new Audio();
audioElement.srcObject = remoteStream;
audioElement.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) {
remoteAudioStream = remoteStream;
var audioElement = new Audio();
audioElement.srcObject = remoteStream;
audioElement.play();
document.getElementById('endCallButton').style.display = 'flex';
callingToast.hide();
});
document.getElementById('rejectCallButton').onclick = function() {
callingToast.hide();
call.close();
};
call.on('close', function(remoteStream) {
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 headphoneButton = document.getElementById('headphoneButton');
var volumeSlider = document.getElementById('volumeSlider');
var isMuted = false;
muteButton.addEventListener('click', function() {
const icon = muteButton.querySelector('i');
if (remoteAudioStream) {
remoteAudioStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
if (isMuted) {
isMuted = true;
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 {
isMuted = false;
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.');
}
As you can see, I’m using the getAudioTracks() function to mute the user, but I’m still not successful, what exactly am I doing wrong?
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?