SFU架构下前端ontrack事件中区分音视频轨道归属并映射视频元素

针对你在多人群组通话中遇到的轨道归属识别、元数据映射问题，结合SFU架构的特点，提供三种可行的实现方案：

方案一：通过SDP自定义字段传递元数据 #

利用SDP的可修改性，在Offer/Answer阶段注入用户元数据，无需额外信令消息，直接通过媒体协商同步映射关系。

前端步骤：修改Offer注入元数据 #

// 创建Offer后添加自定义元数据
const offer = await pc.createOffer();
const userId = "当前用户ID";
const sessionId = "当前会话ID";

// 给音频、视频的m-line添加自定义a字段
const modifiedSdp = offer.sdp
  .replace(/m=audio.*\n/g, match => `${match}a=metadata:user-id=${userId};session-id=${sessionId}\n`)
  .replace(/m=video.*\n/g, match => `${match}a=metadata:user-id=${userId};session-id=${sessionId}\n`);

offer.sdp = modifiedSdp;
await pc.setLocalDescription(offer);
// 发送修改后的Offer到服务器
ws.send(JSON.stringify({ type: "offer", sdp: modifiedSdp }));

客户端解析SDP并映射轨道 #

// 保存解析后的元数据映射表
const trackMetadataMap = new Map();

// 收到服务器转发的SDP后解析
const remoteDesc = new RTCSessionDescription(data.sdp);
const sdpLines = remoteDesc.sdp.split("\n");
let currentMLineIndex = -1;

sdpLines.forEach(line => {
  if (line.startsWith("m=")) {
    currentMLineIndex++;
  } else if (line.startsWith("a=metadata:")) {
    const params = line.slice(11).split(";").reduce((acc, item) => {
      const [key, val] = item.split("=");
      acc[key] = val;
      return acc;
    }, {});
    trackMetadataMap.set(currentMLineIndex, params);
  }
});

// ontrack事件中匹配元数据
pc.ontrack = (event) => {
  const receiverParams = event.receiver.getParameters();
  const mLineIndex = receiverParams.encodings[0].mLineIndex;
  const metadata = trackMetadataMap.get(mLineIndex);
  
  if (metadata) {
    const userId = metadata["user-id"];
    const videoEl = document.getElementById(`video-${userId}`);
    
    if (videoEl) {
      // 绑定轨道到对应视频元素
      if (!videoEl.srcObject) {
        videoEl.srcObject = new MediaStream([event.track]);
      } else {
        videoEl.srcObject.addTrack(event.track);
      }
      // 根据用户camera状态显示/隐藏
      if (userSettings[userId]?.cameraIsOn) {
        videoEl.style.display = "block";
      }
    }
  }
};

方案二：WebSocket信令同步SSRC-用户映射 #

SSRC是RTP流的唯一标识，通过WebSocket将服务器端的SSRC与用户ID绑定关系同步给客户端，实现精准映射。

服务器端（Node.js示例） #

// 维护SSRC到用户ID的映射表
const ssrcToUserId = new Map();
// 维护用户与PeerConnection的关联
const userPcMap = new Map();

// 处理服务器PeerConnection的ontrack事件
serverPc.ontrack = (event) => {
  const userId = getUserIdFromPc(serverPc); // 从上下文获取当前用户ID
  const ssrc = event.receiver.getParameters().encodings[0].ssrc;
  
  // 保存映射关系
  ssrcToUserId.set(ssrc, userId);
  
  // 转发轨道给其他用户，并同步元数据
  userPcMap.forEach((otherPc, otherUserId) => {
    if (otherUserId !== userId) {
      otherPc.addTrack(event.track, event.streams[0]);
      // 通过WebSocket发送映射消息
      sendToClient(otherUserId, JSON.stringify({
        type: "track-meta",
        ssrc,
        userId,
        trackType: event.track.kind
      }));
    }
  });
};

客户端处理映射关系 #

const ssrcMap = new Map();

// 监听WebSocket的元数据消息
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === "track-meta") {
    ssrcMap.set(data.ssrc, { userId: data.userId, trackType: data.trackType });
  }
};

// ontrack事件中匹配用户
pc.ontrack = (event) => {
  const ssrc = event.receiver.getParameters().encodings[0].ssrc;
  const meta = ssrcMap.get(ssrc);
  
  if (meta) {
    const videoEl = document.getElementById(`video-${meta.userId}`);
    if (videoEl) {
      if (!videoEl.srcObject) {
        videoEl.srcObject = new MediaStream([event.track]);
      } else {
        videoEl.srcObject.addTrack(event.track);
      }
      if (userSettings[meta.userId]?.cameraIsOn) {
        videoEl.style.display = "block";
      }
    }
  }
};

方案三：利用MediaStream Label传递用户ID #

通过设置MediaStream的label字段传递用户ID，实现最简单的映射，注意部分浏览器可能存在兼容性问题。

前端设置流Label #

// 获取媒体流后设置label为用户ID
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
stream.label = "当前用户ID";

// 添加轨道到PeerConnection
stream.getTracks().forEach(track => pc.addTrack(track, stream));

客户端ontrack事件中获取用户ID #

pc.ontrack = (event) => {
  const userId = event.streams[0].label;
  const videoEl = document.getElementById(`video-${userId}`);
  
  if (videoEl) {
    videoEl.srcObject = event.streams[0];
    if (userSettings[userId]?.cameraIsOn) {
      videoEl.style.display = "block";
    }
  }
};

方案对比 #

• SDP注入：无需额外信令，依赖SDP解析兼容性，适合对信令复杂度敏感的场景。
• SSRC映射：最可靠，映射关系精准，需要额外信令消息，适合稳定性要求高的生产环境。
• MediaStream Label：实现最简单，兼容性略差，适合快速原型开发。

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