初探 WebRTC - 手把手建立線上視訊 (1)
前言
本系列主要介紹使用 WebRTC 搭配 Socket.io 建立一對一的視訊。
連結：
1. 初探 WebRTC — 手把手建立線上視訊 (1)
2. 初探 WebRTC — 手把手建立線上視訊 (2)
3. 初探 WebRTC — 手把手建立線上視訊 (3)
目錄
- 什麼是 WebRTC
- 取得本地影像聲音
- 輸出畫面
什麼是 WebRTC
Web Real-Time Communication 網頁即時通訊 的簡稱，在 2011 年被 Google 收購並開源，是個可以直接使用瀏覽器建立視訊的 API。
從 2011 到現在也過了 9 年有，來看看目前瀏覽器支援：
( 可以看到九成以上有支援 )
取得本地影像聲音
在跟妹子視訊前，我們先來看看取得本地影像聲音的 API：
剛開始就看到這一串先別慌張，怎麼不是我親近的 document 啊（？
先來看看 navigator，直翻可以叫做領航員，在 window 底下可以找到，列幾個方法看看：
navigator.online可以偵測瀏覽器是否在線上。navigator.userAgent可以取得瀏覽器的完整版本資訊。navigator.platform可以取得瀏覽器所在的系統平台 ( 作業系統 )。
看下來大概可以知道是用來取得「 使用者瀏覽器的各種資訊 」。
當上面的那串 code 執行後，瀏覽器會跳出詢問是否使用影像音訊：
輸出畫面
按下允許，我們還要做一件事才能把影像聲音顯示出來。先在 HTML 新增 video 標籤，順帶一提 playsinline 是為了讓某些瀏覽器的預設全螢幕改成內聯播放。
<-- HTML --><video autoplay playsinline width="200px" height="200px" id="myVideo">
</video>
接著延續一開始的 code，把 stream 灌入到我們的 video 容器裡就會顯示影像了。
如果發現影像是顛倒，自己的臉怎麼長得這麼醜的話 ( #
可以使用 CSS 反轉哦：
/* css */#myVideo {
transform: scaleX(-1);
}
最後再補充一下，一開始的 constraints 裡，可以做更進階的配置：
除了大小，還能設置手機前後鏡頭，以及傳輸速率等等，詳細請見 MDN。
後記
看完第一篇，我們學到了：
- 怎麼取得本地影像聲音，並輸出到畫面上。
關於 stream 的話，指的是串流媒體，可以讓多媒體檔案的壓縮封包像流水一樣傳送，也就是我們平常看 youtube 的時候會邊看邊讀取。如果沒有使用串流的話，就只能把檔案整包下載下來看。