在前端多媒体方向中,不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计卡顿率呢?在比较早的时候是通过Video的waiting和playing消息来判断当前视频播放是否卡顿的。但是现在浏览器支持了一个新的接口:requestVideoFrameCallback。
当每一次有新的视频帧渲染的时候,都会触发一次这个回调。
简单的Demo
我们在页面上创建一个Video元素,用来播放视频,用两个不同帧率的视频统计渲染帧率,来测试上面的方法是否是真实有效的。
效果
- 30FPS
- 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>
其他
如果你也是专注前端多媒体或者对前端多媒体感兴趣,可以搜索微信公众号"前端多媒体"