WebRTC跨浏览器（Firefox→Edge/Chrome）mute事件异常原因排查咨询

问题现象 #

• 发起端为Firefox v112，对等端同为Firefox时，音视频连接无异常；
• 对等端为Edge v118或Chrome v117时：
  • 未在代码标注(*)行设置断点：peer2先收到audio、video的unmute事件，随后触发video的mute事件，音视频无法正常播放；
  • 在(*)行设置断点：peer2不会触发mute事件，音视频可正常播放，推测断点带来的延迟消除了问题。

可能原因 #

1. 时序不匹配：Firefox添加Track的时机和Chromium系浏览器的SDP协商、媒体流初始化节奏不一致。断点带来的延迟让Chromium系有足够时间完成媒体通道的初始化流程，避免了Track添加后媒体流未就绪导致的mute触发。
2. 重复Track的异常处理逻辑缺陷：代码中捕获INVALID_ACCESS_ERR时直接标记添加成功，但此时Track在Chromium系中的状态可能并未正确同步，断点的延迟让状态同步过程完成，避免了后续异常。
3. 媒体流状态不稳定：添加Track时streamToAdd的active状态可能未稳定，Chromium系对媒体流状态变更的敏感度更高，无延迟场景下状态未就绪导致后续触发mute。

排查建议 #

• 打印streamToAdd.active的实时状态，确认执行Track添加操作时流是否处于稳定激活状态；
• 在Chromium系浏览器中打开chrome://webrtc-internals/，查看ICE连接状态、媒体流接收详情，定位mute触发时是否存在媒体通道断开或SDP协商异常；
• 对比有无断点场景下的SDP内容，检查Track的ssrc、mid等属性是否一致，排查是否因重复Track导致冲突；
• 监听peerConnection的track、iceconnectionstatechange事件，记录事件触发时序，和断点场景做差异对比。

解决建议 #

1. 等待媒体流稳定后再添加Track：确保streamToAdd处于激活状态后再执行添加逻辑，可通过事件监听实现：

if (!streamToAdd.active) {
  streamToAdd.addEventListener('active', () => {
    // 此处执行原有添加Track的代码逻辑
  }, { once: true });
  return;
}
// 原有添加Track的代码

2. 优化重复Track的判断逻辑：不要仅依赖捕获异常来判断Track是否已添加，提前检查peerConnection中的发送者：

const existingSenders = par_webRtc.peerConnection.getSenders();
const isTrackAlreadyAdded = existingSenders.some(sender => sender.track === track);
if (!isTrackAlreadyAdded) {
  par_webRtc.peerConnection.addTrack(track, streamToAdd);
  ok_add_1track = true;
} else {
  ok_add_1track = true;
}

3. 添加短延迟适配时序：在获取媒体流后设置短延迟再执行Track添加，适配Chromium系的初始化节奏：

navigator.mediaDevices.getUserMedia(constraints).then(stream => {
  setTimeout(() => {
    // 原有添加Track的代码逻辑
  }, 100);
});

4. 远端mute事件的重试处理：监听远端流的mute事件时，增加重试逻辑，比如检查ICE连接状态后重新协商，或重新绑定Track到播放元素。

相关代码 #

navigator.mediaDevices.getUserMedia(constraints).then(
  function Resolve_GetUserMedia(stream) {
      // add track to peerConnection to send it to peer

      let streamToAdd = mediaControl.stream;

      let tracksArray = streamToAdd.getTracks();

      let msgText = "(1) Adding tracks of the stream _" + streamToAdd.id + "_  " +
      "Activity = " + streamToAdd.active + "  Total = " + tracksArray.length;
      appendMessageText(msgText, "msg_log");

      for (let i = 0; i < tracksArray.length; i++) {
          let track = tracksArray[i];

          // try to add track
          let ok_add_1track = false;
          try {
              //  "par_webRtc.peerConnection" is a peerConnection
              par_webRtc.peerConnection.addTrack(track, streamToAdd);
              ok_add_1track = true;
          }
          catch(err) {
              if (err.code === DOMException.INVALID_ACCESS_ERR) {
                  // track already sent - no error
                  ok_add_1track = true;                   // (*) BREAKPOINT HERE SOLVES THE PROBLEM
              }
              else {
                  // other code are "true" errors
                  errorsCount++;
              }
          }

          if (ok_add_1track) {
              // track added successfully
              console.log("OK_Status of adding <" + track.kind + "> = " + "OK");
          }
          else {
              console.warn("ERR_Status of adding <" + track.kind + "> = " + "ERROR");
          }

          if (track.kind === "audio") {
              // remember status of track adding
              connection.noAudio = !ok_add_1track;
          }
          else if (track.kind === "video") {
              // remember status of track adding
              connection.noVideo = !ok_add_1track;
          }

          let sig_state = (par_webRtc.peerConnection === undefined) ?
                              "NO PEER CONN!!!" :
                              par_webRtc.peerConnection.signalingState;

          let msgText = "Resolve_RemoteDescriptionSet !!!>> " +
          "We sent track to remote.peerConnection : kind=" + track.kind +
          "  label=" + track.label +
          "  muted=" + track.muted.toString() +
          "  id=" + track.id +
          "  State = " + sig_state;

          console.log("WebRTC - " + msgText);

          appendMessageText(msgText, "msg_log");
      }


  } // function Resolve_GetUserMedia(stream)
);

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