WebRTC不同媒体约束下用户A与B的连接建立问题

核心问题是双方 PeerConnection 的媒体收发器（Transceiver）类型不匹配：用户A的Offer只有音频轨道，而用户B如果硬编码Answer的媒体约束为音视频，会导致Answer里多出视频轨道，超出Offer的范围，最终连接失败。以下两种方案可以解决：

方案一：自动适配对方媒体类型（推荐） #

不需要手动控制收发器，让 WebRTC 自动根据对方的 Offer 生成匹配的 Answer，后续再按需添加额外媒体轨道。

用户A（仅音频）代码示例： #

// 获取本地音频流
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
// 将音频轨道添加到PeerConnection
localStream.getAudioTracks().forEach(track => pc.addTrack(track, localStream));
// 创建并发送Offer
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
sendSignalingMessage(offer); // 自定义信令发送函数

用户B（音视频）代码示例： #

// 收到Offer后先设置远程描述
await pc.setRemoteDescription(offer);
// 直接调用createAnswer，WebRTC会自动匹配Offer中的媒体类型（仅音频）生成Answer
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
sendSignalingMessage(answer);

// 如果需要给A发送视频，在Answer发送后再添加视频轨道（触发重新协商）
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
videoStream.getVideoTracks().forEach(track => pc.addTrack(track, videoStream));
// PeerConnection会自动触发negotiationneeded事件，重新生成带视频的Offer/Answer

方案二：手动用addTransceiver控制媒体类型 #

提前明确添加需要的媒体收发器，确保Offer和Answer的媒体类型一致，适合需要精确控制媒体能力的场景。

用户A代码示例： #

// 创建PeerConnection后，手动添加音频收发器
pc.addTransceiver('audio', { direction: 'sendrecv' });
// 获取并关联本地音频流
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
localStream.getAudioTracks().forEach(track => pc.addTrack(track, localStream));
// 创建并发送Offer
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
sendSignalingMessage(offer);

用户B代码示例： #

// 创建PeerConnection后，添加音频+视频收发器
pc.addTransceiver('audio', { direction: 'sendrecv' });
pc.addTransceiver('video', { direction: 'sendrecv' });
// 处理Offer并发送Answer
await pc.setRemoteDescription(offer);
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);
sendSignalingMessage(answer);
// 获取并关联本地音视频流
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

关键注意点 #

• 不要在createAnswer时硬编码媒体约束（比如强制写{video: true, audio: true}），WebRTC会自动根据远程Offer的媒体类型生成兼容的Answer。
• 如果需要后续添加新的媒体轨道（比如用户B后来要发视频），直接调用addTrack即可，PeerConnection会触发协商事件自动更新连接。

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