Linux平台下WebRTC音视频获取（Javascript API）
http://blog.csdn.net/temotemo/article/details/7520175
Linux平台下WebRTC音视频获取（Javascript API）
分类： WebRTC
2012-04-28 15:46
3179人阅读
评论(1)
收藏
举报
javascript 平台 linux video audio function
目录(?)[+]
- 测试平台
- 操作系统Ubuntu 1104
- 一下载并安装WebKit库
- 二对于已经执行完步骤一的平台
- 三WebRTC 获取视频Video和音频VoiceJavascript 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 -
命令：
- sudo add-apt-repository http://files.labs.ericsson.net/ubuntu
- sudo apt-get update
命令：
- sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
命令：
- 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" 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>
说明：
<video>标签用来显示视频区域，autoplay表示自动播放，audio=muted表示静音模式。这些都是HTML5的一些特性，也是Google的野心。
webkitURL.createObjectURL(localStream)将多媒体流绑定到Video标签，同样，标准API时是
URL.createObjectURL(localStream)的
效果图：
访问本地摄像头和音频设备，询问用户选择哪个或者那类设备进行多媒体采集信息，我这里都勾选和pci...**麦克风和Lenovo EasyCamera摄像头；
然后就会显示如下所示的本地摄像头视频：
/===============================================================================
欢迎指出错误之处：[email protected]
http://blog.csdn.net/temotemo
===============================================================================/