多流WebRTC应用在Safari 14.1版本中单路流无法播放问题求助

我开发了一款自定义WebRTC应用，使用两路视频流和一路音频流。该应用在Chrome 93.0、Firefox 92.0版本中运行完全正常，但在Safari 14.1版本中，ID为stream的第一个视频元素对应的流始终无法播放。

对应HTML代码（多为占位代码） #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="icon" href="data:;base64,iVBORw0KGgo="/>
    <script src="stream.js"></script>
    <style>
    </style>
  </head>

  <body>
    <div style="display:grid">
      <video style="grid-column:1;grid-row:1;width:720px;z-index:5" id="stream" autoplay playsinline>Your browser does not support video</video>
      <canvas style="grid-column:1;grid-row:1;justify-self:end;width:1280px;height:720px;z-index:10" id="canvas"></canvas>
      <video style="grid-column:1;grid-row:1;justify-self:end;width:1280px;height:720px" id="stream2" autoplay playsinline>Your browser does not support video</video>
    </div>
  </body>
</html>

对应JavaScript核心代码 #

其中html5VideoElement对应ID为stream的元素，html5VideoElement2对应ID为stream2的元素：

function onAddRemoteStream(event) {
  if (event.transceiver.mid == remotemap["front"]) {
    frontstream.addTrack(event.track);
    html5VideoElement.srcObject = frontstream;
    html5VideoElement.play();
  }
  if (event.transceiver.mid == remotemap["audio"]) {
    frontstream.addTrack(event.track);
  }
  if (event.transceiver.mid == remotemap["surface"]) {
    surfacestream.addTrack(event.track);
    html5VideoElement2.srcObject = surfacestream;
    html5VideoElement2.play();
  }
}

问题说明 #

onAddRemoteStream是RTCPeerConnection对象的onTrack回调方法，remotemap存储远端Peer发送的轨道类型与MID值的映射关系，frontstream和surfacestream是两个初始为空的MediaStream对象。

所有浏览器都没有抛出任何异常或警告，只有Safari中第一个视频元素始终无画面无声音，所有上行流（摄像头、音频、画布）在三款浏览器中均运行正常。

2023年1月更新 #

经过近一年排查，最终确认该问题为Safari 14/15版本的原生Bug，在Safari 16及以上版本中无需修改相关代码即可正常运行。

内容的提问来源于stack exchange，提问作者Florian Echtler