实时音视频开发学习3 - 实现web端跑通知识储备

本节内容主要讲解如何快速使用SDK包，SDK集成方式，SDK目录结构解释以及在web端和小程序端进行跑通。

web端程序跑通流程

首先需要确保您的电脑是否支持WebRTC技术，目前主要在桌面版Chrome浏览器、桌面版Safari浏览器以及移动版的Safari浏览器上有较为完整的支持。其各操作系统对应浏览器的最低版本要求如下：

此外，您还可以通过WebRTC能力监测页面进行监测：https://cloud.tencent.com/document/product/647/32398

环境要求

安装最新版本的Chrome浏览器

TRTC桌面浏览器SDK依赖以下端口进行数据传输，请将其下列内容加入防火墙白名单：

ØTCP端口：8687

ØUDP端口：8000，8080，8800，843，443，16285

Ø域名：qcloud.rtc.qq.com

仅参考：https://blog.csdn.net/qq_2300688967/article/details/80356613

使用要求

需要注册腾讯云账号，并完成对应的实名认证，可以在腾讯云官网进行注册登录https://cloud.tencent.com/

创建流程

登录实时音视频控制台，选择【开发辅助】>【快速跑通Demo】。

单击【立即开始】，输入应用名称，例如TestTRTC1，单击【创建应用】。

下载对应的SDK包，可以在github上克隆，克隆方式通过git clone +地址，或者直接下载对应的zip文件进行解压即可。我这里下载的是web端的。

在对应的文件中找到GenerateTestUserSig.js改文件，按照下图修改SDKAPPI值和SECRETKEY值。如果一时点快了，可以在实时音视频>应用管理>应用信息>快速上手中查阅SECRETKEY。

最后运行index.html文件即可跑通

注意事项

1.本文生成的UserSig安全性差，仅用于本地测试，正确的UserSig签发方式是将UserSig的计算代码集成到您的服务端，并提供面向App的接口，在需要UserSig时由您的App向业务服务器发起请求获取动态UserSig。

2.目前桌面端Chrome浏览器支持TRTC桌面浏览器SDK的相关特性比较完整，因此建议使用Chrome浏览器进行体验。

3.客户端出现“RtcError:no valid ice candidate found”表明用户的环境配置未达标，请检查防火墙白名单是否添加成功。

4.出现"Join room failed result: 10006 error: service is suspended,if charge is overdue,renew it"则表明用户实时音视频的服务状态不可用。

SDK下载选择方式

精简版（TRTC），精简版仅包含TRTC和直播播放（TXLivePlayer）两项功能，对App的安装包体积增量最小，适合仅使用TRTC相关功能的客户。

专业版（Professional），专业版集合了包含TRTC在内的多个音视频相关的核心功能，包括超级播放器（Player+）、移动直播（MLVB）和短视频（UGSV）等，由于底层模块的高度复用，体积较小且可以避免符号冲突问题。

企业版（Enterprise），专业版加AI美颜特效组件，支持大眼、瘦脸、美容和动效贴纸、挂件等AI美颜特效能力。

各版本差异对照表：

项目集成方式

桌面浏览器端集成：

在平台已经支持的情况以及对应端口号、域名添加至了防火墙白名单中可以选择以下集成方式。

在项目中使用npm集成SDK包

npm install trtc-js-sdk --save

项目脚本中直接引入模块包

import TRTC from 'trtc-js-sdk';

在web页面脚本中直接引入

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

SDK目录结构详解

web端包目录结构

当你在web端跑通了程序之后，那么我们就需要了解整个一跑通的底层代码实现原理，首先需要了解程序包的目录结构，这里我新建了两个文件夹：

css：主要用于存放html文件的样式，其中index为登录主页样式，room为房间样式

Img：用于存放一些静态图片

Js-->base：用于存放一些第三方包，包括bootstrap、jquery、trtc、popper为trtc的支撑包以及lib-generate-test-usersing为HMAC-SHA256加密算法包

Js-->debug：GenerateTestUserSig文件用于生成签名

Js-->develop：主要存放业务逻辑代码，其中common为开发过程中的公共函数和全局变量，index为入口函数，presetting为初始化代码，rtc-client为登录客户对象，share-client为分享客户对象。

基础知识

bootstrap包基础

bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。支持预处理脚本，也能在多中设备中通过媒体查询进行一份代码快速匹配，此外，bootstrap还提供了全面、美观的文档供开发者使用。

