WebRTC 筆記

 Unknown  下午1:19  1 comment  Edit
什麼是 WebRTC?

WebRTC (Web RealTime Communication) 是 HTML5 標準所規範的一個項目，WebRTC 的目標是希望使用者在不需要額外裝設軟體與另外進行設定的情況下，就能進行點對點的視訊或檔案交換。
同時也能讓 Web 開發者可以簡單快速地打造 Realtime 應用的網站。具體 Demo Site 可以看 apprtc.appspot.com

WebRTC 的三個主要功能
MediaStream (aka getUserMedia)
從電腦中的 Camera / Mic 取得影像跟聲音，可以設定影像的解析度、開關影像或聲音，同時搭配其它套件加一些後製。

RTCPeerConnection
在雙方裝置中傳送影像跟畫面，把 MediaStream 取得的影像跟聲音傳給對方。
RTCPeerConnection做了很多事情，包含連接方式的管理（P2P / Relay) 、影像解碼、頻寛管理、傳輸安全。
請參考底下的 WebRTC 流程

RTCDataChannel
透過 RTCPeerConnection 傳送資料

WebRTC 相關名詞
STUN
透過 STUN 取得自己的對外IP，以便進行 P2P 連線

TURN
當無法進行 P2P 連線時，則雙方都連上 Turn Server，由 Turn Server 來幫忙雙方進行溝通

ICE
能檢測出目前網路是否能進行 P2P 連線。

WebRTC Server 由以下幾個部份組成
Room Server 用來管理通訊頻道
Signaling Server 用來協調兩端連線，該使用哪種方式
Turn Server 當兩方無法直接 P2P連線時，用來當作中間者幫忙建立兩端連線的橋樑
Turn Rest API 為了讓 Trun Server 能跟 Room 使用同一套身份驗證來管理 Turn 權限檢查，我們需要幫 Turn Server 建立一組 API ，讓 Turn Server 跟其它 Service 溝通。

WebRTC 流程



WebRTC Server 安裝

環境設定
資料夾：
~/WebRTC : 整個 Server 所使用的資料夾
~/WebRTC/apprtc : Room Server
~/WebRTC/collider_root : Signaling Server


安裝 Google App Engine SDK

$ unzip google_appengine_1.9.38.zip
$ echo "export PATH=$PATH:$PWD/google_appengine" >> ~/.bash_profile
$ source ~/.bash_profile
$ export PATH=$PATH:/path/to/google_appengine/

Make sure Python 2.7 is installed on your machine using the following command
$ /usr/bin/env python -V

安裝 Grunt

$ sudo apt-get install npm
$ sudo apt-get install nodejs-legacy
$ sudo npm -g install grunt-cli

安裝 Room Server

$ cd ~/WebRTC
$ cd apprtc
$ sudo npm install
$ sudo apt-get install python-webtest
$ grunt build —force

# 不知道為什麼沒有 apprtc.debug.js
$ cd ~/WebRTC/apprtc/out/app_engine/js/
$ wget https://apprtc.appspot.com/js/apprtc.debug.js

安裝 Go v.16

$ sudo tar -xvf go1.6.linux-amd64.tar.gz
$ sudo mv go /usr/local
$ echo "export PATH=$PATH:/usr/local/go/bin" >> ~/.bash_profile

安裝 Signaling Server

$ cd ~/WebRTC
$ mkdir -p collider_root
$ mkdir collider_root/src
$ echo "export GOPATH=$HOME/WebRTC/collider_root" > ~/.bash_profile
$ ln -s `pwd`/apprtc/src/collider/collider $GOPATH/src/
$ ln -s `pwd`/apprtc/src/collider/collidermain $GOPATH/src/
$ ln -s `pwd`/apprtc/src/collider/collidertest $GOPATH/src/
$ go get collidermain
$ go install collidermain

安裝 Turn Server

$ mkdir ~/WebRTC/coTurn
$ cd ~/WebRTC/coTurn
$ tar xvfz turnserver-4.4.1.2-debian-wheezy-ubuntu-mint-x86-64bits.tar.gz
$ sudo apt-get update
$ sudo apt-get install gdebi-core
$ sudo gdebi coturn*.deb

安裝 Turn Rest API

