Linux平台下WebRTC音视频获取(Javascript API)
来源:互联网 发布:谭维维 往日时光 知乎 编辑:程序博客网 时间:2024/06/06 04:36
测试平台:
操作系统: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 -
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
sudo add-apt-repository http://files.labs.ericsson.net/ubuntu4、更新
- sudo apt-get update
sudo apt-get update5、更新Ericsson Labs修改的libwebkitgtk包
命令:
- sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
sudo apt-get -y install libwebkitgtk-1.0-0 libwebkitgtk-3.0-06、安装Epiphany浏览器
命令:
- sudo apt-get install epiphany-browser
sudo apt-get install epiphany-browser
二、对于已经执行完步骤一的平台
只需更新操作,获取最新的库:命令:
- sudo apt-get update
sudo apt-get update
- sudo apt-get install libwebkitgtk-1.0-0 libwebkitgtk-3.0-0
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.
- });
- }
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>
<!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摄像头;
然后就会显示如下所示的本地摄像头视频:
/===============================================================================
欢迎指出错误之处:zengxijin@qq.com
http://blog.csdn.net/temotemo
===============================================================================/
- Linux平台下WebRTC音视频获取(Javascript API)
- Linux平台下WebRTC音视频获取(Javascript API) .
- Linux平台下WebRTC音视频获取(Javascript API)
- Linux平台下WebRTC音视频获取(Javascript API)
- Linux平台下WebRTC音视频获取(Javascript API)
- Linux平台下WebRTC音视频获取(Javascript API)
- iOS下WebRTC音视频通话(一)
- 调用API在Android平台下实现音视频通信
- iOS下WebRTC音视频通话(二)-局域网内音视频通话
- iOS下WebRTC音视频通话(三)-音视频通话
- iOS下 WebRTC 视频渲染
- iOS下 WebRTC 视频渲染
- Android WebRTC 音视频开发(一)
- webrtc音视频开发
- webrtc (3) 使用webrtc Native API实现视频通话
- webrtc-android平台视频编解码分析
- webrtc代码上传-linux平台
- iOS下音视频通信的实现-基于WebRTC
- 问题小结(24)--获取已有图片的镜像图片
- 电子如何形成电流_不是流动而是振动
- Ubuntu12.10搭建android开发环境
- 在Oracle中存储与管理大对象数据类型
- 操作系统中的进程与线程
- Linux平台下WebRTC音视频获取(Javascript API)
- 活动图
- 关于网站到ASP,PHP,NET源码
- PostgreSQL数据库(入门)
- HDU 2844 Coins(多重背包)
- Linux系统使用time计算命令执行的时间
- [Ubuntu 12.10] install VirtualBox-4.2 and start
- WebRTC研究之peerconnection_client与peerconnection_server
- android编译全过程