Linux平臺下WebRTC音視頻獲取(Javascript API)


測試平臺:

操作系統:Ubuntu 11.04

一、下載並安裝WebKit庫

1、Linux Ubuntu 11.04或11.10版本
2、安裝Ericsson Labs public GPG key
命令:
wget -O- --quiet https://labs.ericsson.com/files/gpg/public.key | sudo apt-key add -
3、添加Ericsson Labs APT repository
命令:
sudo add-apt-repository http://files.labs.ericsson.net/ubuntu
4、更新
sudo apt-get update
5、更新Ericsson Labs修改的libwebkitgtk包
命令:
sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
6、安裝Epiphany瀏覽器
命令:
sudo apt-get install epiphany-browser


二、對於已經執行完步驟一的平臺

只需更新操作,獲取最新的庫:
命令:
sudo apt-get update
sudo apt-get install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0

三、WebRTC 獲取視頻(Video)和音頻(Voice)Javascript API

最終標準的WebRTC的JavaScript API由W3C標準化確定,可以查看目前還是草擬版本的WebRTC 1.0標準說明,地址是:http://dev.w3.org/2011/webrtc/editor/webrtc.html

1、getUserMedia()函數

getUserMedia()函數是標準的WebRTC的JS API,用來獲取用戶到攝像頭或麥克風多媒體設備;
但是由於現在WebRTC還沒有完全整合到Chrome中去,目前還在測試中,所以在webkit庫中測試接口名爲webkitGetUserMedia(),即是加了一個webkit的前綴;
js代碼例子:
function getAudioAndVideoContent() {
   navigator.webkitGetUserMedia('audio, video', function(stream) {
      // Do something with the stream.
   });
}

說明:
以上函數getAudioAndVideoContent()實現訪問用戶的攝像頭和麥克風設備;通過調用webkitGetUserMedia()函數實現,webkitGetUserMedia()的第一個參數表示的是訪問用戶多媒體設備,需要指定是訪問視頻設備還是音頻設備:
參數爲'audio,video'時表示既訪問音頻設備,也訪問視頻設備
參數爲'audio'時,表示只訪問音頻設備;
參數爲'video'時,表示只訪問視頻設備;

2、完整的例子
<!DOCTYPE html>
<html>
  <head>
    <title>getUserMedia</title>
    <input type="button" value="start" οnclick="getAudioAndVideoContent()" id="startBtn">
    <script>
       var localStream;

       var startBtn = document.getElementById('startBtn');
       //訪問用戶多媒體設備
       function getAudioAndVideoContent(){
	    navigator.webkitGetUserMedia('audio,video',gotStream);
	    startBtn.disabled = true;
       }

       function gotStream(stream){
	   localStream = stream;
           //綁定多媒體流到視頻video標籤
	   document.getElementById("liveStream").src = webkitURL.createObjectURL(localStream);
	   stream.onended = function(){
	   startBtn.disabled = false;
	}
       }
    </script>
  </head>
  <body>
	<video id="liveStream" autoplay audio=muted></video>
  </body>
</html>

說明:
<video>標籤用來顯示視頻區域,autoplay表示自動播放,audio=muted表示靜音模式。這些都是HTML5的一些特性,也是Google的野心。
webkitURL.createObjectURL(localStream)將多媒體流綁定到Video標籤,同樣,標準API時是URL.createObjectURL(localStream)的

效果圖:

訪問本地攝像頭和音頻設備,詢問用戶選擇哪個或者那類設備進行多媒體採集信息,我這裏都勾選和pci...**麥克風和Lenovo EasyCamera攝像頭;
然後就會顯示如下所示的本地攝像頭視頻:



/===============================================================================
歡迎指出錯誤之處:[email protected]
===============================================================================/



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章