跟着 MDN 学 HTML day_23：（WebRTC 中的编解码器使用指南）

ZCH��

441人浏览 · 2026-05-07 10:03:51

ZCH�� · 2026-05-07 10:03:51 发布

一、WebRTC 与无容器媒体

WebRTC（Web Real-Time Communication）是一套让浏览器和应用程序能够实现实时音视频通信的 API。与传统的媒体播放方式不同，WebRTC 使用裸的 MediaStreamTrack 对象来传输每个音视频轨道，不依赖于任何容器格式如 MP4 或 WebM。

这种无容器的设计意味着编解码器的选择和配置完全由通信双方协商决定。为了确保不同浏览器的互通性，WebRTC 规范明确规定了所有兼容浏览器必须支持的编解码器集合。

获取浏览器支持的编解码器列表示例：

// 获取视频编解码器支持列表
const videoCodecs = RTCRtpSender.getCapabilities('video').codecs;
console.log('支持的视频编解码器:', videoCodecs);

// 获取音频编解码器支持列表
const audioCodecs = RTCRtpSender.getCapabilities('audio').codecs;
console.log('支持的音频编解码器:', audioCodecs);

// 输出每个编解码器的详细信息
videoCodecs.forEach(codec => {
  console.log(`MIME类型: ${codec.mimeType}, 时钟频率: ${codec.clockRate}`);
});

知识点：WebRTC 传输的媒体不使用任何容器格式，这意味着编解码器必须自己处理帧边界和时间戳信息。RTP（实时传输协议）负责为这些裸流提供时间戳和序列号等控制信息。这也是为什么 WebRTC 的编解码器选择需要考虑 RTP 负载格式的兼容性。

二、WebRTC 视频编解码器要求

所有完全兼容 WebRTC 的浏览器必须支持 VP8 和 H.264/AVC 的 Constrained Baseline profile。此外，接收端必须能够处理至少 20 FPS、分辨率不低于 320x240 像素的视频流。

使用 SDP 指定期望的视频分辨率示例：

// 创建 RTCPeerConnection 连接
const peerConnection = new RTCPeerConnection();

// 在 SDP 协商中添加视频分辨率偏好
async function negotiateWithResolution() {
  const offer = await peerConnection.createOffer();
  
  // 修改 SDP 中的视频分辨率属性
  let modifiedSdp = offer.sdp.replace(
    /a=sendonly/g,
    'a=sendonly\na=imageattr:* send [x=1280,y=720] recv [x=1280,y=720]'
  );
  
  await peerConnection.setLocalDescription({ type: 'offer', sdp: modifiedSdp });
}

// 监听 ICE 候选收集完成事件
peerConnection.addEventListener('icegatheringstatechange', () => {
  if (peerConnection.iceGatheringState === 'complete') {
    console.log('ICE 候选收集完成，分辨率协商配置成功');
  }
});

知识点：WebRTC 规范要求浏览器必须能够处理最低 320x240 像素、20 FPS 的视频流。这个要求是保证基本互通性的下限，实际应用中通常会协商更高的分辨率。SDP 协议中的 a=image-attr 属性提供了一种编解码器无关的方式来协商分辨率偏好，但发送端不强制支持这个机制。

三、VP8 视频编解码器详解

VP8 是 WebRTC 必须支持的视频编解码器之一，由 Google 开发并开源。它在所有主流浏览器中都得到支持，且没有专利授权费用，这使得它成为 WebRTC 应用的理想选择。

VP8 在 WebRTC 中的基本配置示例：

// 获取 VP8 编解码器配置
async function setupVP8Connection() {
  const peerConnection = new RTCPeerConnection();
  
  // 获取视频发送器的编解码器列表
  const senders = peerConnection.getSenders();
  const videoSender = senders.find(s => s.track?.kind === 'video');
  
  if (videoSender) {
    const parameters = videoSender.getParameters();
    
    // 优先选择 VP8 编解码器
    const vp8Codec = parameters.codecs.find(c => c.mimeType === 'video/VP8');
    if (vp8Codec) {
      console.log('找到 VP8 编解码器，payload 类型:', vp8Codec.payloadType);
    }
  }
}

