WebRTC技术咨询：如何让用户无需创建应答或开摄像头观看我的直播？

首先明确：WebRTC的SDP协商必须经过Offer/Answer交换，这是连接建立的核心流程，无法省略。你提到的“无需创建应答”是误解——观众依然需要生成Answer，但不需要获取本地摄像头/麦克风流，这才是实现单向观看的关键。

核心实现逻辑 #

主播端（推流方）

• 调用navigator.mediaDevices.getUserMedia()获取本地音视频流，绑定到本地播放元素。
• 创建RTCPeerConnection实例，将本地流的所有Track添加到连接中（通过addTrack方法）。
• 生成Offer并设置为本地描述，通过信令服务器将Offer发送给所有加入房间的观众。
• 监听ICE候选事件，将候选信息通过信令发送给观众；同时接收观众的Answer和ICE候选，完成连接建立。

观众端（观看方）

• 跳过getUserMedia调用，直接创建RTCPeerConnection实例，不需要添加任何本地Track。
• 通过信令接收主播的Offer，设置为远程描述。
• 生成Answer并设置为本地描述，通过信令发送给主播（这一步是SDP协商必需的，只是Answer中不会包含任何本地媒体信息）。
• 监听track事件，当收到主播的媒体流时，将其绑定到远程播放元素进行观看。
• 监听ICE候选事件，接收主播的ICE候选并添加到连接中，同时发送自身的ICE候选给主播。

代码示例 #

主播端关键代码

// 获取本地音视频流
const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('local-player').srcObject = localStream;

// 创建PeerConnection（可根据需求配置STUN/TURN服务器）
const peerConn = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// 将本地流Track添加到PeerConnection
localStream.getTracks().forEach(track => {
  peerConn.addTrack(track, localStream);
});

// 生成Offer并发送
const offer = await peerConn.createOffer();
await peerConn.setLocalDescription(offer);
// 自定义信令发送函数，将Offer传给观众
sendToAllViewers({ type: 'offer', sdp: peerConn.localDescription });

// 处理ICE候选
peerConn.onicecandidate = (event) => {
  if (event.candidate) {
    sendToAllViewers({ type: 'ice-candidate', candidate: event.candidate });
  }
};

观众端关键代码

// 创建PeerConnection
const peerConn = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// 监听主播发送的媒体流
peerConn.ontrack = (event) => {
  document.getElementById('remote-player').srcObject = event.streams[0];
};

// 处理信令消息
async function handleSignalingMessage(msg) {
  switch(msg.type) {
    case 'offer':
      await peerConn.setRemoteDescription(new RTCSessionDescription(msg.sdp));
      // 生成Answer并发送给主播
      const answer = await peerConn.createAnswer();
      await peerConn.setLocalDescription(answer);
      sendToHost({ type: 'answer', sdp: peerConn.localDescription });
      break;
    case 'ice-candidate':
      await peerConn.addIceCandidate(new RTCIceCandidate(msg.candidate));
      break;
  }
}

// 处理自身ICE候选
peerConn.onicecandidate = (event) => {
  if (event.candidate) {
    sendToHost({ type: 'ice-candidate', candidate: event.candidate });
  }
};

额外说明 #

• 若房间内观众较多，P2P模式会导致主播带宽压力过大，此时建议使用SFU（选择性转发单元）来优化流的分发，主播只需推流到SFU，观众从SFU拉流。
• 可通过配置RTCPeerConnection的sdpSemantics: 'unified-plan'来更好地支持单向媒体流的协商。

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