iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Software Development

新手也能打造網路電話系統-WebRTC入門與活用系列 第 15

Day 15 - 應用篇 - 建構WebRTC網路電話(架構總覽)

了解WebRTC的協商流程後,我們要練習打造一個網路電話系統。本篇會先介紹網路電話的功能、專案架構、系統流程,讓大家大致了解我們接下來要做的事情有哪些。

網路電話功能與系統流程

功能需求

  • 通話前顯示自己的影像
  • 通話後顯示對方的影像
  • 音視訊通話

系統流程-建立與加入通話

  1. UserA開啟瀏覽器輸入localhost:3001,以連線至Socket Server。
  2. Socket Server回傳網頁資源,讓UserA的瀏覽器呈顯網路電話系統的畫面。
  3. 系統向UserA取得媒體設備的權限。
  4. UserA向Socket Server建立Socket連線。
  5. UserA向Socket Server發送create事件,以建立通話。
  6. UserB加入通話的流程與上述的UserA一致,差別在於UserB會發送join事件,以加入通話。
  7. Socket Server向UserA、UserB發送start事件,以通知雙方可進行WebRTC協商流程。

系統流程-WebRTC協商

  1. UserA初始化RTCPeerConnection,並對其設定ICE Server的資訊及自己的媒體流,接著建立Offer類型的SDP,並將其設定為本地端的SDP。
  2. UserB初始化RTCPeerConnection,並對其設定ICE Server的資訊及自己的媒體流。
  3. UserA發送offer事件,將Offer類型的SDP藉由Socket Server傳遞給UserB。
  4. UserB將Offer類型的SDP設定為遠端的SDP,接著建立Answer類型的SDP,並將其設定為本地端的SDP。
  5. UserB發送answer事件,將Answer類型的SDP藉由Socket Server傳遞給UserA。
  6. UserA將Answer類型的SDP設定為遠端的SDP。
  7. UserA向ICE Server取得自己的ICE候選人資訊。
  8. UserA發送creator candidate事件,將自己的ICE候選人資訊藉由Socket Server傳遞給UserB。
  9. UserB將UserA的ICE候選人資訊儲存。
  10. UserB向ICE Server取得自己的ICE候選人資訊。
  11. UserB發送joiner candidate事件,將自己的ICE候選人資訊藉由Socket Server傳遞給UserA。
  12. UserA將UserB的ICE候選人資訊儲存。

取得候選人的時機不一定,因為這會依據ICE Server的狀況而有所不同。

系統流程-結束通話

  1. UserA向Socket Server終止Socket連線。
  2. Socket Server向UserB發送finish事件,以通知UserA已結束通話。
  3. UserB向Socket Server終止Socket連線。

開發前置準備

硬體設備

以下設備擇一即可。

  • 內建攝影機與麥克風的筆電
  • 桌機搭配網路攝影機與網路麥克風

開發工具

請大家先準備以下開發工具。

  • 開發環境:VSCode
  • 瀏覽器:Chrome
  • 網頁程式:HTML、CSS、JavaScript
  • 伺服器程式:NodeJS

專案架構

網路電話系統的專案架構如下,大家可以建立一個資料夾並新增以下的檔案。

套件安裝

建立完專案架構的檔案後,我們需要安裝專案會使用到的兩個套件。

  • NodeJS的Web API框架:Express
  • 即時通訊套件:Socket.IO

先開啟package.json檔案,在檔案中撰寫以下內容,以描述本專案的基本資訊與需要安裝的套件。

{
    "name": "internet_telephony",
    "version": "0.0.1",
    "description": "Internet Telephony based on WebRTC",
    "dependencies": {
        "express": "^4.17.1",
        "socket.io": "^4.1.2"
    }
}

開啟終端機,輸入以下指令來安裝套件。

npm install

安裝完成後,專案資料夾會產生一些新的檔案,這樣我們就可以準備來寫程式囉!


上一篇
Day 14 - 觀念篇 - WebRTC協商流程
下一篇
Day 16 - 應用篇 - 建構WebRTC網路電話(Client端)
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言