Flutter WebRTC 利用 Demo 實作 1對1 視訊通話

BoShi Lee 
Flutter Taipei
Published in
6 min readFeb 17, 2020

不知道大家有沒有在自己的專案實現過 1v1 音視訊通話呢,本篇利用 Web RTC 官方 Demo 實現基礎的 1v1 通話,讓大家少走一點冤枉路,省下時間思考人生。

本篇會使用自行在本地端架設 WebRTC Server ,讓手機端可以透過 App 連線到 Server 上,進行通話的測試。

要建置 Web RTC Server 要先理解 Peer to Peer (P2P) 連線的原理,可以先看以下的文章,本篇直接帶大家走一遍過程。

首先,我們要先建置 turn server,這裡使用 coturn 來架設

1. 建置 coturn server

安裝 conturn 前,先安裝相關 lib 以下指令,沒有 wget 請先 google 尋找安裝方法

資料來源:

使用 brew 安裝 coturn:

$ brew install coturn

安裝完後,設置 coturn ,打開 turnserver.conf 檔案 (coturn/examples/etc/turnserver.conf)

external-ip=192.168.88.99 // 設定為本機 ip

打開 turnserver:

$ turnserver -v -r 127.0.0.1:3478 -a -b turnuserdb.conf -c turnserver.conf -u myusername:mypass

測試 turn server 是否開啟成功,開啟以下網站測試:

在以下欄位輸入剛剛打上的 ip 使用者,以及密碼

出現 relay 代表正常連接了

2. 為本地端加上 ssl

這樣 chrome 才可以打開電腦攝影機

參考資料:

安裝方法參考以下專案連結:

$ brew install mkcert 
$ brew install nss # if you use Firefox

再執行:

$ mkcert install
$ mkcert 0.0.0.0

接著會產生兩個 pem 檔案 一個是證書,一個私鑰,這裡只供本地端使用,外部是無法使用的

3. 執行 Flutter-web-rtc-server

將專案 clone 下來

$ git clone https://github.com/cloudwebrtc/flutter-webrtc-server.git

cd 到此專案下執行,沒有 npm 請先 google 安裝:

$ npm install

到資料裡的 cert 下將剛剛產生的 pem 檔案複製至此 flutter-webrtc-server/certs,並更名為:

接著執行:

$ npm start

運行 sever 後,瀏覽器應該會自動跳出 https://0.0.0.0:8086/ 網頁

若正常執行,打開另一個瀏覽器應該輸入同樣的網址應該就可以看到自己了,以上網頁版的已經測試完成,可以試著使用電話 icon 進行視訊通話,如果想要繼續 App 端的,請繼續看下去。

4. App 端測試

將 demo 專案 clone 下來:

git clone https://github.com/cloudwebrtc/flutter-webrtc-demo.git

專案連結:

打開專案,在 signaling.dart 的 _port 改為 4442

var _port = 4442;

在 iceServers 加上剛剛開的 turn server

執行專案,打開 p2p call sample 應該就可以看到剛剛連接上的瀏覽器端,以及本身了:

萬歲!!🌈

本篇是一個快速開啟 Server ,並在本地端進行測試視訊通話的文章,以上範例都可能因為套件的更新而變動,如您無法進行測試,請聯繫我與我討論,謝謝!

--

--