一、数据统计

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

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

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

  • 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. HTML5+CSS3兼容收藏夹

    CSS3选择器兼容IE6~8: Selectivizr 使用方法: <!--[if (gte IE 6)&(lte IE 8)]> <script src="htt ...

  2. SVG中的坐标系统和坐标变换

    视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...

  3. Mxnet速查_CPU和GPU的mnist预测训练_模型导出_模型导入再预测_导出onnx并预测

    需要做点什么 方便广大烟酒生研究生.人工智障炼丹师算法工程师快速使用mxnet,所以特写此文章,默认使用者已有基本的深度学习概念.数据集概念. 系统环境 python 3.7.4 mxnet 1.9. ...

  4. 在非k8s 环境下 的应用 使用 Dapr Sidekick for .NET

    在k8s 环境下,通过Operator 可以管理Dapr sidecar, 在虚拟机环境下,我们也是非常需要这样的一个管理组件,类似下图:在这张图片中,在上图左面,我们看到了"dapr.ex ...

  5. Servlet 3.1学习笔记

    Servlet 3.1学习笔记 参考文档 Servlet 3.1标准 什么是 Servlet ? Servlet 是基于 Java 平台的 Web 组件,由一个容器管理,能够生成动态内容. 什么是 S ...

  6. 序列化器中钩子函数源码分析、many关键字源码分析

    局部钩子和全局钩子源码分析(2星) # 入口是 ser.is_valid(),是BaseSerializer的方法 # 最核心的代码 self._validated_data = self.run_v ...

  7. Java的虚拟线程（协程）特性开启预览阶段，多线程开发的难度将大大降低

    高并发.多线程一直是Java编程中的难点,也是面试题中的要点.Java开发者也一直在尝试使用多线程来解决应用服务器的并发问题.但是多线程并不容易,为此一个新的技术出现了,这就是虚拟线程. 传统多线程的 ...

  8. openoffice将word转pdf中文乱码或消失的坑

    将windows系统下的中文字体文件(C:\Windows\Fonts),放到/usr/share/fonts下,必须重启openoffice.

  9. Nuxt 的介绍与安装

    Nuxt.js(一.介绍与安装) 1.为什么使用Nuxt 渐进式Vue.js框架给前后端分离带来无限的乐趣,越来越多的程序员选择Vue.在我们使用Vue框架的过程中不免会出现以下的一些问题: 如何更好 ...

  10. 背包问题dp的初步总结

    背包问题 01背包 给定的物体只有0个和1个,只有选与不选的划分,其状态转移方程时由i-1行推出,所以第二层循环是由j=m,递减到v[i]的. for(int i=1;i<=n;i++){ fo ...