Webrtc 多人视频会议系统 服务器 Licode 介绍
WebRTC又称 web实时通信,主要是为了扩展浏览器的功能,使浏览器能够进行实时音视频通信,不同的浏览器对Webrtc的实现代码也许不同,但Google的浏览器将Webrtc的实现代码开源了,以至于很多人一听到Webrtc就联想到Google的开源实现,以至于误以为使用Webrtc就非常难,因为Webrtc的实现都是C/C++代码,让很多人望而生畏。其实我们只需要懂得浏览器端的Javascript,就能使用Webrtc,很多的时候不必关心Webrtc的核心实现。本文根据自己使用webrtc的经验撰写,错误之处难免,希望朋友不吝指正。
在WebRTC中,有三个主要的概念,理解了这三个概念 ,也就理解了WebRTC的使用技术了。这三个概念是:
- MediaStream:用于从采集设备,Canvas等获取音频和视频数据,进行音视频压缩。
- RTCPeerConnection:端到端的通信连接器,主要用于音频和视频数据通信。
- RTCDataChannel:连接建立后的数据通道,可以用于任意应用数据的通信。
MediaStream
主要是用于获取音频和视频流。其JavaScript调用也比较简单,样本代码如下:
'use strict';navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;var constraints = { // 音频、视频约束audio: true, // 指定请求音频Trackvideo: { // 指定请求视频Trackmandatory: { // 对视频Track的强制约束条件width: {min: 320},height: {min: 180}},optional: [ // 对视频Track的可选约束条件{frameRate: 30}]}
};var video = document.querySelector('video');function successCallback(stream) {if (window.URL) {video.src = window.URL.createObjectURL(stream);} else {video.src = stream;}
}function errorCallback(error) {console.log('navigator.getUserMedia error: ', error);
}navigator.getUserMedia(constraints, successCallback, errorCallback);
通过调用浏览器的getUserMedia函数来操作音频和视频,该函数接收三个参数,分别是音视频的约束,成功的回调以及失败的回调。在底层,浏览器通过音频和视频引擎对捕获的原始音频和视频流加以处理,除了对画质和音质增强之外,还得保证音频和视频的同步。
RTCPeerConnection
在获取到音频和视频流后,下一步要做的就是将其发送出去。但这个跟client-server模式不同,这是client-client之间的传输,因此,在协议层面就必须解决NAT穿透问题,否则传输就无从谈起。另外,由于WebRTC主要是用来解决实时通信的问题,可靠性并不是很重要,因此,WebRTC使用UDP作为传输层协议:低延迟和及时性才是关键。
调用RTCPeerConnection的示例代码如下:
var signalingChannel = new SignalingChannel();
var pc = null;
var ice = {"iceServers": [{ "url": "stun:stun.l.google.com:19302" }, //使用google公共测试服务器{ "url": "turn:user@turnserver.com", "credential": "pass" } // 如有turn服务器,可在此配置]
};
signalingChannel.onmessage = function (msg) {if (msg.offer) { // 监听并处理通过发信通道交付的远程提议pc = new RTCPeerConnection(ice);pc.setRemoteDescription(msg.offer);navigator.getUserMedia({ "audio": true, "video": true }, gotStream, logError);} else if (msg.candidate) { // 注册远程ICE候选项以开始连接检查pc.addIceCandidate(msg.candidate);}
}
function gotStream(evt) {pc.addstream(evt.stream);var local_video = document.getElementById('local_video');local_video.src = window.URL.createObjectURL(evt.stream);pc.createAnswer(function (answer) { // 生成描述端连接的SDP应答并发送到对端pc.setLocalDescription(answer);signalingChannel.send(answer.sdp);});
}
pc.onicecandidate = function (evt) {if (evt.candidate) {signalingChannel.send(evt.candidate);}
}
pc.onaddstream = function (evt) {var remote_video = document.getElementById('remote_video');remote_video.src = window.URL.createObjectURL(evt.stream);
}
function logError() { ... }
DataChannel
DataChannel支持端到端的任意应用数据交换,就像WebSocket一样,但是是端到端的。
建立RTCPeerConnection连接之后,两端可以打开一或多个信道交换文本或二进制数据。
var ice = {'iceServers': [{'url': 'stun:stun.l.google.com:19302'}, // google公共测试服务器// {"url": "turn:user@turnservera.com", "credential": "pass"}]
};// var signalingChannel = new SignalingChannel();var pc = new RTCPeerConnection(ice);navigator.getUserMedia({'audio': true}, gotStream, logError);function gotStream(stram) {pc.addStream(stram);pc.createOffer().then(function(offer){pc.setLocalDescription(offer);});
}pc.onicecandidate = function(evt) {// console.log(evt);if(evt.target.iceGatheringState == 'complete') {pc.createOffer().then(function(offer){// console.log(offer.sdp);// signalingChannel.send(sdp);})}
}function handleChannel(chan) {console.log(chan);chan.onerror = function(err) {}chan.onclose = function() {}chan.onopen = function(evt) {console.log('established');chan.send('DataChannel connection established.');}chan.onmessage = function(msg){// do something}
}// 以合适的交付语义初始化新的DataChannel
var dc = pc.createDataChannel('namedChannel', {reliable: false});handleChannel(dc);
pc.onDataChannel = handleChannel;function logError(){console.log('error');
}
通过以上代码,即可在浏览器端使用Webrtc,但Webrtc远没有这么简单,Webrtc需要服务器端来支持,否则就单个浏览器孤掌难鸣。
Webrtc需要有一个服务器来实现浏览器端点互通与音视频数据转发,能够支持Webrtc的服务器端项目很多,这里选择Licode搭建开发环境,相比其他项目,Licode比较轻量级,便于初学者学习。Licode扮演的角色如下:
Licode扮演着Router的角色,通过Licode,可以实现多对多通信。
Licode的安装
git clone https://github.com/lynckia/licode.git
cd licode
./scripts/installUbuntuDeps.sh
./scripts/installNuve.sh
./scripts/installErizo.sh
./scripts/initLicode.sh // 启动 licode
./scripts/initBasicExamples.sh // 启动 example
Licode 依赖很多各种各样的库,并且和服务器平台强相关,所以这其中会出各种各样的莫名错误,需要手动安装好依赖,并且 libavutil 等库的编译要使用 ./configure --enable-shared --disable-asm,每次编译前最好 make clean。
配置 Licode (licode_config.js):
config.erizoController.iceServers = [{'url': 'stun:123.218.123.109:5600'}];
config.erizoController.turnServer.url = 'turn:123.218.123.109:3478';
config.erizoController.publicIP = '123.218.123.109';
config.erizoController.hostname = '123.218.123.109';
config.erizo.stunserver = '123.218.123.109';
config.erizoController.turnServer.username = 'username';
config.erizoController.turnServer.password = 'password';
erizoController.js:
GLOBAL.config.erizoController.iceServers || [{'url': 'stun:123.218.123.109:3478'}];
GLOBAL.config.erizoController.publicIP = '123.218.123.109';
GLOBAL.config.erizoController.hostname = '123.218.123.109';
GLOBAL.config.erizoController.turnServer.url = "turn:123.218.123.109?transport=udp";
GLOBAL.config.erizoController.turnServer.username = "username";
GLOBAL.config.erizoController.turnServer.password = "password";
Webrtc 多人视频会议系统 服务器 Licode 介绍相关推荐
- 死亡搁浅运送系统服务器,死亡搁浅订单23寻物系统服务器流程介绍-死亡搁浅订单23寻物系统服务器怎么做_牛游戏网...
在<死亡搁浅>这款送快递游戏中,我们会接到各种难易不同的订单,可能很多玩家对于要怎么完成这些订单不是很了解,所以小编这次就为大家带来了<死亡搁浅>订单23.寻物:系统服务器流程 ...
- 推荐书籍:WebRTC技术详解 从0到1构建多人视频会议系统
WebRTC技术应用领域: 5G商用.在线教育.视频会议.在线医疗.直播短视频 为什么学习WebRTC这么难? NO.1 中文技术规范少 NO.2 从业人员少,专业技术性强 NO.3 技术覆盖面广,难 ...
- 视频会议系统服务器,视频会议系统在服务器上如何部署?
视频会议系统在服务器上如何部署? 具体怎么在服务器上搭建会议视频系统,首先要清楚的知道视频会议系统需要实现那些功能 一.基本的音视频通信,需要在任意两台终端之间均能在没有MCU参与的情况下通过网上拨号 ...
- 视频会议系统服务器不稳定,视频会议系统常见问题 - 好视通
如何选择视频会议软件,建设视频会议系统来建立快速高效的沟通渠道,使得视频会议软件应用日渐流行,好视通作为视频通信领域的"领先者",凭借低廉的投入成本.灵活的部署等突出的应用优势,成 ...
- 基于Webrtc和Janus的多人视频会议系统开发1--系统架构
目前业界如教育行业,直播行业,低延迟音视频连麦方案基本采用声网,即构,腾讯等第三方方案,采用第三方方案最大的优点就是接入快捷,可以迅速搭建自己的产品,缺点就是完全受制于第三方,另外费用比较高,公司规模 ...
- FlexAir 开源版-多人视频聊天室,网络远程多人视频会议系统((Flex,Fms3联合开发))视频聊天,会议开发实战
本篇是视频聊天,会议开发实例系列文章的第8篇,该系 列所有文章链接如下: http://www.cnblogs.com/aierong/archive/2008/12/30/Flex.html#sp ...
- 关于webrtc的多人视频会议的杂乱记录
之前公司要做自主研发的多人会议,搞了很久.记录一些东西在这里,因为涉及到的东西有点多,网上教程很多,这里只做一些记录,就不写详细的过程了. 之前自主研发了一套IM,用webrtc做了点对点的视频通话. ...
- 视频会议系统属于服务器吗,解析视频会议系统结构
视频会议系统的网络化迁移 以往,各大厂商视频会议系统的技术开发上还主要侧重在专线的应用.随着视频技术的发展和市场的扩展,视频会议技术日益走进中小企业和平民市场,专线由于价格昂贵已经不太适应市场方向,昂 ...
- 蒲公英视频会议系统占服务器带宽吗,视频会议系统带宽的计算方法
视频会议系统带宽的计算方法 视频会议系统服务器及客户端需要良好的带宽条件,才能保障视频会议的流畅.实际占用的带宽大小取决于同时参加的会议人数.客户端接入带宽.视频窗口采集分辨率以及会议支持的视频窗口数 ...
最新文章
- MM32F3277 MicroPython的 mem 函数对于MCU内存访问
- redis 大数据插入
- 通过极简模拟框架让你了解ASP.NET Core MVC框架的设计与实现[上篇]
- java 求集合真子集_【每日打卡】新高一数学必修打卡第二天教学视频—集合的基本运算...
- Angular使用总结 --- 模型驱动表单
- 【架构】大型网站优化技术思路
- VAssistX使用
- 录音文件怎么转换成文字呢?
- 双电阻差分电流采样_电阻电桥基础
- 面试软件测试的时候,应届生怎么包装自己的简历?
- nc服务器修改过ip地址,nc服务器修改过ip地址
- 详解Android屏幕亮度和息屏的实现
- 如何绕过图片格式限制上传木马获取WebShell
- 如何对一年级小学生进行养成教育
- POC-T框架学习————9、相关脚本深入学习五
- python邮箱爆破_python制作企业邮箱的爆破脚本
- 【问】SQL安装时提示“安装程序配置服务器失败”?
- SQL DDM和DML
- 带你学MySQL系列 | 什么是数据定义语言(DDL)呢?
- ApiPost使用时的一些坑
热门文章
- eclipse 背景色
- 引擎Demo演示-算是一个转折点吧
- 不一样的 Python 课【王的机器出品】
- 超级计算机 在线 算命,IBM机器人会算命:100个字看穿你灵魂
- 无法访问计算机请检查名称的拼写,Win7系统访问共享文件夹提示“请检查名称的拼写”的解决方法...
- 中西医结合骨伤科学练习考试答案
- mysql root password_MYSQL安装时解决要输入current root password的方案
- 控件获取图像可从几方面取得?_基于图像特征与布局刻画的移动测试脚本跨平台录制回放...
- Hackintosh相关资源站
- [Delaunay Triangle] [图形学] Delaunay Triangles最易懂的实现方案