浏览器端WebRTC RTCPeerConnection设置H264为默认视频编解码器方法

WebRTC没有提供直接设置默认编解码器的API，核心实现逻辑是在创建SDP协商信息后，手动调整视频编码优先级，将H264提到最前再发送给对端，具体操作步骤如下：

实现步骤 #

• 第一步：正常初始化RTCPeerConnection实例，调用createOffer()或createAnswer()方法获取原始SDP内容
• 第二步：调用SDP处理函数，调整视频编码的优先级排序，代码示例如下：

function setH264AsPreferredCodec(sdp) {
  const sdpLines = sdp.split('\r\n');
  let videoLineIndex = -1;
  const h264PayloadTypes = [];

  // 定位视频媒体描述行
  for (let i = 0; i < sdpLines.length; i++) {
    if (sdpLines[i].startsWith('m=video')) {
      videoLineIndex = i;
      break;
    }
  }
  if (videoLineIndex === -1) return sdp;

  // 提取所有H264对应的负载类型值
  const videoLineParts = sdpLines[videoLineIndex].split(' ');
  for (let i = 3; i < videoLineParts.length; i++) {
    const pt = videoLineParts[i];
    const rtpmapLine = sdpLines.find(line => line.startsWith(`a=rtpmap:${pt}`));
    if (rtpmapLine && rtpmapLine.toLowerCase().includes('h264')) {
      h264PayloadTypes.push(pt);
    }
  }
  if (h264PayloadTypes.length === 0) {
    throw new Error('当前浏览器不支持H264编码');
  }

  // 重构视频媒体行，把H264放在优先级最高的位置
  const otherPayloadTypes = videoLineParts.slice(3).filter(pt => !h264PayloadTypes.includes(pt));
  sdpLines[videoLineIndex] = [...videoLineParts.slice(0,3), ...h264PayloadTypes, ...otherPayloadTypes].join(' ');
  return sdpLines.join('\r\n');
}

• 第三步：将修改后的SDP设置为本地会话描述，再通过信令服务器发送给Hololens 2端，代码示例如下：

// createAnswer场景逻辑完全一致
const originOffer = await peerConnection.createOffer();
const modifiedSdp = setH264AsPreferredCodec(originOffer.sdp);
await peerConnection.setLocalDescription(new RTCSessionDescription({
  type: originOffer.type,
  sdp: modifiedSdp
}));
// 后续通过Node信令服务器转发modifiedSdp即可

注意事项 #

• 目前Chrome、Edge、Safari均原生支持WebRTC场景下的H264编码，Firefox需要手动在about:config页面开启media.peerconnection.video.h264_enabled配置
• 无需修改Hololens 2端的协商逻辑，只要浏览器端优先发起H264编码协商，Hololens 2会自动匹配对应编码完成建联
• 如果使用simple-peer、mediasoup-client等WebRTC封装库，可以在库暴露的SDP修改钩子中调用上述处理函数即可生效

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