這裡介紹如何使用 WebRTC 在網頁中擷取本地端的多媒體影像串流,包含聲音與影像。
在過去有許多的網頁應用程式都有即時溝通(real time communication,簡稱 RTC)的需求,也就是遠端視訊聊天的功能,例如早先的 Google Talk 的視訊聊天、Facebook 聊天與後來發展的 Google Hangouts 等,這些都是用來讓人及時溝通的工具,但是在以前若要使用這樣的功能都要另外下載與安裝一些外掛程式,而安裝這些外掛的程序通常都很麻煩,甚至容易出問題,而最重要的問題是使用者可能一開始就不想安裝它了。
在另一方面,對於開發者而言,這樣的外掛程式在開發、除錯與維護的難度會比一般的程式還要高,相較於一般的網頁應用程式而言,通常會需要引入許多額外的技術才能達成這樣的需求。
MediaStream
(即 getUserMedia
):從攝影機與麥克風取得影像與聲音的串流。RTCPeerConnection
:負責連線的建立、資料加密與頻寬管理等。RTCDataChannel
:負責傳送一般性的資料。有了這幾項 API 所提供的功能,瀏覽器就可以直接進行視訊聊天,以下我們介紹這三個 API 函數的使用方式。
MediaStream
(即 getUserMedia
)MediaStream
API 代表一個多媒體(影像與聲音)的同步串流(synchronized stream),開發者可以利用這個功能擷取本地端的多媒體串流,並顯示在瀏覽器上或是進行進一步的傳送或處理。
我們直接來看一個 simpl.info 的範例,您可以直接用瀏覽器開啟它,當這頁面開啟時,瀏覽器會詢問您是否允許使用相機,請選擇「允許」。
啟用相機的功能之後,您應該就可以在畫面上看到即時的影像了,接著我們來看他的 JavaScript 程式碼:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; var constraints = {audio: false, video: true}; var video = document.querySelector("video"); function successCallback(stream) { window.stream = stream; // stream available to console if (window.URL) { video.src = window.URL.createObjectURL(stream); } else { video.src = stream; } } function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback);
您可以發現其實這樣擷取影像串流的程式很簡單,程式的最後一行呼叫了 navigator.getUserMedia()
進行影像串流的擷取,而這個函數有三個參數,分別為:
constraints
:各種參數設定的物件。successCallback
:執行成功的回呼函數(callback function)。errorCallback
:執行失敗的回呼函數。這裡它透過 constraints
設定只擷取影像(video: true
),而不要擷取聲音(audio: false
),其他可用的參數可以參考 W3C 的說明。
其餘兩個回呼函數中則定義了執行成功與失敗時要執行哪些動作,當擷取串流失敗時就會呼叫 errorCallback()
,輸出一行錯誤訊息至 console 中,而如果成功了,就會呼叫 successCallback()
。
successCallback()
函數所傳入的 stream
參數是一個 MediaStream
,這個例子為了要讓初學者方便學習,故意把這個變數指定為全域變數,所以我們可以直接打開 simpl.info 的範例,在瀏覽器的 console 中直接查看 stream
變數的內容。
當取得了 MediaStream
這個多媒體串流之後,就直接把它指定給 video
,這樣就可以讓影像的串流直接顯示在瀏覽器上了。
除了將影像串流直接顯示在瀏覽器上之外,您也可以對串流做一些處理,以下是一些範例:
MediaStream
基本上只有單純的多媒體串流擷取功能,如果要想將串流透過網路傳送出去,跟遠端的電腦進行視訊,就要配合另外一個 RTCPeerConnection
API 才行,這個部分將在下一篇文章中解說。