跨浏览器屏幕及系统音频录制方案咨询（JavaScript）

你的核心问题是systemAudio参数仅在Chrome/Edge等Chromium系浏览器中支持，Firefox等其他浏览器不识别该参数，导致无法捕获系统音频。以下是修正后的兼容实现方案：

第一步：修正原代码的参数错误 #

原代码中布尔值参数用了字符串'True'，属于语法错误，需改为布尔值true，否则浏览器会忽略这些参数配置。

第二步：兼容多浏览器的实现代码 #

async function recordScreen() {
    let mediaStream;
    // 优先尝试Chromium系浏览器的系统音频捕获方案
    try {
        mediaStream = await navigator.mediaDevices.getDisplayMedia({
            preferCurrentTab: true,
            systemAudio: "include",
            audio: true,
            video: { mediaSource: "tab" }
        });
    } catch (err) {
        // 捕获失败时，降级为通用适配方案
        console.warn("系统音频参数不支持，切换到通用录制模式:", err);
        mediaStream = await navigator.mediaDevices.getDisplayMedia({
            audio: true,
            video: { mediaSource: "tab" }
        });
        // 针对Firefox给出明确操作提示
        if (/firefox/i.test(navigator.userAgent)) {
            alert("请选择带有音频的窗口或标签页，以完成系统音频捕获");
        }
    }
    return mediaStream;
}

关键说明 #

• Chromium系浏览器（Chrome/Edge）：通过systemAudio: "include"直接捕获当前标签页或目标窗口的系统音频，无需额外操作。
• Firefox：不支持systemAudio参数，但开启audio: true后，只要用户选择带有音频的窗口/标签页，就能同时捕获屏幕视频和对应窗口的音频。
• 权限要求：所有浏览器都需要用户手动授权屏幕录制权限，部分浏览器会单独请求音频捕获权限。

扩展：完整录制流程（可选） #

如果需要完成从捕获到本地保存的完整流程，可以结合MediaRecorder实现：

async function startFullRecording() {
    const stream = await recordScreen();
    const mediaRecorder = new MediaRecorder(stream);
    const chunks = [];

    mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
    mediaRecorder.onstop = () => {
        const blob = new Blob(chunks, { type: 'video/webm' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'screen-recording.webm';
        a.click();
        URL.revokeObjectURL(url);
        // 停止所有媒体轨道，释放资源
        stream.getTracks().forEach(track => track.stop());
    };

    mediaRecorder.start();
    // 示例：录制10秒后自动停止，可根据需求修改逻辑
    setTimeout(() => mediaRecorder.stop(), 10000);
}

内容的提问来源于stack exchange，提问作者Mohit Gupta