动端web开发框架、类库和UI组件简介,有需要的收藏一波。
react-native
一个基于React的创建原生APP的框架
html5-boilerplate
一个用来构建快速、强大、可适配的webapp的前端模板
ionic
领先的HTML5移动开发框架和SDK,利用你所熟知的web技术构建难以置信的移动应用,是AngularJS最好的朋友。
weui
由微信官方设计团队为微信Web开发量身打造的框架,包含移动web应用开发中有用的组件和模块
hammer.js
实现多点触控的javascript库
weex
阿里推出的跨平台的移动端开发框架,具有轻量级、可扩展和高性能的特点
fastclick
一个消除移动端浏览器上的点击事件的300ms的延迟
zepto
Zepto.jsisaminimalistJavaScriptlibraryformodernbrowsers,withajQuery-compatibleAPI
vux
基于Vue和Weui的移动端框架
wepy
腾讯团队推出的小程序组件化开发框架
NativeScript
NativeScript是一个利用JavaScript等WEB技术创建原生APP的框架
Framework7
功能强大的创建iOS&AndroidAPP的HTML框架
mui
最接近原生APP体验的高性能框架
ratchet
用简单的HTML,CSS,和JavaScript组件创建移动应用
react-native-elements
ReactNativeUI组件库
mint-ui
基于vue.js的移动端UI框架
amazeui
移动端优先的开源HTML5跨屏前端框架,俗称妹子UI
jquery-mobile
jQuery移动开发框架
Mars
腾讯移动Web前端知识库
interact.js
JavaScriptdraganddrop,resizingandmulti-touchgestureswithinertiaandsnappingformodernbrowsers(andalsoIE8+)
vant
有赞开发的基于Vue.js2.0的UI组件库
OnsenUI
用来构建混合移动端APP的HTML5UI框架
muse-ui
基于Vue2.0和MaterialDesigin的UI组件库
SUI-Mobile
SUIMobile(MSUI)是由阿里巴巴国际UED前端出品的一个手机端的UI库,轻量精美。更多信息请参考官网
ant-design-mobile
一个可配置的移动端UI框架
TouchSwipe-Jquery-Plugin
TouchSwipeisajqueryplugintobeusedwithjQueryontouchinputdevicessuchasiPad,iPhoneetc.
jquery-weui
创建微信混合app的UI库
jquery-ui-touch-punch
AduckpunchforaddingtoucheventstojQueryUI
device.js
Device.jsmakesiteasytowriteconditionalCSS_and/or_JavaScriptbasedondeviceoperatingsystem(iOS,Android,Blackberry,Windows,FirefoxOS,MeeGo),orientation(Portraitvs.Landscape),andtype(Tabletvs.Mobile).
react-native-ui-kitten
可定制和可重用的react-native组件包
iview-weapp
一套高质量的微信小程序UI组件库
vonic
基于Vue.js和ionic组件的SPAUI框架
brick
UIWebComponentsforModernWebApps
app
App.js是一个用来创建移动webapp的轻量级JavaScriptUI框架,可以表现得像原生APP而又不牺牲性能和优雅
Lungo.js
一个给开发者提供的设计、构建、分享跨设备应用的框架
AlloyFinger
腾讯Web前端团队推出的轻量级的多点触控手势库
FooTable
jQueryplugintomakeHTMLtablesresponsive
vue-ydui
一个基于Vue2.x的移动端组件库
wechat-h5-boilerplate
为腾讯微信优化的H5动效模板,帮助你快速构建全屏滚动型H5页面
slip
通过滑动和拖动手势操作列表的UI库
mobi.css
一个关注于移动端的轻量级的、灵活的css框架,
vue-touch
Vue.js的Hammer.js包装器
QuoJS
针对移动设备的微型JavaScript库
pressure
:point_down::boom:JavaScriptlibraryforhandlingbothForceTouchand3DTouchontheweb
junior
一个创建类似原生APP的html5应用的前端框架
vum
为手机webapp打造的基于Vue.js构建的UI框架
mobiscroll
ThecustomizablemobileUIlibraryfortouchdeviceslikesmartphonesandtablets
zingtouch
一个JavaScript触摸手势检测库
montage
montagejs是一个优雅的、开源的HTML5框架。它提供了模块化组件,双向数据绑定,以及更多功能
pushy
Pushyisaresponsiveoff-canvasnavigationmenuusingCSStransforms&transitions
GMU
基于zepto的ui组件库,适用于移动端
flex.css
flex.cssis是一个声明式的布局框架,能够兼容多个MVVM框架和浏览器
mobilebone
单页切换骨架。适用于移动webAPP,Hybrid混合APP,Phonegap开发,无兼容要求单页PC应用等
jquery.pep.js
Pep,alightweightpluginforkineticdragonmobile/desktop
Cloudajs
CloudaFramework-一个针对移动WebApp的实时JavaScriptRIA框架
jo
Jo(0.5.0)是一个轻量级的(~16K)创建HTML5应用的外壳。可以和PhoneGap,Chrome,Safari,Opera,FireFox,iOS,Android,BlackBerry10,Tizen,&WindowsPhone8+一起工作
touchui
高质量移动端UI框架
iosselect
一个简洁好看的模仿ios的webapp下拉菜单
mand-mobile
面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品
tabris-js
tabris.js-用JavaScript开发原生应用
aui
移动端UI快速布局解决方案(APICloudUI框架)
vue-carbon
基于vue开发的materialdesignui库
cordova-plugin-ibeacon
AniBeaconpluginforPhonegap/Cordova3.xandupwards.SupportsbothiOSandAndroid(contributionsarewelcome)
touch.code.baidu.com
TouchOfficalSite
bindingx
阿里团队推出的weex和ReactNative上富交互问题的一种解决方案
jQuery-Touch-Events
AcollectionofmobileeventpluginsforjQuery.
TinyNav.js
Responsivenavigationpluginthatweighsjust443bytes
Jingle
JingleUI是一个基于html5、css3开发轻量级的移动webapp框架,提供一些基本交互方式,帮助您更方便的开发移动应用。
light7
一个轻量级的易用的移动端UI框架
framework7-vue
基于Framework7和Vue构建iOS和Android应用
ydui
一只注重审美,且性能高效的移动端&微信UI
slip.js
移动端跟随手指滑动组件,零依赖。
wepayui
微信支付场景化组件,wepayui源码
BlendUI
BlendUI是Clouda+中的重要组成部分,他能让webapp的用户界面体验和交互能和Native媲美
toucher
面向移动端的手势类库
touchjs
一个移动端手势检测库
thumbs.js
Addtouchsupporttoyourbrowserwiththumbs.js-asmall,transparent,andsyntax-lesslibrary.
JMUI
移动Web开发UI组件库
JM
面向Mobile的极致JavaScript库
react-ui
为React打造的一套ionic风格的可复用UI组件库
Zoomage.js
Zoomage.js-一个通过手势缩放图片的库
touchSlider
TouchSliderjQueryPlugin
WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音通话或视频聊天的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。
WebRTC提供了实时音视频的核心技术,包括音视频的采集、编解码、网络传输、显示等功能,并且还支持跨平台:windows,linux,mac,android。
虽然WebRTC的目标是实现跨平台的Web端实时音视频通讯,但因为核心层代码的Native、高品质和内聚性,开发者很容易进行除Web平台外的移殖和应用。很长一段时间内WebRTC是业界能免费得到的唯一高品质实时音视频通讯技术。
WebRTC(Web Real-Time Communication)项目的最终目的主要是让Web开发者能够基于浏览器(Chrome\FireFox\…)轻易快捷开发出丰富的实时多媒体应用,而无需下载安装任何插件,Web开发者也无需关注多媒体的数字信号处理过程,只需编写简单的Javascript程序即可实现。
W3C等组织正在制定Javascript 标准API,目前是WebRTC 1.0版本、Draft状态。
另外WebRTC还希望能够建立一个多互联网浏览器间健壮的实时通信的平台,形成开发者与浏览器厂商良好的生态环境。同时,Google也希望和致力于让WebRTC的技术成为HTML5标准之一,可见Google布局之深远。
架构图颜色标识说明:
官方给出的平台支持情况:
Web开发者开发的程序,Web开发者可以基于集成WebRTC的浏览器提供的web API开发基于视频、音频的实时通信应用。
面向第三方开发者的WebRTC标准API(Javascript),使开发者能够容易地开发出类似于网络视频聊天的web应用,最新的标准化进程可以查看这里。
本地C++ API层,使浏览器厂商容易实现WebRTC标准的Web API,抽象地对数字信号过程进行处理。
传输/会话层:会话层组件采用了libjingle库的部分组件实现,无须使用xmpp/jingle协议。
- a. RTP Stack协议栈:Real Time Protocol;
- b. STUN/ICE:可以通过STUN和ICE组件来建立不同类型网络间的呼叫连接;
- c. Session Management:一个抽象的会话层,提供会话建立和管理功能。该层协议留给应用开发者自定义实现。
官方给出的WebRTC STUN原理图:
官方给出的WebRTC P2P数据收发原理图:
音频引擎是包含一系列音频多媒体处理的框架,包括从视频采集卡到网络传输端等整个解决方案。
VoiceEngine是WebRTC极具价值的技术之一,是Google收购GIPS公司后开源的。在VoIP上,技术业界领先。
a. iSAC
Internet Speech Audio Codec:针对VoIP和音频流的宽带和超宽带音频编解码器,是WebRTC音频引擎的默认的编解码器。
b. iLBC
Internet Low Bitrate Codec:VoIP音频流的窄带语音编解码器。标准由IETF RFC3951和RFC3952定义。
c. NetEQ for Voice
针对音频软件实现的语音信号处理元件。NetEQ算法:自适应抖动控制算法以及语音包丢失隐藏算法。使其能够快速且高解析度地适应不断变化的网络环境,确保音质优美且缓冲延迟最小。是GIPS公司独步天下的技术,能够有效的处理由于网络抖动和语音包丢失时候对语音质量产生的影响。
NetEQ 也是WebRTC中一个极具价值的技术,对于提高VoIP质量有明显效果,加以AEC\NR\AGC等模块集成使用,效果更好。
d. Acoustic Echo Canceler (AEC)
回声消除器是一个基于软件的信号处理元件,能实时的去除mic采集到的回声。
e. Noise Reduction (NR)
噪声抑制也是一个基于软件的信号处理元件,用于消除与相关VoIP的某些类型的背景噪声(嘶嘶声,风扇噪音等等… …)
WebRTC视频处理引擎:VideoEngine是包含一系列视频处理的整体框架,从摄像头采集视频到视频信息网络传输再到视频显示整个完整过程的解决方案。
a. VP8
视频图像编解码器,是WebRTC视频引擎的默认的编解码器。VP8适合实时通信应用场景,因为它主要是针对低延时而设计的编解码器。
VPx编解码器是Google收购ON2公司后开源的,VPx现在是WebM项目的一部分,而WebM项目是Google致力于推动的HTML5标准之一。
b. Video Jitter Buffer
视频抖动缓冲器,可以降低由于视频抖动和视频信息包丢失带来的不良影响。
c. Image enhancements
图像质量增强模块:对网络摄像头采集到的图像进行处理,包括明暗度检测、颜色增强、降噪处理等功能,用来提升视频质量。
附:webrtc学习视频教程
目的:帮助更多的学员入门WebRTC,视频免费领取,后台私信 1
分为以下章节:
(1)WebRTC入门
(2)WebRTC开发环境搭建
(3)Coturn穿透和转发服务器搭建
(4)音视频采集和播放
(5)Nodejs实战
(6)手把手实现音视频一对一通话(包含信令协议设计、Web to Web、Android to Web、 Android to Android)
(7)开源方案介绍
(8)AppRTC开源方案搭建
另外关于c++ Linux后台服务器开发的一些知识点分享:Linux,Nginx,MySQL,Redis,P2P,K8S,Docker,TCP/IP,协程,DPDK,webrtc,音视频等等视频。
喜欢的朋友可以后台私信【1】获取学习视频
最原始的直播系统其实并没有想象的那么复杂,无非就是主播端将音视频数据推送到服务器,观众端则从服务器拉取数据播放。
推流,是直播中的一个术语,意思是将流媒体数据推送到服务器。如何推流,关键就在于使用的推流协议。
拉流,指的是观众端流媒体数据的拉取,同样也需要通过约定的拉流协议来拉取。
帧,是视频的一个基本概念,表示一张画面,如上面的翻页动画书中的一页,就是一帧。一个视频就是由许许多多帧组成的。
帧率,即单位时间内帧的数量,单位为:帧/秒 或fps(frames per second)。如动画书中,一秒内包含多少张图片,图片越多,画面越顺滑,过渡越自然。帧率的一般以下几个典型值:
这里我们只讲常用到的两种色彩空间。
RGB的颜色模式应该是我们最熟悉的一种,在现在的电子设备中应用广泛。通过R G B三种基础色,可以混合出所有的颜色。
YUV是一种亮度与色度分离的色彩格式。早期的电视都是黑白的,即只有亮度值,即Y。有了彩色电视以后,加入了UV两种色度,形成现在的YUV,也叫YCbCr。Y:亮度,就是灰度值。除了表示亮度信号外,还含有较多的绿色通道量。U:蓝色通道与亮度的差值。V:红色通道与亮度的差值。
因为人眼对亮度敏感,对色度不敏感,因此减少部分UV的数据量,人眼却无法感知出来,这样可以通过压缩UV的分辨率,在不影响观感的前提下,减小视频的体积。
采样率即采样的频率。采样率要大于原声波频率的2倍,人耳能听到的最高频率为20kHz,所以为了满足人耳的听觉要求,采样率至少为40kHz,通常为44.1kHz,更高的通常为48kHz。
采样位数涉及到声波的振幅量化。波形振幅在模拟信号上也是连续的样本值,而在数字信号中,信号一般是不连续的,所以模拟信号量化以后,只能取一个近似的整数值,为了记录这些振幅值,采样器会采用一个固定的位数来记录这些振幅值,通常有8位、16位、32位。位数越多,记录的值越准确,还原度越高。由于数字信号是由0,1组成的,因此,需要将幅度值转换为一系列0和1进行存储,也就是编码,最后得到的数据就是数字信号:一串0和1组成的数据。
声道数,是指支持能不同发声(注意是不同声音)的音响的个数。单声道:1个声道双声道:2个声道立体声道:默认为2个声道立体声道(4声道):4个声道
码率,是指一个数据流中每秒钟能通过的信息量,单位bps(bit per second)码率 = 采样率 * 采样位数 * 声道数
编码可以大大减小音视频数据的大小,让音视频更容易存储和传送。视频编码格式有很多,比如H26x系列和MPEG系列的编码,这些编码格式都是为了适应时代发展而出现的。其中,H26x(1/2/3/4/5)系列由ITU(International Telecommunication Union)国际电传视讯联盟主导。MPEG(1/2/3/4)系列由MPEG(Moving Picture Experts Group, ISO旗下的组织)主导。
原始的PCM音频数据也是非常大的数据量,因此也需要对其进行压缩编码。和视频编码一样,音频也有许多的编码格式,如:WAV、MP3、WMA、APE、FLAC等等。在MP4视频中的音频数据,大多数时候都是采用AAC压缩格式。AAC是新一代的音频有损压缩技术,一种高压缩比的音频压缩算法。
我们熟悉的视频格式,如mp4、rmvb、avi、mkv、mov...,其实是包裹了音视频编码数据的容器,用来把以特定编码标准编码的视频流和音频流混在一起,成为一个文件。例如:mp4支持H264、H265等视频编码和AAC、MP3等音频编码。
在手机或者PC上,都会有CPU、GPU或者解码器等硬件。通常,我们的计算都是在CPU上进行的,也就是我们软件的执行芯片,而GPU主要负责画面的显示(是一种硬件加速)。
所谓软解码,就是指利用CPU的计算能力来解码,通常如果CPU的能力不是很强的时候,一则解码速度会比较慢,二则手机可能出现发热现象。但是,由于使用统一的算法,兼容性会很好。
硬解码,指的是利用手机上专门的解码芯片来加速解码。通常硬解码的解码速度会快很多,但是由于硬解码由各个厂家实现,质量参差不齐,非常容易出现兼容性问题。
通过下面这个数据流程图,能清晰地看到整个直播的过程。
可以看到,主播客户端 处理的事情,其实就是短视频开发中最重要的内容:
流程详细操作音视频数据采集通过摄像头和麦克风采集音视频滤镜通过 OpenGL 和 SoundTouch 等工具实现音视频编辑音视频编码通过系统硬编码 或 FFmpeg 软编码,将数据编码为 H264 和 AAC数据封装打包将编码好的数据封装成指定的格式
唯一不一样的地方,短视频会将封装好的数据保存到本地,直播则是通过 推流协议 将数据推送到服务器。
在直播中,有几个非常重要的地方,会直接影响直播效果,导致用户流失。
首屏时间,即从观众打开直播,到看到画面呈现出来的时间。影响这个时间的是 H264 编码中的一个概念: GOP 。GOP:Group of Picture,即一组帧组成的一个序列。在 H264 中,分别有 I帧、P帧、B帧 三种帧类型。GOP 就是由一个 I帧 和多个 P帧 或 B帧 组成的一组相近的画面 。
在H264中,三种类型的帧数据分别为I帧:帧内编码帧。就是一个完整帧。P帧:前向预测编码帧。是一个非完整帧,通过参考前面的I帧或P帧生成。B帧:双向预测内插编码帧。参考前后图像帧编码生成。B帧依赖其前最近的一个I帧或P帧及其后最近的一个P帧。
解码器可以直接解码I帧 ,但是P帧和B帧必须依赖I帧,或者前后的P或B才能解码。首次连上直播间时,需要抛弃掉P和B帧,等待I帧。所以,影响首屏时间最重要的因素就是I帧,也就是两个GOP之间的间隔时间。
GOP 间隔的设置并非越小越好,太小则两个I帧之间的P/B帧越少,压缩率越低,画面质量越差,需要做好权衡。
我们知道网络是不稳定的,经常会出现网速慢,甚至断网的问题,所以稳定性优化也是非常重要的。 比如以下几个方面:
同样分辨率下,码率越高,视频越清晰,同时需要的带宽也越大。相反,码率越低,视频越模糊,数据越小。
根据不同的网速切换不同的码率进行播放等。
网络断开时的重联机制。
随着业务的发展,如果主播和观众的数量越来越多以后,系统可能会面临高并发情景,直播卡顿,甚至系统奔溃,解决这种情况的一个好办法就是使用 CDN 。
CDN内容分发 解决因分布、带宽、服务器性能带来的访问延迟问题,适用于站点加速、点播、直播。
加入 CDN 后,整个直播系统架构如下:
除了以上提到的内容,当今的直播系统还要包括以下内容:录制、转码、鉴黄、截屏、权鉴防盗、回声消除、连麦 等等,整套下来,需要非常多的知识储备,以及大量的时间精力,才能完成。
直播协议包含了上面提到的 推流 和 拉流 协议。
实时传输协议(Real-time Transport Protocol,缩写RTP)是一个网络传输协议,它是由IETF的多媒体传输工作小组1996年在RFC 1889中公布的。
RTP协议详细说明了在互联网上传递音频和视频的标准数据包格式。它一开始被设计为一个多播协议,但后来被用在很多单播应用中。RTP协议常用于流媒体系统(配合RTSP协议),视频会议和一键通(Push to Talk)系统(配合H.323或SIP),使它成为IP电话产业的技术基础。RTP协议和RTP控制协议RTCP一起使用,而且它是创建在UDP协议上的。
实时消息协议(Real-Time Messaging Protocol,缩写RTMP)也称实时消息传输协议,是最初由Macromedia为通过互联网在Flash播放器与一个服务器之间传输流媒体音频、视频和数据而开发的一个专有协议。Macromedia后被Adobe Systems收购,该协议也已发布了不完整的规范供公众使用。
RTMP协议有许多变种:
WebRTC是一个由谷歌、Mozilla和Opera等支持的开源技术。它通过简单的api为浏览器和移动应用程序提供实时通信(RTC)功能。为浏览器、移动平台和物联网设备开发丰富、高质量的RTC应用程序,并允许它们通过一组通用协议进行通信。支持的浏览器和平台:
特点:
HTTP Live Streaming(缩写是HLS)是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载,每次只下载一些。当媒体流正在播放时,客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源,允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时,客户端会下载一个包含元数据的extended M3U (m3u8) playlist文件,用于寻找可用的媒体流。HLS只请求基本的HTTP报文,与实时传输协议(RTP)不同,HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。它也很容易使用内容分发网络(CDN)来传输媒体流。
目前 WebRTC 提供了在 Web、iOS、Android、Mac、Windows、Linux 在内的所有平台的 API,保证了 API 在所有平台的一致性。使用 WebRTC 的好处主要有以下几个方面:
P2P(peer to peer)对等通信。 即在p2p的网络中,所有网络节点都是同等地位,没有服务端和客户端之分,一个节点即是服务端也是客户端。客户端之间可以进行直接的通信,不需要在经过服务端的中转,从而提高网络传输速度和减小服务器压力,这是非常有用的。P2P虽然通信模式非常理想,但是有一些问题需要解决:
解决方案:
事实上,大部分的节点都处于常规网络的边缘,甚至在DNS所能查询的范围之外,所以在处于网络的边缘的节点不能直接通信的。
为了能让客户端在不同的网络之间通信,我们就需要穿过防火墙,而且我们还要面对ISP所设置的种种限制。所以为了绕开这些限制,以及在接收端的防火墙上打开一个口让媒体通过,我们就需要依赖STUN/TURN服务器,目的是找到一条正确的路径(STUN),或者是作为一个中继服务器用来传输媒体(TURN)
上图中的Relay server即为TURN中继服务器,而STUN server的作用是通过收集NAT背后peer端(即:躲在路由器或交换机后的电脑)对外暴露出来的ip和端口,找到一条可穿透路由器的链路,俗称“打洞”。STUN/TURN服务器通常要部署在公网上,能被所有peer端访问到。
WebRTC被认为是一种点对点技术,浏览器可以直接通信而无需任何类型的基础设施。此模型足以创建基本应用程序,但难以在其之上实现诸如组通信,媒体流记录,媒体广播或媒体转码之类的功能。因此,许多应用程序都需要使用媒体服务器。
从概念上讲,WebRTC媒体服务器只是一种“多媒体中间件”,从源到目的地时,媒体流量会通过该中间件。媒体服务器能够处理媒体流并提供不同的类型,包括组通信(将一个对等方生成的媒体流分配给多个接收方,即充当多会议单元,MCU),混合(将多个传入流转换为一个单一的复合流) ,转码(在不兼容的客户端之间适应编解码器和格式),录制(以持久的方式存储对等体之间交换的媒体)等。媒体服务器的好处有如下几点:
当媒体服务器充当媒体中继时,它通常被称为SFU(Selective Forwarding Unit选择性转发单位),这意味着其主要目的是在客户端之间转发媒体流。还有一个MCU(Multipoint Conferencing Unit多点会议单元)的概念,MCU服务器不仅可以转发,而且可以对媒体流进行混合和编码压缩(比如把各个客户端的数据打包转发,和SFU相比,这样将大幅度降低转发数据的带宽需求,但对CPU有更高的要求)。
每个端都与其它端互连。以上图最左侧为例,5个浏览器,二二建立p2p连接,每个浏览器与其它4个建立连接,总共需要10个连接。如果每条连接占用1m带宽,则每个端上行需要4m,下行带宽也要4m,总共带宽消耗20m。而且除了带宽问题,每个浏览器上还要有音视频“编码/解码”,cpu使用率也是问题,一般这种架构只能支持4-6人左右,不过优点也很明显,没有中心节点,实现很简单。
优点:
缺点:
这是一种传统的中心化架构(上图中间部分),每个浏览器仅与中心的MCU服务器连接,MCU服务器负责所有的视频编码、转码、解码、混合等复杂逻辑,每个浏览器只要1个连接,整个应用仅消耗5个连接,带宽占用(包括上行、下行)共10m,浏览器端的压力要小很多,可以支持更多的人同时音视频通讯,比较适合多人视频会议。但是MCU服务器的压力较大,需要较高的配置。
以前在电信行业做视频会议一般都使用MCU(Multipoint Control Unit),也就是多方推流在MCU上进行合流,在拉流的时候只有一路合流,这样的好处是无论几方推流,拉流只有一路,下行带宽比较小。但是问题也比较多,只要推流方一多,MCU的压力就比较大,而且分布式的部署也比较难,成本又很高。
上图右侧部分,咋一看,跟MCU好象没什么区别,但是思路不同,仍然有中心节点服务器,但是中心节点只负责转发,不做太重的处理,所以服务器的压力会低很多,配置也不象MUC要求那么高。但是每个端需要建立一个连接用于上传自己的视频,同时还要有N-1个连接用于下载其它参与方的视频信息。所以总连接数为5*5,消耗的带宽也是最大的,如果每个连接1M带宽,总共需要25M带宽,它的典型场景是1对N的视频互动。SFU 服务器最核心的特点是把自己 “伪装” 成了一个 WebRTC 的 Peer 客户端,WebRTC 的其他客户端其实并不知道自己通过 P2P 连接过去的是一台真实的客户端还是一台服务器,我们通常把这种连接称之为 P2S,即:Peer to Server。除了 “伪装” 成一个 WebRTC 的 Peer 客户端外,SFU 服务器还有一个最重要的能力就是具备 one-to-many 的能力,即可以将一个 Client 端的数据转发到其他多个 Client 端。
这种网络拓扑结构中,无论多少人同时进行视频通话,每个 WebRTC 的客户端只需要连接一个 SFU 服务器,上行一路数据即可,极大减少了多人视频通话场景下 Mesh 模型给客户端带来的上行带宽压力。
SFU 服务器跟 TURN 服务器最大的不同是,TURN 服务器仅仅是为 WebRTC 客户端提供的一种辅助的数据转发通道,在 P2P 不通的时候进行透明的数据转发。而 SFU 是 “懂业务” 的, 它跟 WebRTC 客户端是平等的关系,甚至 “接管了” WebRTC 客户端的数据转发的申请和控制。
现在互联网行业比较流行的是SFU(Selective Forwarding Unit),简单说就是只负责转发流,不负责合流,压力很小。这样的模式可以依托CDN进行分布式的部署,不过拉流的方数限于客户端的带宽和处理能力。
纯 mesh 方案无法适应多人视频通话,也无法实现服务端的各种视频处理需求,最先排除在商业应用之外。
SFU 相比于 MCU,服务器的压力更小(纯转发,无转码合流),灵活性更好(可选择性开关任意一路数据的上下行等),受到更广泛的欢迎和应用,常见的开源 SFU 服务器有:Licode,Kurento,Janus,Jitsi,Mediasoup等。
当然,也可以组合使用 SFU + MCU 的混合方案,以灵活应对不同场景的应用需要。
很多成功的、被良好维护的开源项目背后都有一个商业模式,尤其是中小型的项目,这意味着有一个团队以此为谋生手段。具备可选的付费支持意味着:
* 有人愿意全职来改善这东西,而不是作为爱好来维护。
* 如果你需要紧急帮助,只要花钱就能得到。
https://github.com/jitsi/jitsiJitsi是一个免费的开源音频/视频和聊天通信器,它支持SIP、XMPP/Jabber、AIM/ICQ、IRC和许多其他有用的特性。
Jitsi不仅是WebRTC媒体服务器,而且还有一个完整的平台。 Jitsi系列产品包括Jitsi Videobridge(媒体中继,SFU),Jitsi Meet(会议网络客户端),Jicofo(Jitsi Conference Focus),Jigasi(Jitsi Gateway to SIP)和Jitsi SIP Phone。借助Jitsi我们能在几个小时之内迅速搭建一个完整可用的通信平台。 它还使用Jingle(XMPP)和功能齐全的Web界面实现自己的信令控制。 然而,令人遗憾的是,它对于媒体录制没有提供稳定易用的解决方案。
https://github.com/Kurento/kurento-media-serverKurento是WebRTC媒体服务器和一组客户端API,可简化针对WWW和智能手机平台的高级视频应用程序的开发。Kurento Media Server的功能包括组通信,音视频流的转码,记录,混合,广播和路由。
作为一项与众不同的功能,Kurento Media Server还提供了高级媒体处理功能,包括计算机视觉,视频索引,增强现实和语音分析。Kurento模块化体系结构简化了第三方媒体处理算法(即语音识别,情感分析,面部识别等)的集成,可以由应用程序开发人员透明地用作Kurento的其余内置功能。
Kurento Media Server通过称为Kurento API的RPC API公开其所有功能。可以通过任何与JSON兼容的客户端直接查询该API,但是推荐的使用方法是通过Kurento客户端库。目前为Java,Browser Javascript和Node.js提供了这些工具。
如果您喜欢其他编程语言,则可以遵循基于WebSocket和JSON-RPC的Kurento协议的规范来编写自定义客户端库。
Kurento被设计为可插入框架,Kurento中的每个插件都称为一个模块,可以使用新的自定义模块扩展Kurento Media Server。更多信息,请阅读Kurento模块部分。
Kurento模块分为三类:
与Kurento Media Server开箱即用合并:
Kurento团队开发的额外模块,用于增强Kurento Media Server的基本功能。到目前为止,有四个内置模块,分别是:
Kurento Media Server的扩展,提供了新的媒体功能。
https://github.com/lynckia/licodeLicode基于WebRTC技术。它与Google Chrome的最新稳定版本100%兼容。您的用户将无需安装任何内容即可通过其Web浏览器进行交谈。无需关心复杂的实时基础架构。它提供了基于HTML5的视频会议功能的快速开发,使它100%可扩展。Licode允许您在网络上包括电视会议室。但是您也可以实现流媒体,录制和您梦dream以求的任何其他实时多媒体功能!
主要模块及实现语言:
https://github.com/meetecho/janus-gateway
Janus是由Meetecho开发的WebRTC服务器,被认为是通用服务器。因此,除了实现与浏览器建立WebRTC媒体通信,与之交换JSON消息以及在浏览器与服务器端应用程序逻辑之间中继RTP / RTCP和消息的手段之外,它本身不提供任何功能。服务器端插件提供了任何特定的功能/应用程序,然后浏览器可以通过Janus与之联系,以利用它们提供的功能。此类插件的示例可以是诸如回声测试,会议桥,媒体记录器,SIP网关等应用程序的实现。
这样做的原因很简单:我们想要的东西将具有 small footprint(因此是C实现),并且只能配备以前的东西really needed(因此可插入模块)。就是说,这使我们能够在云上部署成熟的WebRTC网关,或者使用小型的nettop / box来处理特定的用例。
其最显着的特征之一是其插件架构,可以增强服务的核心功能。有一些有趣的Janus用例,例如SIP Gateway,屏幕共享等。
https://github.com/versatica/mediasoup由于其多功能性,性能和可伸缩性,mediasoup成为构建多方视频会议和实时流应用程序的理想选择。它具有联播,SVC,传输BWE和其他更多先进功能。
除了创建另一个自带服务器之外,mediasoup是一个Node.js模块,可以将其集成到更大的应用程序中。mediasoup提供了一个低级API,该API支持您的应用程序使用不同的用例。
mediasoup带有mediasoup-client(JavaScript库)和libmediasoupclient(C ++库),用于构建使用统一API在任何浏览器或设备中运行的应用程序。或者只使用知名软件,例如FFmpeg或GStreamer。
设计目标mediasoup及其客户端库旨在实现以下目标:
架构
特征
它与其他媒体服务器的不同之处在于它被设计成一个用于Node的开发库,这允许它可以被容易的集成到更大的应用程序中。
*请认真填写需求信息,我们会在24小时内与您取得联系。