webRTC-基本介紹/MediaStream實作

網路即時通訊技術（WebRTC）是一個可以在瀏覽器之間進行影音流串和資料分享的通訊技術。作為一個標準規格，WebRTC 可以提供任何瀏覽器在不需要安裝外掛程式或第三方軟體下，分享應用程式的資料和進行電話會議 。例如早先的 Google Talk 的視訊聊天、Facebook 聊天與後來發展的 Google Hangouts 等，這些都是用來讓人及時溝通的工具，但是在以前若要使用這樣的功能都要另外下載與安裝一些外掛程式，而安裝這些外掛的程序通常都很麻煩，甚至容易出問題，而最重要的問題是使用者可能一開始就不想安裝它了。

另一方面，對於開發者而言，這樣的外掛程式在開發、除錯與維護的難度會比一般的程式還要高，相較於一般的網頁應用程式而言，通常會需要引入許多額外的技術才能達成這樣的需求。




WebRTC 元件是藉由 JavaScript APIs 來進行對等通訊。

實作功能主要區分為三大項: 

1. MediaStream API（即 getUserMedia）（代表音訊或視訊資料的流串）:負責從攝影機與麥克風取得影像與聲音的串流。
2. PeerConnection API（可以讓兩個或多個使用者進行網頁對網頁間的通訊）：負責連線的建立、資料加密與頻寬管理等。
3. DataChannel API（可以做即時遊戲、文字聊天和檔案傳輸等等）：負責傳送一般性的資料。

• MediaStream API（即 getUserMedia）：

1. 負責傳輸聲音與影像。
2. 包含多個tracks（通路）。
3. Obtain a MediaStream with navigator.getUserMedia()
   
   
   
   
    javascript Code:

由程式中可以發現，程式的最後一行呼叫了navigator.getUserMedia() 進行影像串流的擷取，而這個函數有三個參數，分別為：

1. constraints：各種參數設定的物件。
2. successCallback：執行成功的回呼函數（callback function）。
3. errorCallback：執行失敗的回呼函數。

此程式透過 constraints 設定只擷取影像（video: true），而不要擷取聲音（audio: false）。其餘兩個Callback函數中則定義了執行成功與失敗時要執行哪些動作，當擷取串流失敗時就會呼叫 errorCallback()，輸出一行錯誤訊息至 console 中，而如果成功了，就會呼叫 successCallback()。successCallback() 函數所傳入的 stream 參數是一個MediaStream，當取得了 MediaStream 這個多媒體串流之後，就直接把它指定給video，這樣就可以讓影像的串流直接顯示在瀏覽器上了。

• 應用：

1. Webcam Toy：使用 WebGL 對影像做一些特效處理。
2. FaceKat：以人臉位置來操控的小遊戲。
3. ASCII Camera：由影像產生 ASCII 影像。

基本上，MediaStream 基本上只有單純的多媒體串流擷取功能，如果要想將串流透過網路傳送出去，跟遠端的電腦進行視訊，就要配合另外一個RTCPeerConnection API 才行。

• 參考資料：

1. MDN
2. GTW
3. developers.google
4. google developers slide