与多个 USB 网络摄像头视频聊天答案

【问题标题】：Video chat with multiple usb webcamera与多个 USB 网络摄像头视频聊天
【发布时间】：2019-09-28 17:43:44
【问题描述】：

我正在尝试使用 webrtc 进行网络视频聊天。
我检查了 webrtc，对于这个解决方案来说已经足够了。
但是，就我而言，一台计算机中有三个摄像头（网络摄像头、USB 摄像头）。

                  camera1
 camera1    <->   camera2
                  camera3

所以，我尝试将多个流添加到一个 RTCPeerConnection。
但是，webrtc 不支持这个。

我需要为此创建 3 个 RTCPeerConnection。如果我创建 3 个对等点，那么它看起来像视频聊天室。

还有其他解决方案吗？

pc = new RTCPeerConnection(null);
pc.addStream(localStream1); 
pc.addStream(localStream2); 
pc.addStream(localStream3);`

这可能吗？

【问题讨论】：

WebRTC 绝对支持多流。你试过什么？
您能分享一些相关信息吗？
您的问题不够具体，无法知道您遇到了什么问题，并且可能已关闭。多个流应该可以工作。如果你分享你的代码，我也许可以指出问题和解决方案。
您显示的代码非常好。请注意，虽然今天的对等连接是基于跟踪的，但为了改进这样的控制，pc.addStream 已被弃用，因此它不适用于所有浏览器。将其替换为for (const track of stream.getTracks()) pc.addTrack(track, stream);。您需要详细说明您对该视频三合会的接收端的期望，但总的来说：收听另一端的track 事件以拾取不同的轨道及其关联的流，并将它们分配给必备的视频元素.
我检查了pc.addTrack()，函数可以用于add video，add audio，我需要将三个视频添加到一个pc。

标签： javascript performance architecture webrtc video-conferencing

【解决方案1】：

是的，WebRTC 确实支持这一点，正如您所展示的那样。

除了addStream 已被弃用，因此您想改用addTrack。或者使用 polyfill：

pc.addStream = stream => stream.getTracks().forEach(t => pc.addTrack(t, stream));

添加的顺序决定了track 事件在另一端触发的顺序：

pc.ontrack = ({streams: [stream]}) => {
  for (const video of [remoteElement1, remoteElement2, remoteElement3]) {
    if (video.srcObject && video.srcObject.id != stream.id) continue;
    video.srcObject = stream;
    break;
  }
}

上面的代码会将三个传入的流按顺序分配给三个视频元素进行播放。 track 事件在每个轨道上触发，因此我们检查 stream.id 以防一个流有多个轨道。

或者，我们可以通过数据通道发送stream.ids 并以这种方式进行关联，因为stream.ids 在远程是相同的。但是请注意，track.ids 这种方式并不稳定。第三种方法是使用始终稳定的transceiver.mid 进行关联，但最初是null。

【讨论】：