Firefox浏览器中如何检测屏幕共享选中窗口已关闭？

在Firefox中使用getDisplayMedia捕获屏幕录制时，关闭选中的共享窗口不会触发MediaStreamTrack的ended、inactive等事件，这是Firefox特有的兼容性问题。以下是两种可行的解决方法：

方案1：轮询检查Track的readyState #

定时检测MediaStreamTrack的readyState属性，当它变为"ended"时执行停止录制逻辑：

screenRecordingStream.value = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

screenRecordingStream.value.getTracks().forEach((track) => {
    // 保留原有事件监听逻辑
    track.addEventListener('ended', handleTrackEnd);
    track.addEventListener('inactive', handleTrackInactive);

    // Firefox专属轮询检测
    const checkInterval = setInterval(() => {
        if (track.readyState === 'ended') {
            clearInterval(checkInterval);
            handleTrackEnd();
        }
    }, 1000); // 每秒检查一次，可按需调整间隔

    // 统一处理结束逻辑的辅助函数
    function handleTrackEnd() {
        if (isRecording.value) {
            completionStatus.value = true;
            stopMediaRecorder();
        }
    }

    function handleTrackInactive() {
        if (isRecording.value) {
            completionStatus.value = true;
            stopMediaRecorder();
        } else {
            changeMode(1);
        }
    }

    // 保留其他事件监听
    track.addEventListener('mute', () => console.log('Track muted'));
    track.addEventListener('unmute', () => console.log('Track unmuted'));
    track.addEventListener('overconstrained', () => console.log('Track overconstrained'));
    track.addEventListener('readyStateChange', () => console.log('Track ready state changed'));
});

方案2：监听MediaStream的removetrack事件 #

Firefox在共享窗口关闭时会将对应track从MediaStream中移除，可通过监听removetrack事件捕获该场景：

screenRecordingStream.value = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

// 监听流的track移除事件
screenRecordingStream.value.addEventListener('removetrack', (event) => {
    const track = event.track;
    // 仅针对屏幕共享的音视频track处理
    if (track.kind === 'video' || track.kind === 'audio') {
        if (isRecording.value) {
            completionStatus.value = true;
            stopMediaRecorder();
        } else {
            changeMode(1);
        }
    }
});

// 保留原有track事件监听
screenRecordingStream.value.getTracks().forEach((track) => {
    track.addEventListener('ended', () => {
        if (isRecording.value) {
            completionStatus.value = true;
            stopMediaRecorder();
        }
    });
    // ...其他事件监听逻辑
});

注意事项 #

• 轮询间隔建议设置在500-1000ms之间，平衡检测及时性和性能消耗。
• 使用轮询时，需在录制正常停止或track结束时清除定时器，避免内存泄漏。
• removetrack事件可能在其他场景触发，需通过track.kind判断确保逻辑准确性。

内容的提问来源于stack exchange，提问作者Bimal Kafle