前端如何统计视频的渲染帧率在前端多媒体方向中，不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计

在前端多媒体方向中，不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计卡顿率呢？在比较早的时候是通过Video的waiting和playing消息来判断当前视频播放是否卡顿的。但是现在浏览器支持了一个新的接口：requestVideoFrameCallback。

当每一次有新的视频帧渲染的时候，都会触发一次这个回调。

简单的Demo

我们在页面上创建一个Video元素，用来播放视频，用两个不同帧率的视频统计渲染帧率，来测试上面的方法是否是真实有效的。

效果

30FPS

2. 60FPS

requestVideoFrameCallback

这个方法的用法和HTMLVideoElement.requestAnimationFrame基本一致，调用一次就会回调一次，如果要统计帧率，则需要在每次触发后再调用一次requestVideoFrameCallback方法。每次触发则代表一次视频渲染。

在使用此方法之前，可以通过先创建一个HTMLVideoElement元素，然后通过判断此元素是否有requestVideoFrameCallback方法来判断当前浏览器是否支持此方法。

requestVideoFrame方法还可以统计帧间隔，在不同的业务中，卡顿的计算规则都是不同的。比如点播中，可能认为1秒不播放才认为是卡顿。在云游戏的场景中则认为帧间隔大于200ms就是卡顿了。所以这个方法还可以用来统计帧间隔，让统计的维度变得更准确。

兼容性

代码

可以直接从gittee获取源代码，也可以直接使用下面的代码

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>统计视频渲染帧率</title>
</head>
<body>
  <video id="localVideo" style="width: 320px; height: 240px;" autoplay muted></video>
  <button id="videoBtn30">播放FPS30的视频</button>
  <button id="videoBtn60">播放FPS60的视频</button>
  <input id="frameGapCheckBox" type="checkbox">是否统计帧间隔
  <div id="div" style="white-space: pre-line;"></div>
  <script>
    let video = document.getElementById("localVideo");
    let btn30 = document.getElementById("videoBtn30");
    let btn60 = document.getElementById("videoBtn60");
    let frameGapCheckBox = document.getElementById("frameGapCheckBox");
    let div = document.getElementById("div");
    let frameIndex = 0;
    let timerId = 0;
    let lastTs = 0;
    let gapStr = '';
    if (video.requestVideoFrameCallback) {
      video.requestVideoFrameCallback(videoRender);
    } else {
      alert("当前浏览器不支持获取渲染帧率")
    }

    btn30.addEventListener('click', () => {
      video.src = './video_30.mov';
      startTimer();
    })

    btn60.addEventListener('click', () => {
      video.src = './video_60.mov';
      startTimer();
    })
    video.addEventListener('ended', () => {
      stopTimer();
    })

    function startTimer() {
      stopTimer();
      reset();
      timerId = setInterval(() => {
        onTimer();
      }, 1000);
    }

    function stopTimer() { 
      if (timerId > 0) {
        clearInterval(timerId);
        timerId = 0;
      }
    }

    function onTimer() {
      if (frameGapCheckBox.checked) {
        div.innerHTML += 'fps:' + frameIndex + '    [' + gapStr  + ']\r\n';
      } else {
        div.innerHTML += 'fps:' + frameIndex + '\r\n';
      }
      
      frameIndex = 0;
      gapStr = '';
    }

    function reset() {
      frameIndex = 0;
      lastTs = 0;
      div.innerHTML = '';
    }

    function videoRender (now) {
      ++frameIndex;
      if (frameGapCheckBox.checked && lastTs > 0) {
        gapStr += Math.round(now - lastTs) + ' ';
      }
      video.requestVideoFrameCallback(videoRender);
      lastTs = now;
    }
  </script>
</body>

其他

如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以关注前端多媒体公众号