基于Janus网关的WebRTC音视频客户端设计与实现

张远 刘伟 董显平 蔡树培

【摘要】    随着互联网技术的发展，实时音视频应用正逐步融入到人们日常的工作、学习、生活中，在会议协作、在线教育、智慧工厂、网络直播等行业取得了良好的效益。本文在介绍WebRTC技术的基础上，基于Janus网关设计并实现了一个在浏览器中运行的音视频客户端系统，具备音视频设备调试，音视频直播放映，基于SIP协议的Web话机，会议协作等功能，具有跨平台，即点即用，低成本，稳定可靠等特点，论证了使用Janus网关开发WebRTC应用的可行性。

【关键字】    WebRTC    Janus网关    音视频客户端

一、WebRTC技术简介

WebRTC即Web Real-Time Communication（网页实时通信），是一个Web浏览器原生支持的点对点进行实时音频、视频通信及通用数据传输的技术，提供了包括客户端音视频采集、编解码、网络传输、显示等一系列核心功能，为Web开发者提供了应用程序接口（API），支持Windows， Linux， MacOS， Android， iOS等多种操作系统间跨平台通信[1]。

二、Janus网关介绍

Janus网关（Janus Gateway）是由Meetecho公司开发的开源通用WebRTC服务器，提供了客户端间实时音视频通信，信令交互，RTP/RTCP数据包接力转发等功能，同时封装了WebRTC的编程接口，屏蔽了各个平台间WebRTC编程接口的差异，更便利于开发者进行各种音视频应用的开发[2]。

Janus网关使用C语言开发，代码架构分为核心模块，插件模块，插件编程接口模块，管理、监控模块，事件处理及日志编程接口等模块。其中核心模块实现了RTCP/RTP/SRTP/SCTP等数据包传输协议以及ICE/STUN/TURN等内网透传协议;插件模块实现Janus网关支持的各项功能，如回声测试、视频呼叫、聊天室等，同时支持第三方插件的开发;插件编程接口模块供开发者调用来开发各项业务功能，支持包括HTTP RestFUL、Websocket、RabbitMQ、MQTT、UnixSockets等多种协议，适用于各种软件开发平台与环境;管理、监控模块提供服务器运行状态、会话状态等详尽的信息，主要用于调试及监控用途。

三、音视频客户端设计

以下从技术框架及架构设计两个方面来介绍本音视频客户端的设计。

3.1技术框架

客户端使用PHP语言的Laravel框架来开发Web后台，数据库使用MySQL，Nginx作为Web服务器。Laravel是一个开源的PHP Web框架，旨在实现Web系统的MVC架构，其特点包括用户身份验证与授权，模块化的代码结构，提供了连接多种数据库的类库，提供了一系列的工具来协助应用程序的部署与维护，同时包含许多语法糖。前端使用VueJS框架来开发页面逻辑，页面UI样式使用ElementUI。VueJS是一套构建Web用户界面的渐进式MVVM框架，其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，其页面数据动态绑定的特性适合构建复杂的大型Web单页面应用。

3.2架构设计

下图为整个系统的架构设计图。整个系统包括Janus网关，Web应用服务，数据库及内网透传服务器四部分。

Janus网关使用了回声测试插件，媒体推流插件，SIP协议插件及视频会议插件。

回声测试插件用来检查客户端音频、视频设备的工作状态，连接到此插件的一个客户端将会接收到其发送的音频、视频媒体流，通过与本地音视频进行对比，即可发现音视频设备有没有正常工作。

媒体推流插件允许客户端收听及观看录制好的媒体文件及其他工具生成的实时媒体流，包括三种类型的媒体流，1.按需播放的媒体文件，2.直播形式的媒体文件，3.直播形式的其他工具生成的媒体流。

SIP协议插件允许WebRTC客户端向SIP服务器注册用户，用来支持浏览器用户与SIP话机间通过Janus网关进行音视频通信。

视频会议插件基于订阅发布的模式，让每一个会议室的用户都可以发布其音视频媒体流，同时会议室的其他成員会收到发布的通知并开始接收并在页面中播放，即视频会议插件支持从单主讲人-多听众到多方会议的多个应用场景。

Web应用后台连接MySQL数据库，持久化保存用户信息，设备信息，会议信息等多种数据，前端浏览器通过Websocket协议建立与Janus网关的长连接，用来发送用户的各项业务请求并接收Janus网关的响应展示给用户。

针对内网的网络环境还需要配置一台内网穿透服务器来穿透NAT网络进行点对点的音视频通信。Janus网关的核心层实现了STUN、ICE等协议栈来支持内网透传。

四、各项功能的实现

4.1音视频设备调试

此项功能需要在页面上放置两个

块状元素用来显示回传的文本消息以供比对。

在页面的mounted事件中触发初始化Janus的方法，在Janus API的init方法中实例化一个Janus对象，并把该对象赋值给页面全局变量供后续发送信令消息使用，在此过程成功的回调函数中绑定janus.plugin.echotest插件，绑定插件的方法中同时具备申请设备使用权限，媒体状态，WebRTC状态，慢连接，消息到达，本地媒体流就绪，对端媒体流就绪，数据通道就绪，数据到达，发生错误等回调，可以在各回调函数中执行相应的页面逻辑。关键点在于onlocalstream及onremotestream回调函数中通过Janus API的attachMediaStream方法把本地媒体流与对端回传媒体流分别绑定到本地及对端的

Janus对象的send方法用来向Janus API发送用户指令，如开启、关闭音视频流，切换媒体设备等操作，具体消息的格式内容参见Janus API文档，这里不做赘述。

下图2为音视频设备调试功能的页面截屏。

4.2放映厅

放映厅功能分为管理员和观看者两种角色，管理员可以上传、管理、删除媒体文件，观看者可以点选要观看的媒体在页面上进行播放。目前支持VP8编码的视频以及OPUS编码的音频文件的播放。

管理员上传音视频文件后向API发送create请求来创建媒体文件及第三方播放源点，同时附带管理员口令、类型、id、名称、描述信息、元数据等信息，收到异步的created响应即说明播放源点创建成功。

观看者页面视图需要放置一个

块状元素来展现Janus网关中配置好的音视频播放源点的列表，供选取播放。另外需要放置一个