Yass.tsai   in Taipei

# [知識篇]WebRTC - JavaScript APIs

# 學習目標

主要了解 WebRTC 包含了哪些 JavaScript APIs，才能用來為網頁提供更多的多媒體應用，如：音視訊會議，檔案傳輸等。

# APIs

這邊會列舉幾個重點核心的API：

# 多媒體擷取

這個API算是在WebRTC 中能實現影音串流的重點，透過navigator.mediaDevices.getUserMedia()，能夠詢問使用者是否同意瀏覽器存取其系統所連接的攝影鏡頭及麥克風，以此來獲取多媒體數據。

HTML5時期誕生的getUserMediaAPI歷經時代的變動，在過去因每個瀏覽器都有各自的prefix且API使用方式也跟現在不同(如下)。

var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

後來才統一歸類到mediaDevices中(如下)。

var getUserMedia = navigator.mediaDevices.getUserMedia

mediaDevices主要提供能夠讓瀏覽器存取使用者系統所連接的媒體設備，如相機,麥克風,螢幕共享等， HTML5後出現的這類型API(如WebGL,GPS,Web Audio等)都必須通過使用者的同意才能夠取用，為了安全性因此有蠻多限制，但另一方面也為網頁帶來更多更廣的應用！！！

透過該API能夠存取 MediaStream中的多媒體數據，換句話說，也就能搭配getUserMedia來進行錄製影音檔的實作，而且是在網頁應用上，不需要透過任何的套件工具！ 並且還能對其數據進行加工處理後再傳送或是下載～

# P2P連線

其提供了建立,維持連線,監控狀態,關閉連接等方法。 WebRTC 建立溝通最核心的功能。想了解 peer-to-peer 的原理及運作方式，必定要好好看看這個 API 提供的功能。 了解其是如何連接,如何監控狀態,如何控制連線狀態也是學好 WebRTC 的基礎～

# 檔案傳輸

  • RTCDataChannel: 該API能夠在雙方使用者之間建立一個雙向的數據通道連接。

可以通過這雙向的數據通道傳送和接收任意數據，其作用有點類似WebSocket API， 但唯一不同的是該API傳送數據是不需要經過Server !! (有點像私密聊天

# 總結

了解到 WebRTC 中最為重要的幾個API:

接下來會針對個API來介紹與實作～

學習目標
APIs
多媒體擷取
P2P連線
檔案傳輸
總結