Linux平台下WebRTC音视频获取（Javascript API）

测试平台：

操作系统：Ubuntu 11.04

一、下载并安装WebKit库

1、Linux Ubuntu 11.04或11.10版本
2、安装Ericsson Labs public GPG key
命令：
  1. wget -O- --quiet https://labs.ericsson.com/files/gpg/public.key | sudo apt-key add -   

3、添加Ericsson Labs APT repository

命令：
  1. sudo add-apt-repository http://files.labs.ericsson.net/ubuntu  

4、更新

  1. sudo apt-get update   

5、更新Ericsson Labs修改的libwebkitgtk包

命令：
  1. sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0  

6、安装Epiphany浏览器

命令：
  1. sudo apt-get install epiphany-browser   

二、对于已经执行完步骤一的平台

只需更新操作，获取最新的库：

命令：
  1. sudo apt-get update   
  2. 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代码例子：
  1. function getAudioAndVideoContent() { 
  2.    navigator.webkitGetUserMedia('audio, video', function(stream) { 
  3.       // Do something with the stream. 
  4.    }); 
  5. } 

说明：
以上函数getAudioAndVideoContent()实现访问用户的摄像头和麦克风设备；通过调用webkitGetUserMedia()函数实现，webkitGetUserMedia()的第一个参数表示的是访问用户多媒体设备，需要指定是访问视频设备还是音频设备：

参数为'audio,video'时表示既访问音频设备，也访问视频设备
参数为'audio'时，表示只访问音频设备；
参数为'video'时，表示只访问视频设备；
 
2、完整的例子
  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <title>getUserMedia</title> 
  5.     <input type="button" value="start" onclick="getAudioAndVideoContent()" id="startBtn"> 
  6.     <script> 
  7.        var localStream; 
  8.  
  9.        var startBtn = document.getElementById('startBtn'); 
  10.        //访问用户多媒体设备 
  11.        function getAudioAndVideoContent(){ 
  12.         navigator.webkitGetUserMedia('audio,video',gotStream); 
  13.         startBtn.disabled = true; 
  14.        } 
  15.  
  16.        function gotStream(stream){ 
  17.        localStream = stream; 
  18.            //绑定多媒体流到视频video标签 
  19.        document.getElementById("liveStream").src = webkitURL.createObjectURL(localStream); 
  20.        stream.onended = function(){ 
  21.        startBtn.disabled = false; 
  22.     } 
  23.        } 
  24.     </script> 
  25.   </head> 
  26.   <body> 
  27.     <video id="liveStream" autoplay audio=muted></video> 
  28.   </body> 
  29. </html> 

说明：

<video>标签用来显示视频区域，autoplay表示自动播放，audio=muted表示静音模式。这些都是HTML5的一些特性，也是Google的野心。
webkitURL.createObjectURL(localStream)将多媒体流绑定到Video标签，同样，标准API时是URL.createObjectURL(localStream)的

效果图：

访问本地摄像头和音频设备，询问用户选择哪个或者那类设备进行多媒体采集信息，我这里都勾选和pci...**麦克风和Lenovo EasyCamera摄像头；
然后就会显示如下所示的本地摄像头视频：

(temotemo)
 
本站文章除注明转载外，均为本站原创或编译欢迎任何形式的转载，但请务必注明出处，尊重他人劳动，同学习共成长。转载请注明：文章转载自：罗索实验室 [http://www.rosoo.net/a/201304/16608.html]
posted @ 2013-07-30 14:28  星语160523  阅读(720)  评论(0)  编辑  收藏  举报