一、数据统计

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

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

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

  • 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

<script src="/js/graph.js"></script>

<script>

var pc = null;

// 定义绘制比特率图形相关的变量

var bitrateGraph;

var bitrateSeries;

// 定义绘制发送包图形相关的变理

var packetGraph;

var packetSeries;

pc = new RTCPeerConnection(null);

//bitrateSeries 用于绘制点

bitrateSeries = new TimelineDataSeries();

//bitrateGraph 用于将 bitrateSeries 绘制的点展示出来

bitrateGraph = new TimelineGraphView('bitrateGraph', 'bitrateCanvas');

bitrateGraph.updateEndDate(); // 绘制时间轴

// 与上面一样，只不是用于绘制包相关的图

packetSeries = new TimelineDataSeries();

packetGraph = new TimelineGraphView('packetGraph', 'packetCanvas');

packetGraph.updateEndDate();

// 每秒钟获取一次 Report，并更新图形

window.setInterval(() => {

    if (!pc) { // 如果 pc 没有创建直接返回

        return;

    }

    // 从 pc 中获取发送者对象

    const sender = pc.getSenders()[0];

    if (!sender) {

        return;

    }

    sender.getStats().then(res => { // 获取到所有的 Report

        res.forEach(report => { // 遍历每个 Report

            let bytes;

            let packets;

            // 我们只对 outbound-rtp 型的 Report 做处理

            if (report.type === 'outbound-rtp') {

                if (report.isRemote) { // 只对本地的做处理

                    return;

                }

                const now = report.timestamp;

                bytes = report.bytesSent; // 获取到发送的字节

                packets = report.packetsSent; // 获取到发送的包数

                // 因为计算的是每秒与上一秒的数据的对比，所以这里要做个判断

                // 如果是第一次就不进行绘制

                if (lastResult && lastResult.has(report.id)) {

                    // 计算这一秒与上一秒之间发送数据的差值

                    var mybytes = (bytes - lastResult.get(report.id).bytesSent);

                    // 计算走过的时间，因为定时器是秒级的，而时间戳是豪秒级的

                    var mytime = (now - lastResult.get(report.id).timestamp);

                    const bitrate = 8 * mybytes / mytime * 1000; // 将数据转成比特位

                    // 绘制点

                    bitrateSeries.addPoint(now, bitrate);

                    // 将会制的数据显示出来

                    bitrateGraph.setDataSeries([bitrateSeries]);

                    bitrateGraph.updateEndDate();// 更新时间

                    // 下面是与包相关的绘制

                    packetSeries.addPoint(now, packets -

                        lastResult.get(report.id).packetsSent);

                    packetGraph.setDataSeries([packetSeries]);

                    packetGraph.updateEndDate();

                }

            }

        });

        // 记录上一次的报告

        lastResult = res;

    });

}, 1000); // 每秒钟触发一次

</script>

四、Canvas绘制图形

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>canvas 实战</title>

</head>

<body>

    <canvas id="canvas" width="150" height="150">

        The browser doesn't support the canvas tag.

    </canvas>

</body>

<script>

    // 从 HTML 获取到 Canvas

    let canvas = document.getElementById('canvas');

    // 得到 Canvas 的渲染上下文

    let ctx_2d = canvas.getContext('2d');

    // 设置颜色为红色

    ctx_2d.fillStyle = "rgb(200,0,0)";

    // 设置矩型的大小

    ctx_2d.fillRect(10, 10, 55, 50);

    // 设置颜色为蓝色，并且透明

    ctx_2d.fillStyle = "rgba(0, 0, 200, 0.5)";

    // 设置矩型大小

    ctx_2d.fillRect(30, 30, 55, 50);

</script>

</html>

