基于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网关中配置好的音视频播放源点的列表，供选取播放。另外需要放置一个

观看者视图中通过向Janus网关API发送list请求消息同步获取服务器中的播放源列表，在收到的响应中会包含当前可用的播放源信息，包含id、类型、描述、元数据等属性。观看者点击想看的视频会向API发送watch请求，附带着播放源的Id即可收到服务器端传来的音视频流，绑定到

下图3为放映厅功能的页面截屏。

4.3 Web SIP话机

此功能需要在页面上放置一个表单来让用户填写SIP服务器地址，用户标识，用户名，密码，外显名称等SIP协议注册所必需的信息，在点击注册到SIP服务器按钮时向Janus网关API发送register请求注册SIP话机用户。

页面同时需要放置拨号表单，来让用户输入被叫方号码，选择拨打音频电话还是视频电话以及进行拨打、挂断、通话保持及通话拾回操作。还需要放置两个

拨打SIP电话时向Janus网关API发送call请求并附带目的端用户标识即可进行音视频呼叫。来电时会在janus.plugin.sip插件的onmessage回调函数中接收到incomingcall事件消息，此时页面播放来电提示音并弹窗展示来电号码及通话Id，同时提供两个按钮来让用户接听或拒接来电。通过向API发送accept请求消息来接听来电，发送decline请求消息来拒绝来电。通话中，向API发送hold及unhold请求消息即可保持、拾回进行中的通话。发送hangup请求即可挂断进行中的通话。

另外，还可以通过向Janus网关API发送dtmf_info请求来发送DTMF双音多频信号，发送info或message请求向对端发送SIP文本消息。

下图4为Web SIP话机功能的页面截屏。

4.4 会议协作

此功能目前支持6方音视频会议，主要使用janus.plugin.videoroom插件来实现。页面上需要放置6个

会议主持人向Janus网关API发送create请求，附带会议ID，会議密码等属性信息来创建会议。发送edit请求可以编辑会议信息，发送destroy请求可以删除会议。

会议参与者向Janus网关API发送list请求可以获取所有的会议Id，发送join请求附带会议Id，身份等信息可以加入已有的会议，publish和unpublish请求可以发布及停止发布本地音视频。发送leave请求可以让与会者离开会议。

下图5为会议协作功能的页面截屏。

五、结束语

本文介绍了基于开源软件Janus WebRTC网关开发Web页面音视频客户端的系统架构设计及实现方法，完成了音视频设备调试，放映厅，SIP话机，会议协作四个功能模块，论证了基于Janus网关开发WebRTC音视频客户端的可行性，为开发类似功能的客户端提供了参考。后期将在此基础上扩展用户管理，会议管理等业务功能，同时优化用户界面，打造出一款独立的产品推向市场，持续满足用户需求。

参  考  文  献

[1] Google WebRTC team. https：//webrtc.org/. 2019-05-28 UTC.

[2] Meetecho Janus team. https：//janus.conf.meetecho.com/docs/. 2021-03-22 UTC.