基于 WebRTC 构建 Web SIP Phone

Moxmi 发布于2019-08-21 18:20 / 4345人阅读

摘要：年月，被正式批准成为信号协议之一，并成为体系结构的一个永久单元。与一样，是用于最主要的信令协议之一。一般来说，要么使用实体话机，要么在系统上安装基于的客户端程序。实体话机硬件成本高，基于的客户端往往兼容性差，无法跨平台，易被杀毒软件查杀。

0 阅前须知

本文并不是教程，只是实现方案

我只是从WEB端考虑这个问题，实际还需要后端sip服务器的配合

jsSIP有个非常不错的在线demo, 可以去哪里玩耍，很好玩呢 try jssip

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最主要的信令协议之一。

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

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

2. 前端WebRTC实现方案

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

2.1 jsSIP

jsSIP是JavaScript SIP 库

功能特点如下：

可以在浏览器或者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的，这里主要介绍它的服务端支持情况。其他接口自己自行查阅

FreeSWITCH

Asterisk

OnSIP

FreeSWITCH Legacy

3. 平台考量

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

3.1 考量标准

跨平台

兼容性

体积

集成性

硬件要求

开发成本

3.2 考量表格

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

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

Js SIP Getting Started

120行代码实现浏览器WebRTC视频聊天

SIP协议状态码：

5 常见问题 422: "Session Interval Too Small"

jsSIP默认携带Session-Expires: 90的头部信息，如果这个超时字段小于服务端的设定值，那么就会得到如下422的响应。参见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 最后，你我共勉

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90363.html

JavaScript 是如何工作的:WebRTC 和对等网络的机制！

摘要：为了使连接起作用，对等方必须获取元数据的本地媒体条件例如，分辨率和编解码器功能，并收集应用程序主机的可能网络地址，用于来回传递这些关键信息的信令机制并未内置到中。所有特定于多媒体的元数据都使用协议传递。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 18 篇。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！如果你错过了前面的章节，可以在这里...

XBaron 2019-08-26 13:29 评论0 收藏0
WebRTC 及点对点网络通信机制

摘要：本质上允许网页程序创建点对点通信，我们将会在随后的章节中进行介绍。信令涉及网络检索和穿透，会话创建及管理，通信安全，媒体功能元数据和调制及错误处理。这样就会完全建立及激活节点间的网络套接字会话。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。这是 JavaScript 工作原理第十八章。概述何为 WebRTC ？首先，字面上已经...

Rango 2019-08-23 15:34 评论0 收藏0
这是一篇RTC（Real-time Communications，实时通信）的普及帖

摘要：随着通信的发展，实时音视频服务将进一步覆盖更多的生活场景。什么是实时通讯，我们很容易把和混淆。另外的延迟是毫秒级，在正常的网络情况下，延迟在之间，可以多方通话实时互动。这篇文章主要是围绕告诉大家什么是，能解决什么问题的普及贴。2020年初爆发的疫情，催生了在线教育、视频会议、远程医疗等实时音视频应用的大规模增长，也使得服务于这些场景背后的底层框架RTC技术站上了风口。早在 2010 年，Go...

Tecode 2022-06-28 19:00 评论0 收藏0
使用WebRTC搭建前端视频聊天室——入门篇

摘要：在处于使用了设备的私有网络中的主机之间需要建立连接时需要使用穿越技术。目前已经有很多穿越技术，但没有一项是完美的，因为的行为是非标准化的。什么是WebRTC？众所周知，浏览器本身不支持相互之间直接建立信道进行通信，都是通过服务器进行中转。比如现在有两个客户端，甲和乙，他们俩想要通信，首先需要甲和服务器、乙和服务器之间建立信道。甲给乙发送消息时，甲先将消息发送到服务器上，服务器对甲...

Carl 2019-08-21 12:11 评论0 收藏0