2014年3月29日 星期六

WebRTC首部曲-getUserMedia

之前已經看過了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,所以你當然可以對它做一些處理(像是淡化、銳化、長寬等等),但是這個主題的重點沒有放在那裏,所以我就先不說了,今天就先到這裡,再見嘍。

參考資料

2014年3月28日 星期五

WebRTC前傳 : 介紹

最近因為老闆要我研究一下webRTC,所以我就花了一點時間去玩一下這個玩意兒,發現這東西真的是滿有趣的,又有一些心得,因此放上來分享給大家。

首先我先來大概地介紹一下webRTC好了,以下是webRTC的概述(節錄自wiki) :

WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice callingvideo chat, and P2P file sharing without plugins.

由上述我們知道webRTC是一個為了要在browser上不使用plugins,單單以browser就可以達到聊天、視訊或是p2p檔案的分享目的所開發的一個API。

WebRTC主要分為三個部分(API)(節錄自wiki) : 

  • getUserMedia : which allows a web browser to access the camera and microphone and to capture media
  • RTCPeerConnection : which sets up audio/video calls
  • RTCDataChannels : which allow browsers to share data via peer-to-peer

getUserMedia可以使browser接收webcam及mic的訊號,RTCPeerConnection可以處理點對點傳輸所需要的設定,而RTCDataChannels則是p2p的傳輸。


下面是WebRTC一些的介紹影片 :


WebRTC Demo



Google I/O 2012



Google I/O 2013



相容性(Can I use)


下次會使用WebRTC來實作一個簡單的視訊demo。

我是一個新手,也請各位不吝賜教^^,再見嘍。