基于Janus网关的WebRTC音视频客户端设计与实现
基于Janus 网关的
WebRTC 音视频客户端设计与实现
□张远刘伟董显平蔡树培昆明塔迪兰电信设备有限公司
T  互联M  +技术
---------------------------------------------------------------internet Technology
【摘要】随着互联网技术的发展，实时音视频应用正逐步融入到人们日常的工作、学习、生活中，在会议协作、在线教育、智慧工厂、 网络直播等行业取得了良好的效益。本文在介绍WebRTC 技术的基础上，基于J a n u s 网关设计并实现了一个在浏览器中运行的音视 频客户端系统，具备音视频设备调试，音视频直播放映，基于SIP 协议的W eb 话机，会议协作等功能，具有跨平台，即点即用，低 成本，稳定可靠等特点，论证了使用Ja n u s 网关开发WebRTC 应用的可行性。【关键字】 WebRTC  J a n u s 网关音视频客户端
―、W eb R T C 技术简介
WebRTC  艮P  Web  Real-Time  Communication (网页实时通 信），是一个W eb 浏览器原生支持的点
对点进行实时音频、 视频通信及通用数据传输的技术，提供了包括客户端音视频 采集、编解码、网络传输、显示等一系列核心功能，为Web  开发者提供了应用程序接口（A PI )，支持Windows ，Linux ，
MacOS ，Android , iO S 等多种操作系统间跨平台通信⑴。
二、 J a n u s 网关介绍
Jan u s 网关（Janus  Gateway  )是由Meetecho 公司开发的 开源通用WebRTC 服务器，提供了客户端间实时音视频通信， 信令交互，RTP /R TC P 数据包接力转发等功能，同时封装了 W ebRTC 的编程接口，屏蔽了各个平台间WebRTC 编程接口 的差异，更便利于开发者进行各种音视频应用的开发[21。
Jan u s 网关使用C 语言开发，代码架构分为核心模块， 插件模块，插件编程接口模块，管理、监控模块，事件处 理及日志编程接口等模块。其中核心模块实现了 RTCP /RTP /
SRTP /SCTP 等数据包传输协议以及ICE /STUN /TURN 等内网
透传协议；插件模块实现Ja n u s 网关支持的各项功能，如回 声测试、视频呼叫、聊天室等，同时支持第三方插件的开 发；插件编程接口模块供开发者调用来开发各项业务功能， 支持包括 H TTPRestFUL 、Websocket 、RabbitMQ 、MQTT 、
UnixSockets 等多种协议，适用于各种软件开发平台与环境； 管理、监控模块提供服务器运行状态、会话状态等详尽的信 息，主要用于调试及监控用途。
三、 音视频客户端设计
以下从技术框架及架构设计两个方面来介绍本音视频客 户端的设计。
3.1技术框架
客户端使用P H P 语言的Laravel 框架来开发W eb 后台， 数据库使用MySQL ，Nginx 作为W eb 服务器。Laravel 是一个 开源的PHP  W eb 框架，旨在实现W eb 系统的MVC 架构，其 特点包括用户身份验证与授权，模块化的代码结构，提供了 连接多种数据库的类库，提供了一系列的工具来协助应用程 序的部署与维护，同时包含许多语法糖。前端使用V ueJS 框 架来开发页面逻辑，页面U I 样式使用ElementUI 。V ueJS 是
一
套构建W eb 用户界面的渐进式MVVM 框架，其核心库只
关注视图层，不仅易于上手，还便于与第三方库或既有项目 整合，其页面数据动态绑定的特性适合构建复杂的大型Web  单页面应用。
3.2架构设计
下图为整个系统的架构设计图。整个系统包括Ja n u s 网 关，W eb 应用服务，数据库及内网透传服务器四部分。
图1
系统架构设计图
Ja n u s 网关使用了回声测试插件，媒体推流插件，S IP 协
议插件及视频会议插件。
回声测试插件用来检查客户端音频、视频设备的工作状 态，连接到此插件的一个客户端将会接收到其发送的音频、 视频媒体流，通过与本地音视频进行对比，即可发现音视频 设备有没有正常工作。
媒体推流插件允许客户端收听及观看录制好的媒体文件 及其他工具生成的实时媒体流，包括三种类型的媒体流，1.按 需播放的媒体文件，2.直播形式的媒体文件，3.直播形式的 其他工具生成的媒体流。
S IP 协议插件允许W ebRTC 客户端向S IP 服务器注册用 户，用来支持浏览器用户与S IP 话机间通过Jarm s 网关进行 音视频通信。
视频会议插件基于订阅发布的模式，让每一个会议室的 用户都可以发布其音视频媒体流，同时会议室的其他成员会 收到发布的通知并开始接收并在页面中播放，即视频会议插 件支持从单主讲人-多听众到多方会议的多个应用场景。
W eb 应用后台连接MySQL 数据库，持久化保存用户 信息，设备信息，会议信息等多种数据，前端浏览器通过 Websocket 协议建立与Ja n u s 网关的长连接，用来发送用户的
45
互联网+技术internet Technology
各项业务请求并接收Ja n u s网关的响应展示给用户。
针对内网的网络环境还需要配置一台服务器来穿透N A T网络进行点对点的音视频通信。Ja n u s网关的核心层实现了STUN、IC E等协议栈来支持内网透传。
四、各项功能的实现
4.1音视频设备调试
此项功能需要在页面上放置两个<video>标签用来绑定本地及通过Ja n u s网关回传的音视频媒体流以供对比测试。同时需要放置一个<input>标签供用户输入要发送的文本消息，一个<div>块状元素用来显示回传的文本消息以供比对。
在页面的mounted事件中触发初始化Ja n u s的方法，在Janus A P I的in it方法中实例化一个Jan u s对象，并把该对象赋值给页面全局变量供后续发送信令消息使用，在此过程成功的回调函数中绑定hotest插件，绑 定插件的方法中同时具备申请设备使用权限，媒体状态，W ebRTC状态，慢连接，消息到达，本地媒体流就绪，对 端媒体流就绪，数据通道就绪，数据到达，发生错误等回调，可以在各回调函数中执行相应的页面逻辑。关键点在于onlocalstream及 onremotestream 回调函数
中通过Janus API 的 attachMediaStream方法把本地媒体流与对端回传媒体流分别绑定到本地及对端的<vid e〇>标签以供页面播放。
Jan u s对象的send方法用来向Janus A P I发送用户指令，如开启、关闭音视频流，切换媒体设备等操作，具体消息的格式内容参见Janus A P I文档，这里不做赘述。
下图2为音视频设备调试功能的页面截屏。另外需要放置一个<video>标签绑定远端媒体流在页面上播放音频与视频。
观看者视图中通过向Ja m is网关A P I发送list请求消息同步获取服务器中的播放源列表，在收到的响应中会包含当前可用的播放源信息，包含id、类型、描述、元数据等属性。观看者点击想看的视频会向A P I发送watch请求，附带 着播放源的I d即可收到服务器端传来的音视频流，绑定到<video>标签即可实现播放。
下图3为放映厅功能的页面截屏。
图3放映厅页面截屏
4.3 W eb SIP话机
此功能需要在页面上放置一个表单来让用户填写S IP服 务器地址，用户标识，用户名，密码，外显名称等S IP协 议注册所必需的信息，在点击注册到S IP服务器按钮时向
4.2放映厅
放映厅功能分为管理员和观看者两种角，管理员可以上传、管理、删除媒体文件，观看者可以点选要观看的媒体在页面上进行播放。目前支持VP8编码的视频以及OPUS编 码的音频文件的播放。
管理员上传音视频文件后向A PI发送create请求来创建媒体文件及第三方播放源点，同时附带管理员口令、类型、id、名称、描述信息、元数据等信息，收到异步的cheated响 应即说明播放源点创建成功。Jan u s网关A PI发送register请求注册SIP话机用户。
页面同时需要放置拨号表单，来让用户输入被叫方号码，选择拨打音频电话还是视频电话以及进行拨打、挂断、通话保持及通话拾回操作。还需要放置两个<vide〇>标签来绑定本地及对端音视频流进行播放。
拨打S I P电话时向Ja n u s网关A PI发送c a ll请求并附带目的端用户标识即可进行音视频呼叫。来电时会在jamis. plugin.sip插件的onmessage回调函数中接收到incomingcall 事件消息，此时页面播放来电提示音并弹窗展示来电号码及
观看者页面视图需要放置一个<div>块状元素来展现Jarm s网关中配置好的音视频播放源点的列表，供选取播放。通话Id，同时提供两个按钮来让用户接听或拒接来电。通过向A PI发送accept请求消息来接听来电，发送decline请求
46图2音视频设备调试页面截
截屏屏
互联网+技术
nternet Technology
消息来拒绝来电。通话中，向A P I 发送hold 及unhold 请求 消息即可保持、拾回进行中的通话。发送ha
ngup 请求即可 挂断进行中的通话。
另夕卜，还可以通过向Ja n u s 网关A P I 发送dtmf_info 请求 来发送DTMF 双音多频信号，发送info 或 message 请求向对 端发送S IP 文本消息。
下图4为Web  S IP 话机功能的页面截屏。4.4会议协作
此功能目前支持6方音视频会议，主要使用j anus.
plugin .videoroom 插件来实现。页面上需要放置6个〈video 〉 标签，1个用来绑定本地音视频，5个用来绑定其余与会者 的音视频。
会议主持人向Ja n u s 网关A P I 发送create 请求，附带会 议ID ，会议密码等属性信息来创建会议。发送edit 请求可以
编辑会议信息，发送destroy 请求可以删除会议。
会议参与者向Jarm s 网关A P I 发送list 请求可以获取所 有的会议Id ，发送join 请求附带会议Id ，身份等信息可以加 入已有的会议，publish 和impuhlish 请求可以发布及停止发 布本地音视频。发送leave 请求可以让与会者离开会议。
下图5为会议协作功能的页面截屏。五、结束语
本文介绍了基于开源软件Janus  W ebRTC 网关开发Weh  页面音视频客户端的系统架构设计及实现方法，完成了音视 频设备调试，放映厅，S IP 话机，会议协作四个功能模块， 论证了基于Jan u s 网关开发WebRTC 音视频客户端的可行性， 为开发类似功能的客户端提供了参考。后期将在此基础上扩 展用户管理，会议管理等业务功能，同时优化用户界面，打 造出一款独立的产品推向市场，持续满足用户需求。
图4 Web  S IP 话机页面截屏
图5 会议协作页面截屏
参考文献
[1] Google  WehRTC  team , https ://webrtr .org /. 2019-05-28 UTC .[2] Meetecho  Janus  team , https ://janus .conf .meetecho /docs /. 2021-03-22 UTC .
张远（1990-12)，男，汉族，河南襄城，中级工程师，研究方向：软件开发；
刘伟（1979-02月），男，汉族，云南昆明，中级工程师，研究方向：通信；蔡树培（1989-07)，男，白族，云南大理，高级工程师，研究方向：通信协议分析；董显平（1989-06)，男，拉祜族，云南临沧，高级工程师，研究方向：软件开发者质量保证。
47

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。