javascript - 为什么 WebRTC 本地流没有显示？

Question

我想做的是让 p1 连接到 p2，p2 获取网络摄像头并将其流式传输到 p2。在同一页面上练习 webrtc。

但是 onaddstream 我确实得到了一个流，它有正确的 ID 和错误，但是当我将它分配给视频元素时没有任何反应。

但是，我确实从请求流的 p2 获得了有效流。如果我将视频设置为等于此流，那么它会显示网络摄像头视频。

这是代码

v = $0

pc1 = new RTCPeerConnection();
pc2 = new RTCPeerConnection();

pc1.onaddstream = (s) => {
    v.src = URL.createObjectURL(s.stream);
    window.s1 = s.stream;
};

pc1.createOffer({offerToReceiveVideo: 1})
.then((offer) => {
    pc1.setLocalDescription(offer);
    pc2.setRemoteDescription(offer)
})
.then(() => navigator.mediaDevices.getUserMedia({ video: true }))
.then((stream) => {
    pc2.addStream(stream);
    window.s2 = stream;
})
.then(() => pc2.createAnswer())
.then((answer) => {
    pc2.setLocalDescription(answer);
    pc1.setRemoteDescription(answer);
})
.catch((err)=>console.log(err));

Answer 1

您不是在向 ICE 候选人发出信号。添加:

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);

...它会起作用。

小提示:查看友好的网络控制台弃用警告:

⚠ onaddstream is deprecated! Use peerConnection.ontrack instead.

⚠ URL.createObjectURL(MediaStream) is deprecated and will be removed soon.

例如喜欢this .规范即将完成 evolving .