基于 WebRTC 构建 Web SIP Phone

一时失言乱红尘 2021-09-18 16:08 742阅读 0赞

# 0 阅前须知 #

*  本文并不是教程，只是实现方案
 *  我只是从WEB端考虑这个问题，实际还需要后端sip服务器的配合
 *  jsSIP有个非常不错的在线demo, 可以去哪里玩耍，很好玩呢 [try jssip ][try jssip]

![图片描述][868860309-5a3dfd48415d8_articlex]

# 1. 技术简介 #

>  *  `WebRTC`: WebRTC，名称源自`网页即时通信`（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准
>  *  `SIP`: `会话发起协议`（Session Initiation Protocol，缩写SIP）是一个由IETF MMUSIC工作组开发的协议，作为标准被提议用于创建，修改和终止包括视频，语音，即时通信，在线游戏和虚拟现实等多种多媒体元素在内的交互式用户会话。2000年11月，SIP被正式批准成为3GPP信号协议之一，并成为IMS体系结构的一个永久单元。SIP与H.323一样，是用于VoIP最主要的信令协议之一。

![图片描述][1464527354-5a3dfb7d9710b_articlex]

一般来说，要么使用实体话机，要么在系统上安装基于sip的客户端程序。实体话机硬件成本高，基于sip的客户端往往兼容性差，无法跨平台，易被杀毒软件查杀。

而`WebRTC`或许是更好的解决方案，只要一个浏览器就可以实时语音视频通话，这是很不错的解决方案。WebSocket可以用来传递sip信令，而WebRTC用来实时传输语音视频流。

# 2. 前端WebRTC实现方案 #

其实我们不需要去自己处理WebRTC的相关方法，或者去处理视频或者媒体流。市面上已经有不错的模块可供选择。

## 2.1 [jsSIP][] ##

`jsSIP是JavaScript SIP 库`

![图片描述][2545473248-5a3dfbbaa6ca5_articlex]

功能特点如下：

*  可以在浏览器或者Nodejs中运行
 *  使用WebSocket传递SIP协议
 *  视频音频实时消息使用WebRTC
 *  非常轻量
 *  100%纯JavaScript
 *  使用简单并且具有强大的Api
 *  服务端支持 OverSIP, Kamailio, Asterisk, OfficeSIP，reSIProcate，Frafos ABC SBC，TekSIP
 *  是RFC 7118 and OverSIP的作者写的

下面是使用JsSIP打电话的例子，非常简单吧

// Create our JsSIP instance and run it:
    
    var socket = new JsSIP.WebSocketInterface('wss://sip.myhost.com');
    var configuration = {
      sockets  : [ socket ],
      uri      : 'sip:alice@example.com',
      password : 'superpassword'
    };
    
    var ua = new JsSIP.UA(configuration);
    
    ua.start();
    
    // Register callbacks to desired call events
    var eventHandlers = {
      'progress': function(e) {
        console.log('call is in progress');
      },
      'failed': function(e) {
        console.log('call failed with cause: '+ e.data.cause);
      },
      'ended': function(e) {
        console.log('call ended with cause: '+ e.data.cause);
      },
      'confirmed': function(e) {
        console.log('call confirmed');
      }
    };
    
    var options = {
      'eventHandlers'    : eventHandlers,
      'mediaConstraints' : { 'audio': true, 'video': true }
    };
    
    var session = ua.call('sip:bob@example.com', options);

## 2.2 [SIP.js][] ##

sip.js项目实际是fork自jsSIP的，这里主要介绍它的服务端支持情况。其他接口自己自行查阅

![图片描述][4259198624-5a3dfbd9f1065_articlex]

*  FreeSWITCH
 *  Asterisk
 *  OnSIP
 *  FreeSWITCH Legacy

# 3. 平台考量 #

![图片描述][825632465-5a3dfbf123cf9_articlex]

由于WebRTC对浏览器有较高的要求，你可以看看下图，哪些浏览器支持WebRTC, 所有IE浏览器都不行，chrome系支持情况不错。

## 3.1 考量标准 ##

*  跨平台
 *  兼容性
 *  体积
 *  集成性
 *  硬件要求
 *  开发成本

## 3.2 考量表格 ##

<table> 
 <thead> 
  <tr> 
   <th>种类</th> 
   <th>适用平台</th> 
   <th>优点</th> 
   <th>缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基于electron开发的桌面客户端</td> 
   <td>window, mac, linux</td> 
   <td>跨平台，兼容好</td> 
   <td>要下载安装，体积大（压缩后至少48MB），对电脑性能有要求</td> 
  </tr> 
  <tr> 
   <td>开发js sdk</td> 
   <td>现代浏览器</td> 
   <td>体积小，容易第三方集成</td> 
   <td>兼容差(因为涉及到webRTC, IE11以及以都不行，对宿主环境要求高)，客户集成需要开发量</td> 
  </tr> 
  <tr> 
   <td>开发谷歌浏览器扩展</td> 
   <td>谷歌浏览器</td> 
   <td>体积小</td> 
   <td>兼容差（仅限类chrome浏览器）</td> 
  </tr> 
 </tbody> 
</table>

# 4 参考文档 and 延伸阅读 and 动手实践 #

*  [Js SIP Getting Started][]
 *  [120行代码实现 浏览器WebRTC视频聊天][120_ _WebRTC]
 *  [SIP协议状态码：][SIP]

# 5 常见问题 #

## 422: "Session Interval Too Small" ##

jsSIP默认携带`Session-Expires: 90`的头部信息，如果这个超时字段小于服务端的设定值，那么就会得到如下422的响应。参见[SIP协议状态码：][SIP], 可以在call请求中设置`sessionTimersExpires`, 使其超过服务端的设定值即可

call(targer, options
    )
    option.sessionTimersExpires
    Number (in seconds) for the default Session Timers interval (default value is 90, do not set a lower value).

# 6 最后，你我共勉 #

![clipboard.png][]

[try jssip]: https://tryit.jssip.net/
[868860309-5a3dfd48415d8_articlex]: /images/20210726/12944273a0f04e438b0ec3fd290e6517.png
[1464527354-5a3dfb7d9710b_articlex]: /images/20210726/a0e13a107c8d4dda822d73d918892866.png
[jsSIP]: http://jssip.net/
[2545473248-5a3dfbbaa6ca5_articlex]: /images/20210726/3951a06c1a3549f9974e2c86deaf2a91.png
[SIP.js]: https://sipjs.com/
[4259198624-5a3dfbd9f1065_articlex]: /images/20210726/bdcc5acf451d4139bdbd9bd2bffa91d5.png
[825632465-5a3dfbf123cf9_articlex]: /images/20210726/c88eede83e3c4beca8beeb393826d134.png
[Js SIP Getting Started]: http://jssip.net/documentation/3.1.x/getting_started/
[120_ _WebRTC]: https://segmentfault.com/a/1190000011848805
[SIP]: https://en.wikipedia.org/wiki/List_of_SIP_response_codes#4xx%E2%80%94Client_Failure_Responses
[clipboard.png]: /images/20210726/388d3708652e469b92e6fb7a89be3dbb.png