带有标签音频的 webRTC 录制标签屏幕无法正常工作答案

【问题标题】：webRTC recording tab screen with tab audio not wroking带有标签音频的 webRTC 录制标签屏幕无法正常工作
【发布时间】：2023-01-02 15:47:44
【问题描述】：

我使用 webRTC、node js 和 react 构建了一个功能齐全的视频会议应用程序，最多可支持 4 个用户并使用网状架构。后来想加一个录制会议的功能，就加了。但是，它只从我的麦克风录制我自己的音频，而远程流音频未录制在媒体记录器中。这是为什么？

这是一个简单的代码 sn-p，它显示了我如何获得我的标签屏幕流

const toBeRecordedStream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      width: 1920,
      height: 1080,

      frameRate: {
        max:30,
        ideal: 24,
      },
    },
    audio: true,
  });

收到标签流后，我使用音频上下文将标签音频与我的麦克风音频结合起来并录制。

 const vp9Codec = "video/webm;codecs=vp9,opus";
 const vp9Options = {
    mimeType: vp9Codec,
 };
 const audioCtx = new AudioContext();
 const outputStream = new MediaStream();
 const micStream = audioCtx.createMediaStreamSource(localStream);
 const screenAudio = audioCtx.createMediaStreamSource(screenStream);
 const destination = audioCtx.createMediaStreamDestination();
 screenAudio.connect(destination);
 micStream.connect(destination);
 outputStream.addTrack(screenStream.getVideoTracks()[0]);
 outputStream.addTrack(destination.stream.getAudioTracks()[0]);
 if (MediaRecorder.isTypeSupported(vp9Codec)) {
  mediaRecorder = new MediaRecorder(outputStream, vp9Options);
} else {
  mediaRecorder = new MediaRecorder(outputStream);
}
mediaRecorder.ondataavailable = handelDataAvailable;
mediaRecorder.start();

屏幕上可以看到四个视频和音频流，但只记录了我的声音和选项卡的视频

我正在使用 Chrome 浏览器，因为我知道 Firefox 不支持标签音频，但 Chrome 和 Edge 支持。

【问题讨论】：

标签： javascript reactjs webrtc media web-audio-api

【解决方案1】：

你能解决这个问题吗请告诉我，

谢谢

【讨论】：

Mirza Hasnat，请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果您有不同但相关的问题，请ask它（如果它有助于提供上下文，请参考此问题）。如果你对这个具体问题感兴趣，你可以upvote它，留下comment，或者一旦你有足够的reputation就开始bounty。