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

最新推荐文章于 2025-03-11 11:13:08 发布

俄罗斯方块高手

最新推荐文章于 2025-03-11 11:13:08 发布

阅读量1.4k

点赞数

分类专栏： WebRTC

WebRTC 专栏收录该内容

20 篇文章

订阅专栏

http://blog.youkuaiyun.com/temotemo/article/details/7520175

测试平台：

操作系统：Ubuntu 11.04

一、下载并安装WebKit库

1、Linux Ubuntu 11.04或11.10版本

2、安装Ericsson Labs public GPG key

命令：

[cpp]view plaincopy 
     
 wget -O- --quiet https://labs.ericsson.com/files/gpg/public.key | sudo apt-key add -  

3、添加Ericsson Labs APT repository

命令：

[cpp]view plaincopy 
     
 sudo add-apt-repository http://files.labs.ericsson.net/ubuntu  

4、更新

[cpp]view plaincopy 
     
 sudo apt-get update  

5、更新Ericsson Labs修改的libwebkitgtk包

命令：

[cpp]view plaincopy 
     
 sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0  

6、安装Epiphany浏览器

命令：

[cpp]view plaincopy 
     
 sudo apt-get install epiphany-browser  

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

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

命令：

[cpp]view plaincopy 
     
 sudo apt-get update  

[cpp]view plaincopy 
     
 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代码例子：

[javascript]view plaincopy 
      
 function getAudioAndVideoContent() {  
    navigator.webkitGetUserMedia('audio, video', function(stream) {  
       // Do something with the stream.  
    });  
 }  

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

参数为'audio,video'时表示既访问音频设备，也访问视频设备

参数为'audio'时，表示只访问音频设备；

参数为'video'时，表示只访问视频设备；

2、完整的例子

[html]view plaincopy 
     
 <!DOCTYPE html>  
 <html>  
   <head>  
     <title>getUserMedia</title>  
     <input type="button" value="start" onclick="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>  