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
1let audioTrack;23await navigator.mediaDevices4 .getUserMedia({ audio: true })5 .then((audioStream) => {6 let track = audioStream.getAudioTracks();7 if(track.length){8 audioTrack = track[0];9 }10 let finalTrack = new MediaStream();11 // audioStream.active = false;12 window.RecordRTC.getTracks(audioStream, "audio").forEach((track) => {13 finalTrack.addTrack(track);14 });1516 let response = recorder = window.RecordRTC(finalTrack, {17 type: "video",18 mimeType: "video/webm",19 });2021 }).catch((error) => {22 console.log(error);23 });
create audioTrack as a global veriable and store audioStream.getAudioTracks()
response and use like below example.
1const handleVoice = () => {2 if(muteAudio){3 audioTrack.enabled = false;4 setMuteAudio(false);5 }else{6 audioTrack.enabled = true;7 setMuteAudio(true);8 }9}
Thanks For Reading…
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.