How to disable the webrtc microphone using Javascript?

Question

Hello all Well I'm using Peer Js To create a WebRtc it's like a video call only I want to create a button that when the person clicks it, turn off the microphone, this code is in the script.js:

const PRE = "DELTA";
const SUF = "MEET";
var room_id;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var local_stream;

function createRoom(){
    console.log("Creating Room")
    let room = document.getElementById("room-input").value;
    if(room == " " || room == "")   {
        alert("Please enter room number")
        return;
    }
    room_id = PRE+room+SUF;
    let peer = new Peer(room_id)
    peer.on('open', (id)=>{
        console.log("Peer Connected with ID: ", id)
        hideModal()
        getUserMedia({video: true, audio: true}, (stream)=>{
            local_stream = stream;
            setLocalStream(local_stream)
        },(err)=>{
            console.log(err)
        })
        notify("Waiting for peer to join.")
    })
    peer.on('call',(call)=>{
        call.answer(local_stream);
        call.on('stream',(stream)=>{
            setRemoteStream(stream)
        })
    })
}

function setLocalStream(stream){
    let video = document.getElementById("local-video");
    video.srcObject = stream;
    video.muted = true;
    video.play();
}
function setRemoteStream(stream){
   
    let video = document.getElementById("remote-video");
    video.srcObject = stream;
    video.play();
}

function hideModal(){
    document.getElementById("entry-modal").hidden = true
}

function notify(msg){
    let notification = document.getElementById("notification")
    notification.innerHTML = msg
    notification.hidden = false
    setTimeout(()=>{
        notification.hidden = true;
    }, 3000)
}

function joinRoom(){
    console.log("Joining Room")
    let room = document.getElementById("room-input").value;
    if(room == " " || room == "")   {
        alert("Please enter room number")
        return;
    }
    room_id = PRE+room+SUF;
    hideModal()
    let peer = new Peer()
    peer.on('open', (id)=>{
        console.log("Connected with Id: "+id)
        getUserMedia({video: true, audio: true}, (stream)=>{
            local_stream = stream;
            setLocalStream(local_stream)
            notify("Joining peer")
            let call = peer.call(room_id, stream)
            call.on('stream', (stream)=>{
                setRemoteStream(stream);
            })
        }, (err)=>{
            console.log(err)
        })

    })
}

and this is the Html code:

<div class="entry-modal" id="entry-modal">
        <p>Create or Join Meeting</p>
        <input id="room-input" class="room-input" placeholder="Enter Room ID">
        <div style="display:inline-block;"><br>
            <button onclick="createRoom()" class="create_room">Create room</button><br><br>
            <button onclick="joinRoom()" class="join_room">Join Room</button><br>
        </div>
</div>
<br><br><br>
<div class="meet-area">
    <!-- Remote Video Element-->
    <video id="remote-video"></video>

    <!-- Local Video Element-->
    <video id="local-video"></video>
</div>

so I created this button:

<button onclick="off()">Off Microphone</button>

so how do i make a script capable of disabling the microphone?

Answer 1

I've not tested this but you might be able to mute the audio like this

const off=function(){//toggle state
    local_stream.getAudioTracks()[0].enabled = !local_stream.getAudioTracks()[0].enabled;
};

or

const off=function(){
    local_stream.getAudioTracks()[0].enabled = false;
};
const on=function(){
    local_stream.getAudioTracks()[0].enabled = true;
};