WebRTC 概念筆記

前言

WebRTC是一個建立在瀏覽器協定上的新技術，讓視訊功能不用再安裝額外套件，便可以實現，而他也可以成為許多創新APP上，非常重要的一環，在搜尋許多文件後，發現網路上不乏許多概念清晰的資源，但較為散落，因此寫這一篇論述一下自己所理解的概念，順便將網路學習資源也都放上來！

WebRTC 重要的三大API

1. MediaStream：支持大多數瀏覽器，使用 getUserMedia() 獲取 audio and webcam stream。
2. RTCPeerConnection： Caller & Calle 必需互相傳送 Session Description，透過 Session Description Protocol 所定義的 offer 與 answer 來交換多媒體相關的資訊（例如解析度與 codec 等），而此交換的機制稱為 JavaScript Session Establishment Protocol（JSEP）。但由於可能會遇到 NAT 或者 防火牆的關係，因此要靠 ICE 來解決，因此可以使用 Stun/Turn Server來解決，Stun伺服器功能很簡單，就是要讓在 NAT 中的Client取得自己本身公開的 IP/Port，嘗試順序為 UDP -> TCP , Http -> Https ，若直接連線都失敗了，這時後 Turn Server 就會來扮演將全部資料轉送的角色，而前述所提的嘗試順序，會形成不同的連線狀態也稱為 ICE Candidate，然而在進行 p2p 連線時，就會進行這樣的嘗試過程，並在當中選擇最好的 ICE Candidate來使用，而常用的有 google's stun => stun:stun.l.google.com:19302。上述兩者所要最後則要透過信號通道/服務來傳送 RTCPeerConnection 會負責解決其餘的多媒體串流問題。
3. RTCDataChannel：可以使兩個 browser 直接傳送檔案，不用再透過Server當作中介。負責一般性資料之傳送。PubNub有提供相關服務：然而WebRTC協定很遺憾地沒有提供儲存機制，但有許多的資料例如：聊天的歷史記錄等等，因此也有像 PubNub 這種公司提供一些付費的Solution來給需要使用的人。

運作流程

我們可以去想像 WebRTC是兩個瀏覽器之間的互動，而呼叫者與被呼叫者的過程如下：

1. 欲呼叫的原瀏覽器(caller)會提供一個 offer 包含 session description
2. 被呼叫的瀏覽器(callee)會接收呼叫者的資訊並且回覆一個 session description
3. 呼叫的原瀏覽器(caller)得到呼叫對象的回覆後
4. 雙方開始交換 ICE candidate 候選人
5. 當足夠且據連線力的候選人出線後，就開始進行 Peer Connection

Signaling issues(有許多的方法)

1.  Codelab上有一份資源： bitbucket.org/webrtc/codelab 利用 socket.io 建設signaling server， 也在教材中運用 RTCPeerConnection 協定，實作一個簡易的視訊系統。
2. 網路上有許多開源的資源如 easyRTC (full stack) 或者是 Signalmaster (signaling server created for SimpleWebRTC)。
3. 此網站 apprtc.appspot.com 使用 XHR and the Google App Engine Channel API 來處理 signaling。
4. HTML5 Websocket - ex. WebSocket 簡單介紹與 jQuery 實作應用 , WebSocket 通訊協定簡介：比較 Polling、Long-Polling 與 Streaming 的運作原理。

參考

• WebRTC 入門教學（二）：以 RTCPeerConnection 建立 Peer-to-peer 連線
• What is WebRTC? - PubNub
• Getting Started with WebRTC - HTML5ROCKS
• WebRTC in the real world: STUN, TURN and signaling

Laravel 5.1 廣播事件 - 利用 redis & socket.io (事件實作)

主要參考 Step by Step Guide to Installing Socket.io and Broadcasting Events with Laravel 5.1 此篇教學，因此寫下步驟提醒自己，若要詳細的圖文配置請自行參閱。

Step1. 安裝新的 npm pakage & 更新 composer.json

• npm install express ioredis socket.io --save
• composer require predis/predis

Step2. 創建廣播事件

• php artisan make:event EventName

注意得去實作 ShouldBroadcast 介面，且注意又用 public 的方法去實作序列化&送資料。

Step3. 創建 View & Route

注意在client頁面 socket.io.js 的引入，若沒有可以去抓下來放 assets/js 或者直接用 cdn。

Step4. 建立 node Server 端 socket.js

redis 必須去 subsrcibe 與 EventName.php 相同的 channel。

修改 .env 的 BROADCAST_DRIVER，因為原本是用 pusher。

Step5. 啟動 node server&redis-server

• node socket.js
• redis-server --port 3001

另外也有一篇很棒的參考，而且是中文（Laravel 5.1 Events Broadcasting 實務練習）

Laravel 5.1 廣播事件 - 利用 redis & socket.io (環境設置)

筆記

最近因為專案需要學習了 Laravel，也因專案性質的緣故，因此可能會運用到如 socket.io 這一類在 node.js 上的功能，因此廣泛的 search 一下，發現原來在 Laravel 5.1 版釋出時，他的某一項新特色就包含了 Broadcasting， 而 Laravel 的重要元老Taylor Otwell也發表了相關的教學影片，同時在 L5.1穩定版釋出後在 Laracast 上釋出了一篇使用 Redis 替代原本 Pusher 的做法，非常吸引我因此做下此篇筆記。

前置動作

Laravel Homestead + vagrant 是學習 Laravel 的最佳利器，因此我選擇在此環境下建置，網路上也有許多方法（Getting Started with Laravel Homestead）透過 virtualbox 進行安裝。

Step 1.測試環境

安裝完畢後，在 Homestead 目錄使用 vargrant ssh 進入虛擬機，檢查分別檢查：

• npm -v  => 會回傳版本後
• redis-cli ping => 會回傳 pong

此時會對 homestead 好感度大大的提升（除了有讓環境跟其他的開發者一樣的優點，同時也解決了許多套件安裝的麻煩）！

Step 2. 創建新專案&站台

創建新的 laravel 專案，在本機端的對應 folder 利用指令創建專案

• composer create-project laravel/laravel your-project-name

修改 /etc/hosts，並加入以下

• 192.168.10.10 your-project-name.app

進入 homestead 虛擬機 serve 新站台

• serve your-project-name.app /home/vagrant/Code/path/to/public/directory 80

最後可以測試一下 your-project-name.app ，如果在瀏覽器出現歡迎頁面就成功了！