使用RecordRTC录屏问题：无法捕获屏幕视频声音及录屏+麦克风需求

阿华AIGC实验室

2026-5-26

解决屏幕录制无法捕获系统音频的问题

看起来你遇到的核心问题是屏幕录制时无法捕获系统播放的音频（比如视频声音），这是因为默认的屏幕捕获请求没有包含系统音频权限，而且如果需要同时录制麦克风音频，还得把系统音频流和麦克风音频流合并后再进行录制。

问题根源

当调用navigator.mediaDevices.getDisplayMedia()时，如果只请求视频或者没有明确指定系统音频，浏览器只会捕获屏幕画面，不会包含系统播放的声音。另外，若要同时保留麦克风输入，必须将两个音频流合并成一个混合流，才能同时录制两种声音。

解决方案步骤

明确在屏幕捕获请求中加入系统音频权限
获取麦克风音频流，将其与屏幕流的音视频轨道合并
使用合并后的混合流进行录制

修改后的代码示例

<!DOCTYPE html>
<html>
<head>
    <title>Screen recording using RecordRTC</title>
    <style>
        html, body{ margin: 0!important; padding: 0!important; width: 100%; height: 100%; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/recordrtc@5.6.2/dist/RecordRTC.min.js"></script>
</head>
<body>
    <video controls autoplay height="600" width="800" style="float: left; margin-top: 20px"></video>
    <button onclick="startRecording()">开始录制</button>
    <button onclick="stopRecording()">停止录制</button>

    <script>
        let recorder;
        let mixedStream;

        async function startRecording() {
            try {
                // 请求屏幕捕获，同时获取系统音频
                const screenStream = await navigator.mediaDevices.getDisplayMedia({
                    video: true,
                    audio: true // 关键：启用系统音频捕获
                });

                // 请求麦克风音频流
                const micStream = await navigator.mediaDevices.getUserMedia({
                    audio: true,
                    video: false
                });

                // 合并屏幕视频、系统音频、麦克风音频到同一个流
                mixedStream = new MediaStream([
                    ...screenStream.getVideoTracks(),
                    ...screenStream.getAudioTracks(),
                    ...micStream.getAudioTracks()
                ]);

                // 初始化RecordRTC进行录制
                recorder = RecordRTC(mixedStream, {
                    type: 'video'
                });

                recorder.startRecording();
                console.log("录制已开始");
            } catch (err) {
                console.error("捕获媒体流失败:", err);
            }
        }

        function stopRecording() {
            if (recorder) {
                recorder.stopRecording(() => {
                    const blob = recorder.getBlob();
                    // 将录制结果展示到页面的video元素中
                    const videoElement = document.querySelector('video');
                    videoElement.src = URL.createObjectURL(blob);
                    
                    // 停止所有媒体轨道，释放资源
                    mixedStream.getTracks().forEach(track => track.stop());
                    console.log("录制已停止");
                });
            }
        }
    </script>
</body>
</html>