WebRTC: Sound not muting - can anyone see an error? - audio

Question

I have inserted a mute button into my WebRTC Video chat page but I cannot get it to work. If I click it in the browser I get a console message that the sound has been muted but there is still sound.
The Constraints variables:
var constraints = {
video: true,
audio: true,
};
If I change audio to false here there will be no sound.
Code on Mute Button:
function muteVideoBtnClick() {
if(constraints.audio == true) {
constraints.audio = false;
console.log('Audio: ' + constraints.audio);
} else {
constraints.audio = true;
console.log('Audio: ' + constraints.audio);
}
}
The Only other place where the constraints variables are used:
function pageReady() {
uuid = uuid(); //CB Universal Unique Identifier
//CB Create the variables for local and remote video
localVideo = document.getElementById('localVideo');
remoteVideo = document.getElementById('remoteVideo');
//CB Create the connection using websocket (443 as it is a secure connection)
serverConnection = new WebSocket('wss://' + window.location.hostname + ':443');
serverConnection.onmessage = gotMessageFromServer;
// CB Checks thats getUserMedia works and then runs getUserMedia if it works and displays an error
//if it doesnt work
if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
} else {
alert('Your browser does not support getUserMedia API');
}
}
I would be very grateful if anyone has any suggestions.
Kind regards,
Claire
The Full code:
var localVideo;
var remoteVideo;
var peerConnection;
var uuid;
var rooms = [];//CB 31/07
var constraints = {
video: true,
audio: true,
};
var peerConnectionConfig = {
'iceServers': [
{'urls': 'stun:stun.services.mozilla.com'},
{'urls': 'stun:stun.l.google.com:19302'},
]
};
function pageReady() {
uuid = uuid(); //CB Universal Unique Identifier
//CB Create the variables for local and remote video
localVideo = document.getElementById('localVideo');
remoteVideo = document.getElementById('remoteVideo');
//CB Create the connection using websocket (443 as it is a secure connection)
serverConnection = new WebSocket('wss://' + window.location.hostname + ':443');
serverConnection.onmessage = gotMessageFromServer;
// CB Checks thats getUserMedia works and then runs getUserMedia if it works and displays an error
//if it doesnt work
if(navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
} else {
alert('Your browser does not support getUserMedia API');
}
}
//CB if it is possible to run gerUserMedia then gets the local video stream
function getUserMediaSuccess(stream) {
localStream = stream;
localVideo.src = window.URL.createObjectURL(stream); //Depreciated!!!!!
//localVideo.srcObject = stream;
}
//CB this function starts the call
function start(isCaller) {
peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate;
peerConnection.onaddstream = gotRemoteStream;
//peerConnection.ontrack = gotRemoteStream;
peerConnection.addStream(localStream);
if(isCaller) {
peerConnection.createOffer().then(createdDescription).catch(errorHandler);
}
}
//Added by CB for Pause Button 20/07
function pauseVideoBtnClick() {
var btn = document.getElementById("pause_video_btn");
if (isVideoPaused()) {
pauseVideo(false);
btn.innerHTML = "Pause Video";
} else {
pauseVideo(true);
btn.innerHTML = "Resume Video";
}
}
//Added by CB for Pause Button 20/07
function isVideoPaused() {
return !(localStream.getVideoTracks()[0].enabled);
}
//Added by CB for Pause Button 20/07
function pauseVideo (pause) {
localStream.getVideoTracks()[0].enabled = !pause;
};
//Added by CB for mute button 29/07 - DOESNT WORK YET
function muteVideoBtnClick() {
if(constraints.audio == true) {
constraints.audio = false;
console.log('Audio: ' + constraints.audio);
} else {
constraints.audio = true;
console.log('Audio: ' + constraints.audio);
}
}
//End of added code
function gotMessageFromServer(message) {
if(!peerConnection) start(false);
var signal = JSON.parse(message.data);
// Ignore messages from ourself
if(signal.uuid == uuid) return;
if(signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers
if(signal.sdp.type == 'offer') {
peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
}
}).catch(errorHandler);
} else if(signal.ice) {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
}
}
function gotIceCandidate(event) {
if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
}
}
function createdDescription(description) {
console.log('got description');
peerConnection.setLocalDescription(description).then(function() {
serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
}).catch(errorHandler);
}
function gotRemoteStream(event) {
console.log('got remote stream');
remoteVideo.src = window.URL.createObjectURL(event.stream);
//remoteVideo.src = event.stream;
}
function errorHandler(error) {
console.log(error);
}
// CB A UUID (Universal Unique Identifier) is a 128-bit number used to uniquely identify some object or entity on the Internet.
// Taken from http://stackoverflow.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function uuid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

Answer 1

You are changing the constraints to the getUserMedia call (after doing the call). You are not changing the resulting stream which is stored in the localStream variable. Try this:
localStream.getAudioTracks()[0].enabled = false;