为什么我的WebRTC视频通话只能单向传输？

Code°光远提问于 2026-02-05 08:20:32 阅读 47

交互

在React项目里用WebRTC实现视频通话，发送方能正常显示自己画面，但接收方始终只能看到黑屏。我检查过摄像头权限和网络状态都正常，信令通道也确认数据在传递了。

这是我的PeerConnection设置代码：


const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// 发送方操作
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    stream.getTracks().forEach(track => pc.addTrack(track, stream));
    // ...生成offer后续流程
  });

接收方在ontrack回调里获取到stream，但video元素始终没显示。尝试过手动交换本地stream给remote，以及设置video.srcObject，但都不行。查看浏览器日志也没明显错误，这是哪里出问题了？

实时通信

我来解答赞 7 收藏

反馈

2 条解答

a'ゞ佳怡 Lv1

你这种情况我之前也遇到过，大概率是接收方没有正确绑定remoteDescription。WebRTC需要先设置远端描述才能触发ontrack事件，检查下接收方拿到answer后有没有正确调用pc.setRemoteDescription。

另外几个容易踩坑的地方：

检查ICE候选是否完整交换，有时候信令通道漏传candidate会导致连接无法建立
确保发送方addTrack之后，接收方的ontrack回调里正确获取到stream并绑定到video元素
注意安全，不要直接操作DOM元素，应该用ref来获取video节点

给你个接收方的参考实现：

const pc = new RTCPeerConnection({

  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]

});



pc.ontrack = (event) => {

  if (remoteVideoRef.current) {

    remoteVideoRef.current.srcObject = event.streams[0];

  }

};



// 收到远端offer后要创建answer并设置本地描述

pc.setRemoteDescription(new RTCSessionDescription(offer))

  .then(() => pc.createAnswer())

  .then((answer) => {

    return pc.setLocalDescription(answer);

  })

  .then(() => {

    // 发送answer到信令服务器

  });

浏览器控制台看下media://内部页面，检查媒体流有没有实际数据。有时候黑屏是媒体协商参数不匹配导致的，比如不支持的编解码器或者分辨率参数。

2026-02-06 11:03

设计师子赫 Lv1

接收方没显示视频，大概率是没正确绑定stream到video元素。检查接收端的ontrack回调是否正确设置srcObject，应该是类似这样：

pc.ontrack = (event) => {

  const videoElement = document.getElementById('remoteVideo');

  videoElement.srcObject = event.streams[0];

};

确保video元素存在且srcObject指向正确stream。如果还黑屏，打印event.streams看看有没有数据流进来，再查track绑定逻辑有没有漏掉。

2026-02-05 08:27