Android IOS WebRTC 音視頻開發總結（八十五）-- 使用WebRTC廣播網路網路攝影機視頻（下）

標籤：

本文主要介紹WebRTC （我們翻譯和整理的，譯者：weizhenwei，校正：blacker），最早發表在【編風網】  

 

支援原創，轉載必須註明出處，歡迎關注我的公眾號blacker（ID：blackerteam 或 webrtcorgcn）。

 

回顧：Android IOS WebRTC 音視頻開發總結（八十三）-- 使用WebRTC廣播網路網路攝影機視頻（上） 

 

串連網路攝影機

 

正如上文所提，我們選用一款簡單的D-Link DCS-7010L網路攝影機。關鍵原因在於它支援RTSP協議，因此伺服器可以從網路攝影機中擷取視頻流。

 

我們使用插接線把網路攝影機和路由器串連起來。網路攝影機開啟後，通過DHCP協議識別路由器並擷取IP地址，在這裡是192.168.1.34。如果你開啟路由器設定，你會發現一台已串連裝置DCS 7010，這就是我們的網路攝影機。現在開始測試這台網路攝影機。

 

在瀏覽器中開啟192.168.1.34，進入網路攝影機的Web管理介面，密碼預設為空白。

 

 

如你所見，在管理面板上網路攝影機的視頻流播放地很流暢。儘管如此，我們還是能夠看到抖動現象。這正是我們要用WebRTC修正的問題。

 

配置網路攝影機

 

首先，我們禁用認證功能。基於測試目的，我們允許任何人觀看廣播。具體設定是，進入Setup－Network頁面，設定Authentication為Disable。

 

在同一設定介面，我們檢查RTSP協議的連接埠是否正確，預設是554。輸出視頻格式在檔次中確定。你可以設定為3檔次，但是我們使用第一個live1.sdp，它已經分別為音視頻配置H.264和G.711。這裡所做的任何設定都可以通過Setup－Audio and Video修改。

 

 

現在我們可以通過RTSP測試網路攝影機。開啟VLC播放器(或其它任何支援RTSP協議的播放器，例如QuickTime，Window Media Player，RealPlayer，等等)，開啟URL對話方塊設定網路攝影機的RTSP地址：rtsp://192.168.1.34/live1.sdp。

 

 

OK，它如預期那樣工作。網路攝影機通過RTSP發送視頻流到播放器。

 

 

此外，視頻流播放非常流暢，沒有任何瑕疵。我們期待WebRTC能有同樣表現。

 

安裝伺服器

 

至此，網路攝影機已經安裝完畢，並且用案頭播放器進行過測試。我們已經準備好使用伺服器進行廣播。藉助於whatismyip.com網站可以確定網路攝影機的外網IP地址是178.51.142.223。現在需要配置路由器，把所有經過554連接埠發送的RTSP請求重新導向到網路攝影機。

 

開啟路由器的對應設定頁面：

 

 

並使用telnet檢查外網IP地址和RTSP連接埠：

 

telnet 178.51.142.223 554

 

確定連接埠能夠響應請求後，我們開始安裝WebRTC伺服器。

 

託管服務我們使用Amazon EC2 CentOS 64位伺服器。為減少效能問題，我們選擇配置一個VCPU的m3.medium執行個體：

 

 

當然，可供選擇的還有Linode和DigitalOcean，但這次我們決定使用Amazon。為使樣本工作起來，我們需要在AmazonEC2控制台上配置連接埠，WebRTC和RTSP/RTP都需要這些連接埠。如果你也想測試樣本，那麼要確保Amazon接收流量面板配置如下：

 

 

DigitalOcean的配置更加簡單，你僅需要在防火牆關閉這些連接埠，或者完全禁用。根據我們使用DigitalOcean的經驗，它們提供靜態IP，不會和NAT混淆在一起。因此，DigitalOcean並不需要像Amazon那樣配置連接埠。

 

