javascript - WebRTC连接随机无音频输出

Question

我偶然发现了WebRTC Web应用程序中的一个奇怪问题。设置如下:
客户端A和客户端B通过仅发送WebRTC连接将音频发送到SFU。
客户端C通过两个到同一SFU的仅接收连接接收来自客户端A和B的音频流，并将它们添加到两个不同的“音频”元素中。这些发送和接收连接之间的路由正常工作。

这是问题所在:
刷新页面时，有时客户端C会听到来自客户端A和B的音频。但是大多数时候，客户端C只会听到来自随机A或B的音频。
Firefox和Chrome都在发生这种情况。

两个连接都在接收数据(请参见图形“bitsReceivedPerSecond”)，但是只有一个连接在输出音频。下面是一个示例，其中C可以听到A而不是B:

连接客户端A-> C:


连接客户端B-> C:


我对这些图形的理解是，原始WebRTC连接可以正常工作(发送和接收数据)，但是以某种方式连接不会随机输出音频。

有人知道如何发生吗？

这是用于将流添加到音频元素的“ontrack”回调。对于每个连接，日志确实正确显示。

gotRemoteStream(e) {
    Logger.log("Remote Streams: #"+e.streams.length);

    if (this.audioElement.srcObject !== e.streams[0]) {
        Logger.log("Received remote Stream with tracks to audio: " + this.audioElement.id);
        this.audioElement.srcObject = e.streams[0];
    }
}

Answer 1

单个音频元素一次只能播放一个音轨。

您说有两个传入的音频轨道，因此，如果this.audioElement是相同的元素，则每次对gotRemoteStream的调用都将竞争设置srcObject，一个覆盖另一个。

这很可能是您仅听到一个或另一个声音的原因。

最简单的解决方案可能是取消发送的流关联，因为它们之间往往会有所不同:

const elements = {};

gotRemoteStream({streams: [stream]}) {
    if (!elements[stream.id]) {
      elements[stream.id] = this.audioElementA.srcObject ? this.audioElementB
                                                         : this.audioElementA; 
    }
    elements[stream.id].srcObject = stream;
}

这应该适用于两个传入连接。剩下的不只是练习。