10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形

一、数据统计

• 在视频直播中，还有一项比较重要，那就是数据监控

• 比如开发人员需要知道收了多少包、发了多少包、丢了多少包，以及每路流的流量是多少，才能评估出目前用户使用的音视频产品的服务质量是好还是坏

• 如果用户的音视频服务质量比较差时，尤其是网络带宽不足时，可以通过降低视频分辨率、减少视频帧率、关闭视频等策略来调整用户的网络状况

• WebRTC 中的统计信息大体分为三种：inbound-rtp、outbound-rtp、data-channel

• 另外如果你需要查看 WebRTC 的统计数据，可以在 Chrome浏览器下地址栏中输入 chrome://webrtc-internals 即可看到所有的统计信息了

• 当你点进其中一个通道中查看详情，即可看到大概如下的图形界面

• 在接受视频轨信息图中你可以实时看到总共收了多少数据包、多少字节的数据，以及每秒钟接收了多少包、多少字节的数据等统计数据

• 而在发送视频轨信息图中你可以实时看到WebRTC 发送的总字节数、总包数、每秒钟发送的字节数和包数，以及重传的包数和字节数等信息

二、获取统计数据

• WebRTC 提供了一个非常强大的 API，即 getStats()，通过该 API 你就可以获取上面讲述的所有信息

• getStats API 是 RTCPeerConnecton 对象的方法，用于获取各种统计信息

• 通过向 getStats 方法中设置参数或不设置参数来决定你要获得多少统计数据或哪些统计数据

var pc = new RTCPeerConnection();

// 获得速个连接的统计信息
pc.getStats().then( 
 	// 在一个连接中有很多 report
 	reports => {
 		// 遍历每个 report
 		reports.forEach( report => {
 			// 将每个 report 的详细信息打印出来
 			console.log(report);
 		});
 }).catch( err => {
		console.error(err);
 })
)

三、插件库绘制图形

• 步骤一：需要引入第三方库 graph.js

• 步骤二：启动一个定时器，每秒钟绘制一次图形

• 步骤三：在定时器的回调函数中，读取 RTCStats 统计信息，转化为可量化参数，并将其传给graph.js 进行绘制

• 就可以得到上面的视频轨信息图了

// 引入第三方库 graph.js

四、Canvas绘制图形

• 分析源码可知，上面的视频轨信息图都是通过 Canvas 进行绘制的

• Canvas 可以绘制矩形、路径、圆弧等基本几何图形，通过这些基本图形的组合，可以绘制出其他更加复杂的图形

• 除了绘制各种图形外，Canvas 还可以对图形进行颜色填充和边框涂色。而对图形的操作，如旋转、伸缩、位置变换等也是 Canvas 必备的功能

• Canvas 是 HTML5 标准中的一个新元素

• Canvas 坐标系的原点在画布的左上角，X 坐标从左向右增长，Y 坐标是从上到下增长

• 你可以把它想像成一块“画布”，有了它你就可以在网页上绘制图像和动画了

• 对 2D 图形渲染，使用了 CanvasRenderingContext2D 类，底层使用了 Google 开源的 Skia 库

• 对 3D 图形渲染，使用了 WebGLRenderingContext 类，底层使用的是 OpenGL，不过在 Windows 上使用的却是 D3D

    
    
    
    



    
        The browser doesn't support the canvas tag.