一、数据统计

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

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

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

  • 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. carsim2016事件如何设置

    #carsim2016事件设置# 完成以下功能:车速低于60km/h时,加速,设置节气门开度为0.8,制动主斜体样式缸压力设为0:车速高于120km/h时,制动,设置节气门开度为0,制动主缸压力设置为 ...

  2. AWS 6R

    "The 6 R's": 6 Application Migration Strategies "The 6 R's": 6 Application Migra ...

  3. h5页面跳转小程序

    2020年以前, 只能通过 web-view内嵌h5跳转小程序,现在  可以直接跳了!!!!!!  官方文档:https://developers.weixin.qq.com/doc/offiacco ...

  4. 【零碎小bug系列】windows下的回车和换行符，cmd（telnet）上输出不左对齐

    cmd(telnet)上输出不左对齐,而是有莫名其妙的空格 目录 cmd(telnet)上输出不左对齐,而是有莫名其妙的空格 背景 解决 细究 背景 在cmd上使用telnet连接本地端口的服务器时, ...

  5. golang 中 sync.Mutex 的实现

    mutex 的实现思想 mutex 主要有两个 method: Lock() 和 Unlock() Lock() 可以通过一个 CAS 操作来实现 func (m *Mutex) Lock() { f ...

  6. nginx配置后端映射(反向代理proxy_pass)

    说明:配置反向代理proxy_pass和location无关,location后面加不加 / 都可以 1.配置 proxy_pass 时,当在后面的 url 加上了 /,相当于是绝对路径,则 Ngin ...

  7. k8s TLS bootstrap解析-k8s TLS bootstrap流程分析

    当k8s集群开启了TLS认证后,每个节点的kubelet组件都要使用由kube-apiserver的CA签发的有效证书才能与kube-apiserver通信:当节点非常多的时候,为每个节点都单独签署证 ...

  8. NodeJs学习日报day8——接口编写

    今天看了黑马NodeJs中关于接口编写以及跨域问题的视频

  9. Java学习day5

    API即应用程序编程接口,Java所包含的方法以及类很多,如果要使用他们就得了解这些的API如何使用,因为API多而复杂,我们可以通过帮助文档查询 与c/c++类似,Java通过Scanner类就可以 ...

  10. eNSP路由器启动#号问题排查

    1.删除拖出来的设备,重新拖出来一台---我用过[有时候好使] 2.确保Ensp的设置-工具-Virtual Box安装目录是否正确--我也遇到过[尤其是卸载掉Virtual Box重装之后] 3.确 ...