Microphone on/off button not working after using screen sharing

Question

I am building a video conferencing web application using WebRTC and I have implemented features for toggling the camera, microphone, and screen sharing. The camera and screen sharing features are working as expected, but I am having an issue with the microphone button.

The issue is that after using screen sharing and then stopping it, the microphone on/off button is not working properly. I am getting an error in the console saying

"Cannot read properties of undefined (reading 'enabled')".

Before using screen sharing, the microphone button works fine.

Here's my current code for handling the buttons:

let screenStream = null;
let localStream = null;
let audioTrack = null;
let pc = null;

// Toggle screen sharing on/off
document.getElementById("share-screen-btn").addEventListener("click", async () => {
    try {
        const localVideo = document.getElementById("localVideo");
        const displayMediaOptions = {
            video: true,
            audio: true,
        };
        if (!screenStream) {
            screenStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
            const videoTracks = screenStream.getVideoTracks();
            await pc.getSenders().find(sender => sender.track.kind === 'video').replaceTrack(videoTracks[0], videoTracks[0].clone());
            localVideo.srcObject = screenStream;
            document.getElementById("share-screen-btn").classList.remove("btn-danger");
            document.getElementById("share-screen-btn").classList.add("btn-primary");

            // Disable audio track from localStream
            if (localStream) {
                audioTrack = localStream.getAudioTracks()[0];
                audioTrack.enabled = false;
            }
        } else {
            const localVideoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            const sender = pc.getSenders().find(sender => sender.track.kind === 'video');
            const localVideoTrack = localVideoStream.getVideoTracks()[0];
            const localAudioTrack = localVideoStream.getAudioTracks()[0];
            const localStream = new MediaStream([localVideoTrack, localAudioTrack]);
            await sender.replaceTrack(localVideoTrack);
            localVideo.srcObject = localStream;
            document.getElementById("share-screen-btn").classList.remove("btn-primary");
            document.getElementById("share-screen-btn").classList.add("btn-danger");
            screenStream.getTracks().forEach(track => track.stop());
            screenStream = null;

            // Set audioTrack from localAudioTrack
            audioTrack = localAudioTrack;
        }
    } catch (e) {
        console.error("Error sharing screen: ", e);
    }
})

// Toggle microphone on/off
document.getElementById("mute-audio-btn").addEventListener("click", () => {
    let localStream = document.getElementById("localVideo").srcObject;
    if (localStream) {
        let audioTrack = localStream.getAudioTracks()[0];
        let enabled = audioTrack.enabled;
        if (enabled) {
            audioTrack.enabled = false;
            document.getElementById("mute-audio-btn").innerHTML = '<i class="fa-solid fa-microphone-slash"></i>'
        } else {
            audioTrack.enabled = true;
            document.getElementById("mute-audio-btn").innerHTML = '<i class="fa-solid fa-microphone"></i>'
        }
    }
})

// Toggle camera on/off
document.getElementById("mute-video-btn").addEventListener("click", () => {
    let localStream = document.getElementById("localVideo").srcObject;
    if (localStream) {
        let videoTrack = localStream.getVideoTracks()[0];
        let enabled = videoTrack.enabled;
        if (enabled) {
            videoTrack.enabled = false;
            document.getElementById("mute-video-btn").innerHTML = '<i class="fa fa-video-slash"></i>';
        } else {
            videoTrack.enabled = true;
            document.getElementById("mute-video-btn").innerHTML = '<i class="fa fa-video"></i>';
        }
    }
})

Answer 1

If I see it correctly then audioTrack or videoTrack is undefined at the time this happens.

Try and console.log() the arrays returned by localStream.getAudioTracks() or screenStream.getVideoTracks()

You may from there work your way up the chain.

And it seems to use audio while sharing the screen you are suppused to use addTrack have a look here:

Is it possible broadcast audio with screensharing with WebRTC

Answer 2

local stream microphone not working while share screen + system audio shared in HTML JS

Here is code HTML + JS ✅

 function startScreenShare() {
        if (screenSharing) {
            stopScreenSharing()
        }
        navigator.mediaDevices.getDisplayMedia(
            { video: { mediaSource: "screen" }, audio: true }
        ).then((stream) => {
            setScreenSharingStream(stream);
    
            screenStream = stream;
            let videoTrack = screenStream.getAudioTracks()[0];
            videoTrack.onended = () => {
                stopScreenSharing()
            }
            if (peer) {
                let sender = currentPeer.peerConnection.getSenders().find(function (s) {
                    return s.track.kind == videoTrack.kind;
                })
                sender.replaceTrack(videoTrack)
                screenSharing = true
            }
            console.log(screenStream)
        })
    }

We have tried to share screen audio. When sharing the screen, microphone and screen-sharing audio do not work together. Mic does not work when system audio is on. System audio does not working if end mic is on. please explain me what is the about issue.