10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形的更多相关文章

  1. 5┃音视频直播系统之 WebRTC 中的协议UDP、TCP、RTP、RTCP详解

    一.UDP/TCP 如果让你自己开发一套实时互动直播系统,在选择网络传输协议时,你会选择使用UDP协议还是TCP协议 假如使用 TCP 会怎样呢?在极端网络情况下,TCP 为了传输的可靠性,将会进行反 ...

  2. 3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载

    一.录制分类 在音视频会议.在线教育等系统中,录制是一个特别重要的功能 录制一般分为服务端录制和客户端录制 服务端录制:优点是不用担心客户因自身电脑问题造成录制失败(如磁盘空间不足),也不会因录制时抢 ...

  3. 4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享

    一.共享桌面原理 共享桌面在直播系统中是一个必备功能 共享者:每秒钟抓取多次屏幕,每次抓取的屏幕都与上一次抓取的屏幕做比较,取它们的差值,然后对差值进行压缩:如果是第一次抓屏或切幕的情况,即本次抓取的 ...

  4. 1┃音视频直播系统之浏览器中通过WebRTC访问摄像头

    一.WebRTC的由来 对于前端开发小伙伴而言,如果用 JavaScript 做音视频处理 在以前是不可想象的,因为首先就要考虑浏览器的性能是否跟得上音视频的采集 但是 Google 作为国际顶尖科技 ...

  5. 2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存

    一.拍照原理 好多人小时候应该都学过,在几张空白的纸上画同一个物体,并让物体之间稍有一些变化,然后连续快速地翻动这几张纸,它就形成了一个小动画,音视频播放器就是利用这样的原理来播放音视频文件的 播放器 ...

  6. 12┃音视频直播系统之 WebRTC 实现1对1直播系统实战

    一.搭建 Web 服务器 前面我们已经实现过,但是没有详细说HTTPS服务 首先需要引入了 express 库,它的功能非常强大,用它来实现 Web 服务器非常方便 同时还需要引入 HTTPS 服务, ...

  7. 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商

    一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...

  8. 8┃音视频直播系统之 WebRTC 信令系统实现以及通讯核心并实现视频通话

    一.信令系统 信令系统主要用来进行信令的交换 在通信双方彼此连接.传输媒体数据之前,它们要通过信令服务器交换一些信息,如规范协商 若 A 与 B 要进行音视频通信,那么 A 要知道 B 已经上线了,同 ...

  9. 11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件

    一.RTCDataChannel WebRTC 不但可以让你进行音视频通话,而且还可以用它传输普通的二进制数据,比如说可以利用它实现文本聊天.文件的传输等 WebRTC 的数据通道(RTCDataCh ...

随机推荐

  1. C++ | 虚表的写入时机

    虚表 在C++的多态机制中,使用了 virtual 关键字声明的函数称之为虚函数,每个有虚函数的类或者虚继承的子类,编译器都会为它生成一个虚拟函数表(简称:虚表,以下用 vftable表示),表中的每 ...

  2. React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

    虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...

  3. JavaScript の 内容属性（HTML属性attribute）和 DOM 属性（property）

    [博文]内容属性(HTML属性)和 DOM 属性 标签: 博文 JavaScript 粗略解读(与jQuery做对比) 内容属性(HTML属性) : attribute DOM 属性(Element属 ...

  4. 《深入理解ES6》笔记—— JavaScript中的类class（9）

    ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...

  5. 干货，看微信小程序后台用户数据如何演变和递增

    这几天发现附近小程序又多了好几家,其中有普通小程序和门店小程序,把它们做一个对比,门店小程序更多的像一张名片,只有基本的企业名称.地址.营业时间.电话和门店照片,和普通小程序相比显得逊色许多.楼下的水 ...

  6. 修改Menu_item的字体属性

    前面一直在找 MenuItem的文字颜色的设置.我发现API中只有背景颜色的设置... 所以找到下面的方法.在OverFlow上看到的.在onCreateOptionsMenu中覆写一下, 使Menu ...

  7. GUI-适配器设计模式-事件处理

    GUI(布局管理器)* FlowLayout(流式布局管理器) * 从左到右的顺序排列. * Panel默认的布局管理器.* BorderLayout(边界布局管理器) * 东,南,西,北,中 * F ...

  8. 移动端input输入框把页面顶起, 收起键盘页面复原不了问题

    我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>>  我这边提供两种解决 ...

  9. js，nodejs如何判断文件是什么编码格式

    nodejs编码只支持utf8的编码方式,无论是打开某个文件或者写.js脚本都得以utf8的编码方式保存,不然程序无法运行,读出来的文件是乱码. 如果是在前台,读取文件是通过FileReader或者F ...

  10. python---virtualenv创建管理虚拟环境

    virtualenv创建虚拟环境 安装包virtualenv pip install virtualenv 常用命令 # 为项目创建虚拟环境 cd project_dir virtualenv env ...