WebRTC手记之初探

转载 2015年11月19日 15:27:09

转载请注明出处:http://www.cnblogs.com/fangkm/p/4364553.html 

WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏览器的Web页面就可以实现音视频对聊功能。而且WebRTC项目是开源的,我们可以借助WebRTC源码快速构建自己的音视频对聊功能。无论是使用前端JS的WebRTC API接口,还是在WebRTC源码上构建自己的对聊框架,都需要遵循以下执行流程:

 

上述序列中,WebRTC并不提供Stun服务器和Signal服务器,服务器端需要自己实现。Stun服务器可以用google提供的实现stun协议的测试服务器(stun:stun.l.google.com:19302),Signal服务器则完全需要自己实现了,它需要在ClientA和ClientB之间传送彼此的SDP信息和candidate信息,ClientA和ClientB通过这些信息建立P2P连接来传送音视频数据。由于网络环境的复杂性,并不是所有的客户端之间都能够建立P2P连接,这种情况下就需要有个relay服务器做音视频数据的中转,本文本着源码剖析的态度,这种情况就不考虑了。这里说明一下, stun/turn、relay服务器的实现在WebRTC源码中都有示例,真是个名副其实的大宝库。

上述序列中,标注的场景是ClientA向ClientB发起对聊请求,调用描述如下:

  • ClientA首先创建PeerConnection对象,然后打开本地音视频设备,将音视频数据封装成MediaStream添加到PeerConnection中。
  • ClientA调用PeerConnection的CreateOffer方法创建一个用于offer的SDP对象,SDP对象中保存当前音视频的相关参数。ClientA通过PeerConnection的SetLocalDescription方法将该SDP对象保存起来,并通过Signal服务器发送给ClientB。
  • ClientB接收到ClientA发送过的offer SDP对象,通过PeerConnection的SetRemoteDescription方法将其保存起来,并调用PeerConnection的CreateAnswer方法创建一个应答的SDP对象,通过PeerConnection的SetLocalDescription的方法保存该应答SDP对象并将它通过Signal服务器发送给ClientA。
  • ClientA接收到ClientB发送过来的应答SDP对象,将其通过PeerConnection的SetRemoteDescription方法保存起来。
  • 在SDP信息的offer/answer流程中,ClientA和ClientB已经根据SDP信息创建好相应的音频Channel和视频Channel并开启Candidate数据的收集,Candidate数据可以简单地理解成Client端的IP地址信息(本地IP地址、公网IP地址、Relay服务端分配的地址)。
  • 当ClientA收集到Candidate信息后,PeerConnection会通过OnIceCandidate接口给ClientA发送通知,ClientA将收到的Candidate信息通过Signal服务器发送给ClientB,ClientB通过PeerConnection的AddIceCandidate方法保存起来。同样的操作ClientB对ClientA再来一次。
  • 这样ClientA和ClientB就已经建立了音视频传输的P2P通道,ClientB接收到ClientA传送过来的音视频流,会通过PeerConnection的OnAddStream回调接口返回一个标识ClientA端音视频流的MediaStream对象,在ClientB端渲染出来即可。同样操作也适应ClientB到ClientA的音视频流的传输。

这里的流程仅仅是从使用层面上描述了一下,具体内部都做了什么、怎么做的,以后的文章中会慢慢细扒,万事开头难,自我鼓励一下。

小白...

初入软件行业,代码小白一枚...还望各位大牛指点迷津,多谢多谢.
  • taoxiaowu36
  • taoxiaowu36
  • 2016年06月25日 22:25
  • 130

WebRTC手记初探——(编程实现过程)

WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏览器的Web页面就可以实现音视频对聊功能。而且WebRTC项目是开源的,我们可以借助WebRTC源码快速构...
  • lcwwade
  • lcwwade
  • 2016年07月18日 20:27
  • 273

maven小白

maven小白今天花了不少时间成功创建了一个maven项目,期间遇到些问题,搞到现在,头也是晕晕的 下面便将搭建过程分享下, 参照两位的分享,也是加一些自己遇到的问题,自己写了一个分享,可能有些乱...
  • wang725
  • wang725
  • 2015年11月28日 22:38
  • 244

小白进化论

每个人都是从电脑小白进化来的,不过术业有专攻,禀赋也有不同,所以有的人锤炼成了高手,有的人还是小白,只不过多看了几部片子多玩了几个游戏而已。网上炒股和在线棋牌,吸引了岁数大的;幼齿们则专注聊天和网游。...
  • bigpeon
  • bigpeon
  • 2008年01月14日 13:43
  • 709

开发 openwebrtc 应用

Developing WebRTC web applications for OpenWebRTC and Bowser:        https://github.com/EricssonRese...
  • bamboolsu
  • bamboolsu
  • 2015年11月13日 14:15
  • 1111

WebRTC之初探(一)

转载请注明出处:http://www.cnblogs.com/fangkm/p/4364553.html  WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过...
  • Swallow_he
  • Swallow_he
  • 2017年08月18日 10:56
  • 121

WebRTC中的拥塞控制 一

对于基于内容分享的Internet应用来说, 拥塞控制都是其无法回避的问题,     而实时多媒体应用的拥塞控制, 相比于其他应用而言, 更具有挑战性.      原因在于:         1. ...
  • volvet
  • volvet
  • 2016年10月16日 22:40
  • 1168

第30篇研究OpenWebRTC初探(二)

关键词:OpenWebRTC特点, OpenWebRTC背景, IOS一对一bug处理, php多维数组 一、OpenWebRTC特点 1.1灵活和模块化 OpenWebRTC的模块化架构使...
  • SanBaDao
  • SanBaDao
  • 2016年12月13日 22:34
  • 650

ios中使用webrtc流程

介绍在ios app中调用webrtc的流程
  • lipku
  • lipku
  • 2017年12月28日 18:49
  • 82

WebRTC手记之WebRtcVideoEngine2模块

转载请注明出处:http://www.cnblogs.com/fangkm/p/4401143.html  终于讲到视频数据的编码发送模块了,不容易。总体来说也看了不少时间WebRTC的源码了,...
  • zwz1984
  • zwz1984
  • 2015年11月20日 16:30
  • 1034
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebRTC手记之初探
举报原因:
原因补充:

(最多只允许输入30个字)