作為向WebRTC廣播RTSP/RTP的服務端軟體，我們使用WebRTC媒體廣播伺服器軟體Flashphoner。該流媒體伺服器很像可以通過Flash廣播RTSP/RTP 的Wowza。唯一不同的是Flashphoner通過WebRTC傳輸串流媒體，而不是Flash。從技術上說，這意味著瀏覽器和伺服器之間通過DTLS通訊，建立SRTP會話，傳送VP8編碼的視頻流到觀眾面前。

 

接下來安裝伺服器需要的SSH。

 

完整的伺服器軟體安裝清單如下：

 

1.下載伺服器軟體
$wget flashphoner.com/downloads/builds/WCS/3.0/x8664/wcs3_video_vp8/FlashphonerMediaServerWebRTC-3.0/FlashphonerMediaServerWebRTC-3.0.868.tar.gz

2.提取軟體
$tar -xzf FlashphonerMediaServerWebRTC-3.0.868.tar.gz

3.安裝軟體

$cd FlashphonerMediaServerWebRTC-3.0.868
$./install.sh

設定管理員的外網IP地址：54.186.112.111，內網IP地址：172.31.20.65。

4.開啟服務

$service webcallserver start

5.檢查日誌

$tail — f/usr/local/FlashphonerWebCallServer/logs/server_logs/flashphoner.log

6.確認服務正在運行

$ps aux | grep Flashphoner

7.裝並開啟apache服務

$yum install httpd
$service httpd start

8.下載web檔案並放置到apache預設目錄/var/www/html

cd /var/www/html
$wget github.com/flashphoner/flashphoner_client/archive/wcs_media_client.zip
$unzip webrtc_media_client.zip

9.在設定檔flashphoner.xml中設定管理員的IP地址。

10.關閉防火牆

$service iptables stop

 

理論上說，你應該在第10步配置防火牆連接埠和規則，而不是關閉它。但基於測試目的，我們直接把防火牆關掉。

 

設定管理員

 

我們的WebRTC廣播服務架構如下：

 

 

我們已經配置好圖中的節點，現在我們需要配置節點之間的箭頭串連。

 

Web用戶端負責瀏覽器和WebRTC之間互聯，可以從github下載源碼。JS，CSS和HTML檔案在安裝期間上傳到／var/www/html目錄(看上節第九步)。

 

瀏覽器－伺服器通訊在flashphoner.xml中配置，我們在該檔案中寫入伺服器的外網IP地址，因此Web用戶端可以通過HTML5 websocket串連WebRTC伺服器。

 

OK，我們已經配置好伺服器，現在讓我們測試一下：

 

在瀏覽器中開啟Web用戶端索引頁面index.html：

 

http://54.186.112.111/wcs_media_client/?id=rtsp://webrtc-ipcam.ddns.net/live1.sdpwebrtc-ipcam.ddns.net是一個從noip.com動態網域名稱伺服器獲得的免費網域名稱，它能夠串連到我們的外網IP地址。並且，我們已經配置路由器，根據NAT規則把發送到192.168.1.34的RTSP請求進行重新導向。

 

參數id=rtsp://webrtc-ipcam.ddns.net/live1.sdp設定視頻流的URL。WebRTC伺服器從網路攝影機擷取視頻流，處理後用WebRTC廣播到瀏覽器。你的路由器可能支援DDNS，如果不支援的話，可以使用網路攝影機選項：

 

 

下面是在路由器中設定DDNS：

 

 

最後，我們來測試系統查看結果。

 

測試

 

連結從瀏覽器開啟，串連到WebRTC伺服器。伺服器發送請求到網路攝影機以擷取視頻流。這個過程需要幾秒鐘時間。

 

 

瀏覽器通過WebSocket串連到伺服器，然後伺服器通過RTSP向網路攝影機發送請求，得到用RTP封裝的H.264流，進而轉碼為VP8/SRTP格式，最終在WebRTC相容瀏覽器上進行播放。

 

 