// 监听并配置 VP8 编码参数
function configureVP8Parameters(transceiver) {
  const parameters = transceiver.sender.getParameters();
  
  // 设置编码参数：比特率、帧率等
  parameters.encodings = [{
    maxBitrate: 1000000,  // 最大比特率 1 Mbps
    maxFramerate: 30,      // 最大帧率 30 fps
    scaleResolutionDownBy: 1.0
  }];
  
  transceiver.sender.setParameters(parameters);
}

知识点：VP8 的 RTP 负载格式定义在 RFC 7741 中。在 WebRTC 中使用 VP8 时，除非通过 SDP 另行通知，否则像素宽高比默认为 1:1（方形像素）。VP8 本身支持可变比特率编码，这有助于在网络条件变化时自适应调整视频质量。

四、H.264/AVC 视频编解码器详解

H.264（也称为 AVC）是 WebRTC 必须支持的另一款视频编解码器。WebRTC 要求实现的是 Constrained Baseline profile，这是 Main profile 的子集，专门为移动视频和视频会议等低复杂度、低延迟场景设计。

配置 H.264 编解码器参数的示例：

// 检查 H.264 编解码器支持情况
function checkH264Support() {
  const videoCapabilities = RTCRtpSender.getCapabilities('video');
  const h264Codecs = videoCapabilities.codecs.filter(c => 
    c.mimeType === 'video/H264'
  );
  
  h264Codecs.forEach(codec => {
    // 解析 profile-level-id 参数
    console.log(`H.264 profile-level-id: ${codec.parameters['profile-level-id']}`);
    console.log(`H.264 packetization-mode: ${codec.parameters['packetization-mode']}`);
  });
}

// 设置 H.264 编码参数
async function setupH264Encoding(peerConnection) {
  const transceivers = peerConnection.getTransceivers();
  
  for (const transceiver of transceivers) {
    if (transceiver.sender.track?.kind === 'video') {
      const parameters = transceiver.sender.getParameters();
      
      // 使用特定 profile 的 H.264 编解码器
      parameters.codecs = parameters.codecs.filter(c => 
        c.mimeType === 'video/H264' && 
        c.parameters['profile-level-id'] === '42e01f'  // Constrained Baseline
      );
      
      // 设置编码参数
      parameters.encodings = [{
        maxBitrate: 1500000,
        maxFramerate: 30,
        active: true
      }];
      
      await transceiver.sender.setParameters(parameters);
    }
  }
}

知识点：使用 H.264 时，profile-level-id 参数必须在 SDP 中指定，用于标识使用的子 profile。packetization-mode 参数必须支持 mode 1（非交错模式），而 sprop-parameter-sets 参数不能出现在 SDP 中，因为序列和图像信息必须在带内传输。这些特定要求确保了不同浏览器实现之间的互通性。

五、VP9 与 AV1 高级视频编解码器

除了必须支持的 VP8 和 H.264，现代浏览器还支持更高效的视频编解码器如 VP9 和 AV1。这些编解码器可以提供更好的压缩效率，但需要注意兼容性问题。

使用 VP9 和 AV1 编解码器的示例：

// 检测 VP9 支持情况
function isVP9Supported() {
  const capabilities = RTCRtpSender.getCapabilities('video');
  return capabilities.codecs.some(c => c.mimeType === 'video/VP9');
}

// 检测 AV1 支持情况
function isAV1Supported() {
  const capabilities = RTCRtpSender.getCapabilities('video');
  return capabilities.codecs.some(c => c.mimeType === 'video/AV1');
}

// 动态选择最优视频编解码器
async function selectOptimalVideoCodec(peerConnection) {
  const supportedCodecs = [];
  const capabilities = RTCRtpSender.getCapabilities('video');
  
  // 按优先级检查编解码器支持
  if (isAV1Supported()) supportedCodecs.push('video/AV1');
  if (isVP9Supported()) supportedCodecs.push('video/VP9');
  supportedCodecs.push('video/VP8', 'video/H264');
  
  console.log('支持的编解码器（按优先级）:', supportedCodecs);
  
  // 配置优先使用的编解码器
  const transceivers = peerConnection.getTransceivers();
  for (const transceiver of transceivers) {
    if (transceiver.sender.track?.kind === 'video') {
      const parameters = transceiver.sender.getParameters();
      
      // 重新排列编解码器优先级
      parameters.codecs = supportedCodecs
        .map(mimeType => capabilities.codecs.find(c => c.mimeType === mimeType))
        .filter(c => c !== undefined);
      
      await transceiver.sender.setParameters(parameters);
    }
  }
}

