之前已經看過了WebRTC的一些背景知識，現在就來看看要如何實作吧，首先我們要介紹的是getUserMedia，這個API是為了要讓broswer可以取得攝影機及麥克風的訊息，以前我們要使用攝影機通常都還是要安裝一些應用程式才能抓到攝影機及麥克風，可是getUserMedia不須安裝任何插件，哈哈，是不是很方便阿。
我們先來看一下getUserMedia這位主角的基本資料 :
Syntax
Parameter
- constraints : 設定media type
- successCallback : 當成功取得media stream所做的function
- errorCallback : 當發生錯誤時做此function
來看一下這個getUserMedia，它本身有三個parameters :
constraints是對這個media type所做的設定，像是要取得影像還是聲音等等...。
successCallback是成功取得media stream之後要做的function，像是我們可能會想要把影像放到<video>裡顯示在網頁上。
而最後一個就是我們最不想看到的errorCallback了，如果錯誤發生(QQ)就會執行這個，這裡面可以擺一些補救措施，例如視訊發生錯無時會撥放別的影片，也可以用log紀錄錯誤訊息。
Demo
這個demo所要做的就是要單純的把攝影機及麥克風所取得的資訊顯示在網頁上。
Step1
首先我們要先讓media stream在網頁上有一個<video>(舞台)，這樣它才能大顯身手 :
注意 : 一定要把autoplay設好，要不然影像會被定格喔。
Step2
再來就是這次的重點了，我們要設定好3個parameters，才能使getUserMedia乖乖運轉不出錯 :
這裡我們將constraints中的audio和video的屬性值都設為true，表示我們要取得audio和video，success中我們要將傳回來的stream放到<video>中，在這裡因為這個stream是一個Blob object，所以我們要將這個object轉成src可以吃的URL，這樣我們的<video>才不會拉肚子，最後我們在error中輸出log。
注意 : 有些人會懶得設定errorCallBack，但是我建議養成好習慣至少印出log，這樣在debug的時候會輕鬆很多唷(我自己就是血淋淋的例子@@)。
做到這裡先來讓它跑一下吧，應該會出現以下的
錯誤 :
會發生這個錯誤是因為跨遊覽器的問題，getUserMedia在不同的browser中有不同的名字，像在chrome叫做webkitGetUserMedia，在FireFox中叫做mozGetUserMedia，這種情形其實並不少見，因此就產生了
modernizr這個方便的小工具，它可以處理網頁跨平台所產生的問題，這邊我們先不使用
modernizr，我們使用下列判斷來處理這個問題 :
Step3
在browser上執行，你應該會看到下面的提醒 :
按下允許之後就會出現你帥氣(漂亮)的臉了。
結論
這次的demo讓我們學習到了要如何藉由browser去存取webcam及mic，而getUserMedia它傳回的是一個stream，所以你當然可以對它做一些處理(像是淡化、銳化、長寬等等)，但是這個主題的重點沒有放在那裏，所以我就先不說了，今天就先到這裡，再見嘍。
參考資料
