一、数据统计

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

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

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

  • 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. 如何正确的阅读Datasheet？

    不仅仅是芯片,包括工具.设备几乎任何电子产品,都需要去阅读它的datasheet,除了包括最低.最高要求,特点,建议和用途及其兼容的设备等等,更重要的是原厂商以一个成功者的身份去告诉你一些注意事项. ...

  2. Flutter入门教程（四）第一个flutter项目解析

    一.创建一个Flutter工程 1.1 命令行创建 首先我们找一个空目录用来专门存放flutter项目,然后在路径中直接输入cmd: 使用 flutter create <projectname ...

  3. CSS详细解读定位

    一 前言 CSS定位是CSS布局只能够重要的一环.本篇文章带你解读定位属性,可以让你更加深入的理解定位带来的一些特性,熟练使用CSS布局. 二 正文 1.文档流布局的概念 将窗体自上而下分成一行行, ...

  4. 行内元素的padding和margin是否有效

    行内元素的纵向padding和margin都是不考虑的,这是css规范定义的.inline元素确实可以设置垂直方向的padding和margin值,但是inline元素的margin和padding的 ...

  5. 面试问题整理之flex 布局

  6. Vulnhub 之 Earth

    靶机地址:https://www.vulnhub.com/entry/the-planets-earth,755/ Kali IP:192.168.56.104 下载OVA文件后,直接通过Virtua ...

  7. Ubuntu16.04 安装和卸载MySQL数据库

    Ubuntu16.04 安装和卸载MySQL数据库 1 安装 安装非常简单,只需要三个命令 1.1 安装服务端 sudo apt-get install mysql-server 在这一步过程中会有提 ...

  8. drf的JWT认证

    JWT认证(5星) token发展史 在用户注册或登录后,我们想记录用户的登录状态,或者为用户创建身份认证的凭证.我们不再使用Session认证机制,而使用Json Web Token(本质就是tok ...

  9. netty系列之:java中的base64编码器

    简介 什么是Base64编码呢?在回答这个问题之前,我们需要了解一下计算机中文件的分类,对于计算机来说文件可以分为两类,一类是文本文件,一类是二进制文件. 对于二进制文件来说,其内容是用二进制来表示的 ...

  10. AWS - Basic 1

    之前由于公司 Training 考取了 AWS-SAP 的证书,更多理解的是概念和理论上的知识,并未实操.但对于学习一门技术来说,实践是加深理解和掌握该技术的必经之路,强调知行合一.所以最近打算重新熟 ...