Linux平台下WebRTC音视频获取(Javascript API)
2016-03-17 17:55
459 查看
http://blog.csdn.net/temotemo/article/details/7520175
1、Linux Ubuntu 11.04或11.10版本
2、安装Ericsson Labs public GPG key
命令:
[cpp] view
plain copy
wget -O- --quiet https://labs.ericsson.com/files/gpg/public.key | sudo apt-key add -
3、添加Ericsson Labs APT repository
命令:
[cpp] view
plain copy
sudo add-apt-repository http://files.labs.ericsson.net/ubuntu
4、更新
[cpp] view
plain copy
sudo apt-get update
5、更新Ericsson Labs修改的libwebkitgtk包
命令:
[cpp] view
plain copy
sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
6、安装Epiphany浏览器
命令:
[cpp] view
plain copy
sudo apt-get install epiphany-browser
只需更新操作,获取最新的库:
命令:
[cpp] view
plain copy
sudo apt-get update
[cpp] view
plain copy
sudo apt-get install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
最终标准的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
plain copy
function getAudioAndVideoContent() {
navigator.webkitGetUserMedia('audio, video', function(stream) {
// Do something with the stream.
});
}
说明:
以上函数getAudioAndVideoContent()实现访问用户的摄像头和麦克风设备;通过调用webkitGetUserMedia()函数实现,webkitGetUserMedia()的第一个参数表示的是访问用户多媒体设备,需要指定是访问视频设备还是音频设备:
参数为'audio,video'时表示既访问音频设备,也访问视频设备
参数为'audio'时,表示只访问音频设备;
参数为'video'时,表示只访问视频设备;
2、完整的例子
[html] view
plain copy
<!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)的
效果图:
![](http://my.csdn.net/uploads/201204/28/1335600886_4442.jpg)
访问本地摄像头和音频设备,询问用户选择哪个或者那类设备进行多媒体采集信息,我这里都勾选和pci...**麦克风和Lenovo EasyCamera摄像头;
然后就会显示如下所示的本地摄像头视频:
![](http://my.csdn.net/uploads/201204/28/1335601169_2493.jpg)
/===============================================================================
欢迎指出错误之处:zengxijin@qq.com
http://blog.csdn.net/temotemo
===============================================================================/
测试平台:
操作系统:Ubuntu 11.04
一、下载并安装WebKit库
1、Linux Ubuntu 11.04或11.10版本2、安装Ericsson Labs public GPG key
命令:
[cpp] view
plain copy
wget -O- --quiet https://labs.ericsson.com/files/gpg/public.key | sudo apt-key add -
3、添加Ericsson Labs APT repository
命令:
[cpp] view
plain copy
sudo add-apt-repository http://files.labs.ericsson.net/ubuntu
4、更新
[cpp] view
plain copy
sudo apt-get update
5、更新Ericsson Labs修改的libwebkitgtk包
命令:
[cpp] view
plain copy
sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
6、安装Epiphany浏览器
命令:
[cpp] view
plain copy
sudo apt-get install epiphany-browser
二、对于已经执行完步骤一的平台
只需更新操作,获取最新的库:命令:
[cpp] view
plain copy
sudo apt-get update
[cpp] view
plain copy
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.html1、getUserMedia()函数
getUserMedia()函数是标准的WebRTC的JS API,用来获取用户到摄像头或麦克风多媒体设备;
但是由于现在WebRTC还没有完全整合到Chrome中去,目前还在测试中,所以在webkit库中测试接口名为webkitGetUserMedia(),即是加了一个webkit的前缀;
js代码例子:
[javascript] view
plain copy
function getAudioAndVideoContent() {
navigator.webkitGetUserMedia('audio, video', function(stream) {
// Do something with the stream.
});
}
说明:
以上函数getAudioAndVideoContent()实现访问用户的摄像头和麦克风设备;通过调用webkitGetUserMedia()函数实现,webkitGetUserMedia()的第一个参数表示的是访问用户多媒体设备,需要指定是访问视频设备还是音频设备:
参数为'audio,video'时表示既访问音频设备,也访问视频设备
参数为'audio'时,表示只访问音频设备;
参数为'video'时,表示只访问视频设备;
2、完整的例子
[html] view
plain copy
<!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)的
效果图:
![](http://my.csdn.net/uploads/201204/28/1335600886_4442.jpg)
访问本地摄像头和音频设备,询问用户选择哪个或者那类设备进行多媒体采集信息,我这里都勾选和pci...**麦克风和Lenovo EasyCamera摄像头;
然后就会显示如下所示的本地摄像头视频:
![](http://my.csdn.net/uploads/201204/28/1335601169_2493.jpg)
/===============================================================================
欢迎指出错误之处:zengxijin@qq.com
http://blog.csdn.net/temotemo
===============================================================================/
相关文章推荐
- 解决profile 无修改导致命令无法使用的方法
- 如何在linux安装软件的几种方法
- Linux下iptables端口转发实现跳转访问数据库应用场景:假设有A、B、C三台设备,A<
- Linux笔记(55)——主控脚本
- Linux用户权限(随笔)
- PHP调用Linux的命令行执行文件压缩命令&&创建文件夹修改权限
- linux防火墙 基础知识
- linux细聊分段
- 在linux(cent OS)上安装java的运行环境(jre)
- linux内存模型
- 根文件系统 课堂笔记
- 学习Linux的一些硬盘知识(笔记)
- linux文件权限
- 远程给Linux 服务器安装 Matlab R2014b
- Linux内核定时器timer_list
- Linux进程间通信的几种方式总结--linux内核剖析(七)
- linux 文件与进程
- ssh 自动登录脚本
- linux下php调试工具xdebug安装配置
- Linux常用命令课堂笔记