带有耳机和系统音频的屏幕录制

如何解决带有耳机和系统音频的屏幕录制

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

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

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

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

如果目前没有任何人知道的解决方案，那么了解有关开发此功能的局限性的一些见解也会很有帮助，谢谢。

解决方法

您的浏览器管理在所选标签/窗口中接收的媒体输入

要接收媒体输入，您需要确保已选中下图中的复选框 Share Audio。但是，这只会记录您耳机中正在播放的媒体音频，在接收麦克风音频时，必须执行相反的操作，即该复选框应取消选中，或者在保存时单独合并麦克风音频录制的视频

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

创建两个 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);