基于 WebRTC 構建 Web SIP Phone

Moxmi 發布于2019-08-21 18:20 / 4383人閱讀

摘要：年月，被正式批準成為信號協議之一，并成為體系結構的一個永久單元。與一樣，是用于最主要的信令協議之一。一般來說，要么使用實體話機，要么在系統上安裝基于的客戶端程序。實體話機硬件成本高，基于的客戶端往往兼容性差，無法跨平臺，易被殺毒軟件查殺。

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 最后，你我共勉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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