网页端双向在线会议中如何捕获所有参会用户的音频流？

Got it, let's break down why you're only capturing local audio and how to fix it for remote meeting participants. The key here is understanding how audio flows in a WebRTC-based meeting app—your current code only grabs the local device stream via getUserMedia, but remote participants' audio comes through WebRTC's RTCPeerConnection.

Here's a step-by-step, practical solution:

1. Capture Remote Streams via RTCPeerConnection #

When you establish a WebRTC connection with a remote participant, their audio tracks are sent to your app through the RTCPeerConnection. You need to listen for the ontrack event to receive these incoming streams:

// Assume you've already created an RTCPeerConnection instance for each participant
peerConnection.ontrack = (event) => {
  // event.streams[0] contains the remote participant's audio (and video, if enabled)
  const remoteStream = event.streams[0];
  console.log("Received audio stream from remote participant", remoteStream);
  // We'll add this to our combined recording stream next
};

2. Merge Local + Remote Audio Streams #

To record all audio (your own plus all remote participants), you need to combine all audio tracks into a single MediaStream. Create a master stream and dynamically add/remove tracks as participants join or leave:

// Initialize a master stream to hold all audio tracks
const combinedAudioStream = new MediaStream();

// First, add your local audio track (from your existing getUserMedia setup)
navigator.mediaDevices.getUserMedia({ audio: true })
  .then((localStream) => {
    const localAudioTrack = localStream.getAudioTracks()[0];
    combinedAudioStream.addTrack(localAudioTrack);
    // Initialize the recorder with this combined stream
    initRecorder(combinedAudioStream);
  })
  .catch(onError);

// Add a remote participant's audio track to the combined stream
function addRemoteAudioTrack(remoteStream) {
  const remoteAudioTrack = remoteStream.getAudioTracks()[0];
  if (remoteAudioTrack) {
    combinedAudioStream.addTrack(remoteAudioTrack);
    console.log("Added remote audio to recording stream");
  }
}

// Remove a remote participant's audio track when they leave
function removeRemoteAudioTrack(remoteStream) {
  const remoteAudioTrack = remoteStream.getAudioTracks()[0];
  if (remoteAudioTrack) {
    combinedAudioStream.removeTrack(remoteAudioTrack);
    console.log("Removed remote audio from recording stream");
  }
}

3. Update MediaRecorder to Use the Combined Stream #

Replace your existing recorder setup to use the merged stream instead of just the local one:

let recorder;

const onError = (err) => { 
  console.log('The following error occurred: ' + err); 
};

function initRecorder(stream) {
  const options = { 
    audioBitsPerSecond: 64000, 
    mimeType: 'audio/webm;codecs=opus' 
  };
  recorder = new MediaRecorder(stream, options);
  
  recorder.ondataavailable = (e) => { 
    console.log("Recording data chunk available", e.data);
    // Here you can handle the chunk (save to server, trigger a download, etc.)
  };
  
  recorder.start(1000); // Capture a chunk every 1 second
}

4. Handle Dynamic Participant Changes #

Make sure to link the stream management functions to your meeting's join/leave logic:

// In your peer connection's ontrack handler (when a participant joins)
peerConnection.ontrack = (event) => {
  const remoteStream = event.streams[0];
  addRemoteAudioTrack(remoteStream);
  
  // Optional: Listen for when a participant stops sharing audio
  remoteStream.onremovetrack = () => {
    removeRemoteAudioTrack(remoteStream);
  };
};

// Call this when a participant disconnects (adjust based on your app's event system)
function handleParticipantLeave(remoteStream) {
  removeRemoteAudioTrack(remoteStream);
}

Key Tips #

• Browser Compatibility: MediaStream.addTrack()/removeTrack() and audio/webm;codecs=opus are widely supported, but test for fallback MIME types like audio/mp4 if you need broader coverage.
• Automatic Mixing: Browsers handle mixing multiple audio tracks in a single MediaStream natively—you don't need to write custom mixing code.
• Performance: Always remove tracks promptly when participants leave to avoid unnecessary memory usage.

内容的提问来源于stack exchange，提问作者user8884641