Mute and Unmute functionality in mediastream react

Hello Friends 👋,

Welcome To Infinitbility! ❤️

in this article, we are use RecordRTC and MediaStream to record audio.

This article provide example to add mute and unmute functionality in your react web rtc application.

Let’s start today topic how to add mute and unmute functionality in mediastream react


let audioTrack;

await navigator.mediaDevices
    .getUserMedia({ audio: true })
    .then((audioStream) => {
    let track =  audioStream.getAudioTracks();
    if(track.length){
        audioTrack = track[0];
    }
    let finalTrack = new MediaStream();
    // audioStream.active = false;
    window.RecordRTC.getTracks(audioStream, "audio").forEach((track) => {
        finalTrack.addTrack(track);
    });

    let response =  recorder = window.RecordRTC(finalTrack, {
        type: "video",
        mimeType: "video/webm",
    });

    }).catch((error) => {
        console.log(error);
    });

create audioTrack as a global veriable and store audioStream.getAudioTracks() response and use like below example.

const handleVoice = () => {
    if(muteAudio){
      audioTrack.enabled = false;
      setMuteAudio(false);
    }else{
      audioTrack.enabled = true;
      setMuteAudio(true);
    }
}

Thanks For Reading…