如何实现单方向WebRTC通信中的假媒体流传输？

方法1：构造带静音轨的假媒体流（通用稳定） #

多数浏览器要求MediaStream至少包含一条媒体轨，所以可以创建静音音频轨或空视频轨来生成有效流：

// 创建静音音频轨
async function createFakeStream() {
  const audioContext = new AudioContext();
  const destination = audioContext.createMediaStreamDestination();
  // 连接一个无声音的振荡器（静音效果）
  const oscillator = audioContext.createOscillator();
  oscillator.frequency.value = 0;
  oscillator.connect(destination);
  oscillator.start();
  
  const stream = destination.stream;
  // 可选：添加空视频轨（如需视频流）
  const videoTrack = createEmptyVideoTrack();
  stream.addTrack(videoTrack);
  
  return stream;
}

// 创建空视频轨（黑屏）
function createEmptyVideoTrack() {
  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  return canvas.captureStream(1).getVideoTracks()[0];
}

// 使用示例
async function start(isCaller) {
  peerConnection.current = new RTCPeerConnection(peerConnectionConfig);
  peerConnection.current.onicecandidate = gotIceCandidate;
  peerConnection.current.ontrack = gotRemoteStream;
  
  // 添加假媒体流
  const fakeStream = await createFakeStream();
  peerConnection.current.addStream(fakeStream);
  
  // 正常执行offer/answer流程
  if (isCaller) {
    const offer = await peerConnection.current.createOffer();
    await peerConnection.current.setLocalDescription(offer);
    // 发送offer到对端...
  }
}

方法2：用addTransceiver自动生成假轨（最简方案） #

你之前尝试的addTransceiver用法错误，正确方式是直接指定媒体类型和传输方向，浏览器会自动生成假轨：

function start(isCaller) {
  peerConnection.current = new RTCPeerConnection(peerConnectionConfig);
  peerConnection.current.onicecandidate = gotIceCandidate;
  peerConnection.current.ontrack = gotRemoteStream;
  
  // 添加音频收发器，仅发送假流
  peerConnection.current.addTransceiver('audio', { direction: 'sendonly' });
  // 可选：添加视频收发器
  // peerConnection.current.addTransceiver('video', { direction: 'sendonly' });
  
  // 后续offer/answer流程正常执行
  if (isCaller) {
    // 创建并发送offer...
  }
}

这种方式不需要手动构造流，浏览器会自动生成静音音频或黑屏视频轨，适合快速实现。

方法3：修复Canvas假流实现 #

你之前的Canvas方案失败大概率是因为未正确合并音轨或启动捕获，以下是修正版本：

async function createCanvasFakeStream() {
  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  const ctx = canvas.getContext('2d');
  
  // 定期刷新Canvas内容（示例：随机颜色背景）
  setInterval(() => {
    ctx.fillStyle = `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }, 1000);
  
  // 获取视频流
  const videoStream = canvas.captureStream(1);
  // 添加静音音频轨确保流有效
  const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  audioStream.getAudioTracks()[0].enabled = false;
  audioStream.getAudioTracks().forEach(track => videoStream.addTrack(track));
  
  return videoStream;
}

关键注意事项 #

• 单方向通信时，需明确收发器方向：发送端用sendonly，接收端用recvonly，避免协商错误
• 不要从其他RTCPeerConnection获取track，每个连接的媒体资源独立，跨连接取轨无效
• 部分浏览器不接受完全空的流，确保至少包含一条启用的媒体轨

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