recordRTC 录制屏幕和麦克风

Question

我正在开发一个项目，我需要使用

RecordRTC

来录制用户屏幕的声音。

这里

RecordRTC

录制屏幕所需的代码是：

stream = await navigator.mediaDevices.getDisplayMedia({
    audio: true,
    video: {
        mediaSource: "screen", // whole screen sharing
    }

})
recorder = new RecordRTC.RecordRTCPromisesHandler(stream, {
    mimeType: 'video/webm', 
});

recorder.startRecording();

并且，录制麦克风所需的代码是：

stream = await navigator.mediaDevices.getUserMedia({
   audio: true
})

recorder = new RecordRTC.RecordRTCPromisesHandler(stream, {
    mimeType: 'video/webm', 
});

recorder.startRecording();

如何获取带有麦克风音频的媒体和录制的屏幕视频？

链接到 github 存储库：RecordRTC

Answer 1

您应该将音轨添加到屏幕录制流中，以在屏幕录制中添加音频。这是我创建的一个辅助方法，用于在我的网络上进行录制。希望这有帮助：

const getScreenStream = async (withAudio = true) => {
        const constraints = {
            video: {
                logicalSurface: true,
                cursor: "motion",
                width: { ideal: 1920, max: 1920 },
                height: { ideal: 1080, max: 1080 },
            },
            audio: withAudio,
        };

        try {
            const screenStream = await navigator.mediaDevices.getDisplayMedia(constraints);
            if (withAudio) {
                const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
                screenStream.addTrack(audioStream.getAudioTracks()[0]);
            }
            return screenStream;
        } catch (error) {
            console.error("Error accessing screen media devices:", error);
            throw error;
        }
    };

然后开始录制使用

const stream = await getScreenStream(withAudio);
const recorder = RecordRTC(stream, { type: "video" });
recorder.stream = stream;
recorder.startRecording();