使用耳机和系统音频进行屏幕录制

Question

我正在尝试构建一个 web 应用程序，它具有屏幕录制功能，在保存的视频中捕获系统音频 + 耳机麦克风音频。

我一直在谷歌上彻底搜索解决方案，但是我的发现显示了多个浏览器解决方案，只要耳机 NOT 连接，上述方法就可以工作，这意味着麦克风输入是来自系统而不是耳机。

在您连接耳机的情况下，所有这些解决方案都捕获没有视频音频的屏幕，以及来自我的耳机的麦克风音频。因此，为了重新澄清这一点，它应该在录制时从正在播放的视频中录制视频音频，以及耳机麦克风音频。

这在本机应用程序中完全可用，但是我正在寻找一种在 浏览器 上执行此操作的方法。

如果目前没有任何人知道的解决方案，那么对围绕开发它的局限性的一些见解也会很有帮助，谢谢。

Answer 1

您的浏览器管理在所选 tab/window

中接收的媒体输入

要接收媒体输入，您需要确保选中下图中的复选框 Share Audio已选中。然而，这只会记录耳机中播放的媒体音频，当涉及到接收麦克风音频时，必须做相反的事情，即复选框应该是未选中，或者单独合并麦克风音频关于保存录制的视频

https://slack-files.com/T1JA07M6W-F0297CM7F32-89e7407216

Answer 2

创建两个 const，一个检索屏幕视频，另一个检索音频媒体：

const DISPLAY_STREAM = await navigator.mediaDevices.getDisplayMedia({video: {cursor: "motion"}, audio: {'echoCancellation': true}}); // retrieving screen-media
        
const VOICE_STREAM = await navigator.mediaDevices.getUserMedia({ audio: {'echoCancellation': true}, video: false }); // retrieving microphone-media

使用 AudioContext 分别从 getUserMedia() 和 getDisplayMedia() 检索音频源：

const AUDIO_CONTEXT = new AudioContext();

const MEDIA_AUDIO = AUDIO_CONTEXT.createMediaStreamSource(DISPLAY_STREAM); // passing source of on-screen audio
            
const MIC_AUDIO = AUDIO_CONTEXT.createMediaStreamSource(VOICE_STREAM); // passing source of microphone audio

使用下面的方法创建一个新的音频源，它将用作音频的合并或合并版本，然后将音频传递到合并中：

const AUDIO_MERGER = AUDIO_CONTEXT.createMediaStreamDestination(); // audio merger

MEDIA_AUDIO.connect(AUDIO_MERGER); // passing media-audio to merger
MIC_AUDIO.connect(AUDIO_MERGER); // passing  microphone-audio to merger

最后，将合并后的音视频拼接成一个数组，形成一个音轨，传给MediaStreamer：

const TRACKS = [...DISPLAY_STREAM.getVideoTracks(), ...AUDIO_MERGER.stream.getTracks()] // connecting on-screen video with merged-audio
stream = new MediaStream(TRACKS);

使用耳机和系统音频进行屏幕录制

Screen Recording with both headphone & system audio

audio

web-applications

screen-recording