获取方式

直接下载包：https://v3.bootcss.com/

npm导入：npm install bootstrap@4

Composer安装：composer require twbs/bootstrap

Grunt编译

首先安装好node环境，然后执行npm install -g grunt-cli全局安装grunt-cli，接着进入/bootstrap/根目录，然后执行npm install命令变换安装好对应依赖，最后执行grunt dist便能编译css和javaScript文件。

使用

本次demo使用的是bootstrap4进行开发，它依赖于jQuery、Popper.js以及JavaScript插件，能快速构建响应式移动设备的web站点。其具体使用请参考官网：https://v4.bootcss.com/docs/getting-started/introduction/

jQuery基础

在本次demo中存在一些对jQuery用法的理解，和ES6的一些用法。

jQuery选择器：

id：$(‘#id’)

class：$(‘.class’)

标签选择器：$(‘p’)

选择器查找：find()

first：选择第一个节点

需要注意的是，选择器selector是一个字符串，因此也能使用’+’的拼字符形式。

jQuery方法

on:监听事件，如click、input等

attr：设置属性

val:获取input内容

html:获取对应节点内容

hide:隐藏节点

show:显示节点

clone：克隆节点

回调函数理解

回调函数是一个作为变量传递给另外一个函数的函数，它在主体函数执行完之后才执行。因为函数实际上是一种对象，它可以存储在变量中，通过参数传递给另一个函数，也可以作为函数的返回结果。因此我们可以将一个函数作为参数或者作为另一个函数的返回结果，从而形成函数的回调。

作为参数

作为返回值

在demo中用于将登陆的信息作为callback函数的参数暴露出外面。

ES6基础

let：结合{}可用于块级作用域，不存在变量声明提升

const：声明的变量不能被修改，不能被修改引用空间，但能修改其属性的值，必须赋初始值。

箭头函数：()=>{}其this是继承自父执行上下文，换句话说就是指向最近的父函数。

say本质上属于obj的一个key值，因此箭头函数只是存在于对象obj中，而对象obj的父级函数就是window，因此输入11。

[...arg]:展开运算符，主要用于对数组的传输

async/await:异步执行，一种更符合的编写代码的风格

类class：通过关键字class + 类名既能构造出一个类，比javaScript通过构造函数创建的类使用更加简单。包含一个constructor构造器，其有一个属性options用于设置一些参数信息。类的方法可以直接写在类里面，并能结合async/await执行异步函数。在demo中就用于创建客户对象的类。

web端demo执行流程

看官在开始看源码时可以先自动屏蔽share-client.js文件，只需要集中注意力看如何实现登陆即可。其整个代码执行顺序大致可以按照以下划分

开始

首先创建html文件，里面包含一个登录界面login-root和一个聊天界面room-root。登录界面为bootstrap的card组件，包含顶部蓝条、logo以及用户名和房间号的input等，布局格式采用flex布局。聊天界面分为顶部的推出、分享，和content内容。content分为左右两个模块，其中左边主要包括成员列表和广告，右侧为视频网格和遮罩容器。

index入口文件

首先是创建presetting的类，并调用其中的init方法来实现对登录页面房间号roomID和用户userID的设置，并且之后的主逻辑路线是按照init方法进行展开。然后使用checkSystemRequirements检测浏览器是否支持TRTC对web SDK，如果不支持则需要下载最新的谷歌浏览器。接着是输出日志Logger，可以将日志等级设为TRACE、DEBUG、INFO、WARN、ERROR和NONE，并将打开日志上传enableUploadLog，用于协助客户定位线上问题。最后是获取摄像头getCameras和麦克风getMicrophones，但由于在用户未授权打开麦克风或者摄像头时label和deviceId可能为空，因此建议授权之后在调用。

Presetting预处理

预处理文件封装成了一个Presetting类，包含一个init和一个login方法，在init方法中分为两块，一块为房间id和用户id的随机生成，另一块为主逻辑业务路口setBtnClickFuc。login方法将获取到的签名、房间号和用户id作为参数进行函数回调。

签名获取：

腾讯云为云服务设计提供了一套对SDKAppID、UserID和EXPIRETIME的加密算法：HMAC-SHA256。这里主要用其所集成的库GenerateTestUserSig，它可以接受三个参数并返回GenerateTestUserSig实例，并使用其genTestUserSig方法可以生成对应的签名。但是，在项目中应将加密代码和密钥放在业务服务器上，在通过前端对服务器的请求来获取对应的签名。

执行setBtnClickFuc

在该函数中几乎包括了整个demo的所有逻辑业务，如登录、退出、打开或关闭音视频、屏幕分享、popper消息功能等。

登录：

登录首先会对表单进行一个验证，随后创建两个客户端对象，一个负责推送本地音视频流和接收远端流的RtcClient对象，另一个客户端对象负责推送屏幕分享流，但是不接收远端流。每一个类会包含一些属性，如登录标志isJoined_、remoteStreams_远端流存储数组、members_成员等，初始化好客户端对象的响应，如error错误报警、client-banned用户被提出、peer-join/peer-leave成员加入/退出、stream-added远端流增加、stream-subscribed订阅远端流等。

客户端对象创建完之后便开始进入房间和本地初始化，其流程如下：

首先根据房间id进入房间，并设置登录标志为“已登录状态”，接着从麦克风和摄像头采集本地音视频流，并初始化initialize本地音视频。由于在创建类时已经监听了stream-add和subscribe-stream，因此这里可以直接发布，同时设置好发布标志。最后播放远端流，同时将页面的主视频网格打开并给其添加一个mask_main的遮罩效果。

房间内业务逻辑

打开或者关闭摄像头：

设置全局变量isCamOn，默认为true，当点击摄像头时将视频网格中的video-btn属性src修改关闭状态，同时将成员列表中对应的member-video-btn修改为关闭状态，在将isCamOn设置为false，最后调用本地流的muteVideo。反之则将isCamOn设置为true并调用本地流的unmuteVideo方法。

打开或关闭麦克风：

设置全局变量isMicOn，默认为true，当点击摄像头时将视频网格中的mic-btn属性src修改关闭状态，同时将成员列表中对应的member-audio-btn修改为关闭状态，在将isMicOn设置为false，最后调用本地流的muteAudio。反之则将isMisOn设置为true并调用本地流的unmuteAudio方法。

退出房间：

首先应确保本地流在离开之前先取消远端发布，调用unpublish方法，并将iaPublished_回置为false。然后调用客户端的leave方法离开房间，同时停止本地流的发放并关闭close，将isJoined置false、localStream_置null。

离开房间时需要将状态恢复置进入时，包括将主视频隐藏、主视频和成员列表的音视频按钮切回最初的on状态，因为客户登录的时候就能直接显示，所以为on状态。然后还需清空成员列表信息，清除方式为对member成员进行遍历，判断每一个成员列表的父节点属性id是否不等于member-me，如果不等于就将其父亲的整个节点进行移除

最后隐藏房间布局打开登录布局。

分享流程：

我们在登录的时候就已经创建了分享类shareClient，同客户端相似，但是它只负责推送屏幕分享流而不接受远端流。类中也初始化了一些属性，如isJoined_是否进入分享、isPublished_是否发布分享流、localStream_分享本地流。接着也初始化处理了一些监听事件，封装了一个join进入发分享流的方法，以及一个离开分享流的leave方法。

创建分享流的方法同客户进入房间几乎一样，除了在创建本地流时，需设置audio为false，screen为true。

在进入分享时可以通过监听screen-sharing-stopped事件来判断是否停止分享，一旦停止分享就需要取消发布的远端流unpublish，退出分享leave，并关闭分享的本地流close。值得注意的是，分享的结束存在两种情况，一种情况是人为的点击分享会后取消，另种情况为退出房间也需要调用分享客户端的离开方法leave。

其它注意点

在官方demo中抽离了许多的公共方法，其中有一些值得注意的点：

交换两个节点的方法：

其思路主要是借助了两个div，然后将a、b两个节点错开，以div作为参考点，将节点a、b插入到对应的位置，最后移除这两个div，达到交换位置的效果。

兼容document.hidden：

主要是对各个浏览器做了一个能力监测，包括谷歌、IE、火狐等浏览器，最终返回document[hidden]方法，主要用于用户被踢出房间。

节流throttle：

节流可以确保函数在一定的时间内至多执行一次，核心思路为通过内部使用闭包来缓存上次触发函数的时间戳，然后检验本次函数执行时的时间戳和上次缓存的时间戳之差是否小于传入的时间值参数。主要用于点击分享按钮时，避免客户短时间内多次点击造成的影响。

注：更多内容请关注腾讯云的实时音视频