知识点：VP9 从 Firefox 46 开始成为 Firefox 的首选 WebRTC 视频编解码器，Chrome 48+ 支持 VP9。AV1 需要 Chrome 113+ 或 Firefox 136+ 才能使用。使用非必须编解码器时，必须考虑降级方案，因为不是所有浏览器都支持这些高级编解码器。VP9 和 AV1 支持依赖描述符 RTP 头部扩展，用于在多用户会议场景中提供帧依赖信息。

六、WebRTC 音频编解码器详解

WebRTC 要求所有兼容浏览器必须支持的音频编解码器包括 Opus、G.711 PCMA（A-law）和 G.711 PCMU（µ-law）。Opus 是主要的音频编解码器，提供优秀的音质和灵活的比特率调整能力。

音频编解码器配置示例：

// 获取支持的音频编解码器
function getSupportedAudioCodecs() {
  const audioCapabilities = RTCRtpSender.getCapabilities('audio');
  return audioCapabilities.codecs.map(codec => ({
    mimeType: codec.mimeType,
    clockRate: codec.clockRate,
    channels: codec.channels
  }));
}

// 配置 Opus 编码参数
async function configureOpusParameters(peerConnection) {
  const transceivers = peerConnection.getTransceivers();
  
  for (const transceiver of transceivers) {
    if (transceiver.sender.track?.kind === 'audio') {
      const parameters = transceiver.sender.getParameters();
      
      // 设置 Opus 特定参数
      const opusCodec = parameters.codecs.find(c => c.mimeType === 'audio/opus');
      if (opusCodec) {
        // Opus 参数：比特率、复杂度、丢包隐藏等
        opusCodec.parameters = {
          usedtx: '1',        // 使用不连续传输
          stereo: '0',        // 单声道
          maxplaybackrate: '16000',  // 最大回放率 16kHz
          sprop-stereo: '0'
        };
      }
      
      // 设置编码比特率（20ms 帧大小）
      parameters.encodings = [{
        maxBitrate: 32000,    // 32 kbps 适用于全频段语音
      }];
      
      await transceiver.sender.setParameters(parameters);
    }
  }
}

// 使用 G.711 作为降级方案
function setupG711Fallback(peerConnection) {
  const audioCapabilities = RTCRtpSender.getCapabilities('audio');
  const g711Codecs = audioCapabilities.codecs.filter(c => 
    c.mimeType === 'audio/PCMU' || c.mimeType === 'audio/PCMA'
  );
  
  if (g711Codecs.length > 0) {
    console.log('G.711 编解码器可用，可以用作降级方案');
    return g711Codecs;
  }
  return [];
}

知识点：Opus 支持 6 kbps 到 510 kbps 的比特率范围，可以动态调整。对于 20ms 帧大小，窄带语音推荐 8-12 kbps，宽带语音推荐 16-20 kbps，全频段语音推荐 28-40 kbps，立体声音乐推荐 64-128 kbps。G.711 使用 8kHz 采样率、8位采样值，比特率固定为 64 kbps，质量相当于传统固话，主要用作最低保障的降级方案。

七、自定义编解码器优先级

在实际应用中，开发者可以自定义编解码器的优先级顺序，让 WebRTC 在协商时优先使用指定的编解码器。这通过 RTCRtpTransceiver 的 setCodecPreferences 方法实现。

自定义编解码器优先级示例：