經過一小段延遲後，我們可以看到熟悉的畫面：

 

 

視頻底部顯示視頻流的URL地址，你可以複製後在另一個瀏覽器中開啟。

 

確認WebRTC在工作

 

如果我們作弊怎麼辦？即來自網路攝影機的視頻仍然通過HTTP傳輸。我們不要只相信看到的視頻流，更應該去核查接收流量的類型。再次運行Wireshark和Chrome調試工具，在Chrome控制台可以看到如下內容：

 

 

這一次沒有資料包進進出出，也沒有通過HTTP協議傳輸的圖片。現在我們看到的是Websocket資料幀，大部分是保持Websocket會話連通性的ping/pong幀。比較有趣的幀是connect，prepareRtspSession和onReadyToPlay－——串連伺服器正是要經曆這些階段：首先建立Websocket串連和會話，然後播放請求內容。

 

下面是chrome://webrtc-internals所示內容：

 

 

如所示，來自網路攝影機的視頻碼率為1Mbps。也有發送流量，主要是RTCP和ICE資料包。瀏覽器和Amazon伺服器之間的RTT在300ms左右。

 

現在我們來看Wireshark，它清楚顯示來自伺服器的UDP流量。圖片資料包大小為1468位元組，這就是WebRTC流量。特別地，我們可以從瀏覽器中看到傳輸VP8視訊框架的SRTP資料包。另外，我們也可以看到一些STUN請求，這是WebRTC在仔細檢查串連狀況。

 

 

值得一提的是視頻播放延遲很低。WebRTC工作在SRTP/UDP之上，相比於HTTP、RTMP和其它基於TCP的協議，這是最快的發送資料包方法。因此，可見延遲是RTT 、緩衝區時延、解碼時延、播放時延的總和。

 

從視覺上講，裸眼沒有感覺到任何延遲，這表示延遲低於500ms。

 

下一個測試是串連其他觀眾。我們開啟10個Chrome視窗，每個視窗都播放視頻，這讓Chrome變得遲鈍。在另一台電腦上開啟第11個視窗，視頻播放仍然很流暢。

 

行動裝置的WebRTC

 

正如你所知，Android平台上的Chrome和Firefox也都支援WebRTC。讓我們檢查WebRTC廣播在這裡是否工作：

 

 

如所示，一部HTC智能機在Firefox上播放來自網路攝影機的視頻。和案頭系統相比，行動裝置上的視頻播放同樣很平滑流暢。

 

結論

 

作為結果，我們能夠以最小代價把網路攝影機的視頻用WebRTC廣播到瀏覽器。實現這一切不需要雨中跳舞或者巫術，也不需要火箭科學，僅基礎Linux和SSH知識即可。

 

廣播品質完全可以接受，裸眼感覺不到延遲。

 

我們可以得出結論：基於瀏覽器的WebRTC廣播完全值得考慮，正如在我們的情境下，WebRTC不是附件或者外掛程式，而是一個在瀏覽器中播放視頻的真正平台。

 

為什麼WebRTC沒有被廣泛應用

 

主要障礙可能在於缺少視頻轉碼器。WebRTC社區和廠商應該努力把H.264整合到WebRTC中。我們不能說VP8不好，但是為什麼要忽視數百萬計已經使用H.264的相容裝置和軟體呢？該死的專利！ 

    

第二個原因是只有部分瀏覽器支援WebRTC。IE和Safari瀏覽器仍然不支援，因此我們不得不用其它辦法比如使用webrtc4all外掛程式。

 

在未來我們希望能夠看到很多不需要轉碼的解決方案，和很多能夠從不同裝置播放視頻流的瀏覽器。

 

譯者：weizhenwei，具體詳見:【編風網】

 

Android IOS WebRTC 音視頻開發總結（八十五）-- 使用WebRTC廣播網路網路攝影機視頻（下）