$ mkdir ~/WebRTC/coTurnRestApi
$ vim ~/WebRTC/coTurnRestApi/coTurn.js

var express = require('express');
var crypto = require('crypto');
var app = express();

var hmac = function(key, content){
    var method = crypto.createHmac('sha1', key);
    method.setEncoding('base64');
    method.write(content);
    method.end();
    return method.read();
};

app.get('/turn', function(req, resp) {

var query = req.query;
var key = '4080218913'; // ?~Y?~G~L?~Z~D key ?~X??~K?~E~H设置好?~Z~D, ?~N?~H??~W??~\~M?~J??~Y??~Z~Dkey?~[??~P~L

if (!query['username']) {
    return resp.send({'error':'AppError', 'message':'Must provide username.'});
} else {
    var time_to_live = 600;
    var timestamp = Math.floor(Date.now() / 1000) + time_to_live;
    var turn_username = timestamp + ':' + query['username'];
    var password = hmac(key, turn_username);

    return resp.send({
        username:turn_username,
        password:password,
        ttl:time_to_live,
        "uris": [
            "turn:192.168.24.163:3478?transport=udp",
            "turn:192.168.24.163:3478?transport=tcp",
            "turn:192.168.24.163:3479?transport=udp",
            "turn:192.168.24.163:3479?transport=tcp"
            ]
    });
}

});

app.listen('8081', function(){
    console.log('server started');
});

$ cd ~/WebRTC/coTurnRestApi
$ npm install express

設定 Turn Server 

$ sudo vim /etc/default/coturn

# TURNSERVER_ENABLED=1 -> TURNSERVER_ENABLED=1

# 產生 SSL 憑證
$ sudo openssl req -x509 -newkey rsa:2048 -keyout /etc/turn_server_pkey.pem -out /etc/turn_server_cert.pem -days 99999 -nodes

$ sudo vim /etc/turnserver.conf

listening-device=eth0
listening-port=3478
listening-ip=192.168.24.164
relay-device=eth0
relay-ip=192.168.24.164
Verbose
fingerprint
lt-cred-mech
use-auth-secret
static-auth-secret=trendtec
realm=trend-tec.com.tw
cert=/etc/turn_server_cert.pem
pkey=/etc/turn_server_pkey.pem

設定 Room Server

# 如果設定該檔案沒作用，試試看設定 ~/WebRTC/apprtc/src/app_engine/constants.py
$ vim  ~/WebRTC/apprtc/out/app_engine/constants.py 

TURN_BASE_URL = 'http://192.168.24.164:8081'
CEOD_KEY = 'trendtec'
WSS_INSTANCES = [{
    WSS_INSTANCE_HOST_KEY: '192.168.24.164:8089',
    WSS_INSTANCE_NAME_KEY: 'wsserver-std',
    WSS_INSTANCE_ZONE_KEY: 'us-central1-a'
}, {
    WSS_INSTANCE_HOST_KEY: '192.168.24.164:8089',
    WSS_INSTANCE_NAME_KEY: 'wsserver-std-2',
    WSS_INSTANCE_ZONE_KEY: 'us-central1-f'
}]

# 可以先不用設定這個，等確定有 ssl 相關的問題再來設定這個
# 如果沒有 https 的話，要修改  ~/WebRTC/apprtc/out/app_engine/apprtc.py

wss_url = 'wss://' + wss_host_port_pair + '/ws’ > wss_url = 'ws://' + wss_host_port_pair + '/ws'
wss_post_url = 'https://' + wss_host_port_pair > wss_post_url = 'http://' + wss_host_port_pair

啓動 coTurn

service coturn start

啓動 Turn Rest Api

$ cd ~/WebRTC/coTurnRestApi
$  node coTurn

啓動 Room Server

$ ~/WebRTC/google_appengine/dev_appserver.py --host=192.168.24.164 ./out/app_engine

啓動 Signaling Server

$GOPATH/bin/collidermain -port=8089 -tls=false -room-server=http://localhost:8080


WebRTC Client


參考文章

AppRTC - Google 提供的 Demo Sample Code

1 則留言:

  1. 林劭軒2021年4月12日 晚上10:07

    能稍微教我怎麼裝webRTC server嗎 看完完全沒有頭緒

    回覆刪除

訂閱： 張貼留言 (Atom)