WebRTC 接收端动态控制 jitterBufferTarget

webrtc学习和实践 • 来源：前端多媒体 • 2024年4月8日下午3:17 • WebRTC

新版本的WebRTC支持在已经建立连接的情况下，接收端支持动态调整自己的jitterBufferTarget。在Chrome124版本中可以体验这个功能了。通过两个网页进行webrtc通信，具体效果见下面的视频。

什么是 jitterBuffer

jitterBuffer是抖动缓冲器。简单的理解就是缓冲器越大，网络抖动的时候越不容易卡顿、延迟越大。反之缓冲器越小，网络抖动的时候越容易卡顿、延迟越低。

效果

上面的效果使用chrome 124(目前是chrome的beta版本)进行演示。使用nodejs创建了一个websocket server的服务，用来交换两个页面的offer和answer。

通过拉流页面中的输入框可以设置jitterBufferTarget。可以在chrome://webrtc-internals中可以看到设置的参数是可以动态生效的。
在视频的后半段，推流端使用了一个视频，订阅端将jitterBufferTarget设置为2000毫秒，来演示接收端的延迟效果。可以看到视频中每秒会增加一个小圆圈，设置为2000毫秒的jitterBufferTarget后，拉流端的视频中的小圆圈和推流视频中小圆圈一直保持2个的差距。表示设置是生效的。

实现方法

拉流端通过RTCRtpReceiver.jitterBufferTarget方法，可以支持动态调整jitterBufferTarget的大小(最大4000ms)。

const receivers = pc_sub.getReceivers();
if (arr.length > 0) {
  // demo多次刷新会复用同一个pc，导致存在多个receiver，所以此处用最后一个
  const receiver = arr[arr.length-1];
  // 兼容性判断，低版本浏览器不支持此方法
  if (receiver.jitterBufferTarget !== undefined) {
    receiver.jitterBufferTarget = jitterBufferTarget;
  }
}

实际应用

在使用WebRTC进行通信时，不同的业务场景，我们对于延迟和卡顿有不同的需求，比如在网络好的情况下，我们希望延迟尽可能的小一些，就可以将jitterBufferTarget的延迟设置的比较小，反之用户的网络不好的情况下，就把jitterBufferTarget的延迟设置的大一些，尽量减少卡顿。或者在云游戏的场景，也可以尽可能的减小jitterBufferTarget来减小端到端延迟，获得更好的游戏体验。

作者：豆包