WebRTC连接随机无音频输出

Question

我偶然发现了WebRTC网络应用程序中的一个奇怪问题。设置如下： 客户端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;
}

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