使用屏幕共享后麦克风开/关按钮不起作用

Question

我正在使用 WebRTC 构建一个视频会议 Web 应用程序，我已经实现了切换摄像头、麦克风和屏幕共享的功能。相机和屏幕共享功能按预期工作，但我的麦克风按钮有问题。

问题是使用屏幕共享然后停止后，麦克风开/关按钮无法正常工作。我在控制台中收到错误消息

“无法读取未定义的属性（读取‘已启用’）”。

在使用屏幕共享之前，麦克风按钮可以正常工作。

这是我当前处理按钮的代码：

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

如果我看对了，那么

audioTrack

或

videoTrack

在发生这种情况时是未定义的。

尝试

console.log()

localStream.getAudioTracks()

或

screenStream.getVideoTracks()

返回的数组

你可以从那里开始工作。

它似乎在共享您应该使用的屏幕时使用音频

addTrack

看看这里：

是否可以使用 WebRTC 进行屏幕共享广播音频