// 设置偏好的编解码器顺序
async function setPreferredCodecs(peerConnection, preferredVideoCodec, preferredAudioCodec) {
  const transceivers = peerConnection.getTransceivers();
  
  for (const transceiver of transceivers) {
    const kind = transceiver.sender.track?.kind;
    if (!kind) continue;
    
    // 获取该媒体类型的所有可用编解码器
    const allCodecs = kind === 'video' 
      ? RTCRtpSender.getCapabilities('video').codecs
      : RTCRtpSender.getCapabilities('audio').codecs;
    
    // 将偏好的编解码器移到最前面
    const preferredCodec = allCodecs.find(c => c.mimeType === 
      (kind === 'video' ? preferredVideoCodec : preferredAudioCodec));
      
    const otherCodecs = allCodecs.filter(c => c !== preferredCodec);
    
    // 重新排列编解码器顺序：偏好的在前，其他在后
    const reorderedCodecs = preferredCodec ? [preferredCodec, ...otherCodecs] : allCodecs;
    
    // 应用新的编解码器优先级
    await transceiver.setCodecPreferences(reorderedCodecs);
    
    console.log(`${kind}编解码器优先级已设置，首选: ${kind === 'video' ? preferredVideoCodec : preferredAudioCodec}`);
  }
}

// 使用示例：首选 VP8 和 Opus
async function exampleUsage() {
  const peerConnection = new RTCPeerConnection();
  
  // 等待添加轨道
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  stream.getTracks().forEach(track => {
    peerConnection.addTrack(track, stream);
  });
  
  // 设置编解码器优先级
  await setPreferredCodecs(peerConnection, 'video/VP8', 'audio/opus');
  
  // 触发重新协商
  peerConnection.onnegotiationneeded = async () => {
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
  };
}

知识点：setCodecPreferences 方法只能被调用一次，必须在首次建立连接之前调用。调用后，指定的编解码器列表顺序将决定协商时的优先级顺序。编解码器列表中如果包含不兼容的配置组合可能会导致协商失败。此外，这个方法的调用不影响已经存在的收发器，只影响调用后创建的收发器。

八、编解码器选择策略与安全考虑

选择合适的编解码器需要综合考虑多个因素，包括专利授权、电池续航、性能表现和安全影响。VP8 完全免专利费，而 H.264 虽然广泛使用但存在专利授权问题。

综合决策示例：

// 根据平台和设备能力选择最佳编解码器
async function selectBestCodecBasedOnPlatform() {
  const userAgent = navigator.userAgent;
  const isIOS = /iPad|iPhone|iPod/.test(userAgent);
  const isAndroid = /Android/.test(userAgent);
  
  let preferredVideoCodec = 'video/VP8';
  let preferredAudioCodec = 'audio/opus';
  
  // iOS 设备上 H.264 有硬件加速，更省电
  if (isIOS) {
    const h264Available = RTCRtpSender.getCapabilities('video').codecs
      .some(c => c.mimeType === 'video/H264');
    
    if (h264Available) {
      preferredVideoCodec = 'video/H264';
      console.log('iOS 设备优先使用 H.264 以利用硬件加速');
    }
  }
  
  // 检查是否有首选编解码器在本次会话中可用
  function isCodecAvailable(codecMimeType, kind) {
    return RTCRtpSender.getCapabilities(kind).codecs
      .some(c => c.mimeType === codecMimeType);
  }
  
  // 安全考虑：可变比特率可能泄露信息
  function evaluateSecurityRisk() {
    // 使用恒定比特率可以降低信息泄露风险
    console.log('注意：可变比特率编码可能被用于推断视频内容变化');
    
    // 建议：对敏感通信场景考虑使用恒定比特率配置
    return {
      useConstantBitrate: true,
      recommendedSettings: {
        video: { maxBitrate: 1000000, minBitrate: 1000000 },
        audio: { maxBitrate: 64000, minBitrate: 64000 }
      }
    };
  }
  
  const securityRecommendation = evaluateSecurityRisk();
  
  return {
    video: preferredVideoCodec,
    audio: preferredAudioCodec,
    securitySettings: securityRecommendation
  };
}

知识点：使用可变比特率编解码器时，理论上可以通过监控比特率变化来推断视频内容的动态程度，这可能构成隐私泄露风险。对于高安全要求的场景，建议使用恒定比特率配置。在 iOS 平台上，H.264 有硬件编码支持，比 VP8 更省电；而在大多数桌面平台上，VP8 和 H.264 性能相近。选择非必须编解码器时必须提供降级方案，确保在所有兼容 WebRTC 的浏览器上都能正常工作。

想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！