1、了解对方的媒体格式、支持的最大分辨率和其他媒体信息?
2、要了解彼此的网络,就有可能找到一条通信链路?
3、两个终端还没有建立连接时,如何交换“媒体信息”和“网络信息”呢
为了保证两端都有正确的编码和解码,最简单的方法就是取它们的交集H264
注:有一种特殊的协议叫做Session Description protocol (SDP),可以用来描述上述信息 。
在webrtc中,参与视频通信的双方必须首先交换SDP信息,这样双方才能了解基本的SDP交换过程。
同样,在复杂的网络环境中,要在两端之间建立连接,必须有一个双方都可以访问的链路。
从图中可以看出,他们可以使用公用网段192沟通。
在web brtc通信过程中,这些与网络相关的信息也必须进行交换,以找到共同的交集。这个过程也被称为“网络协商”。
两个终端还没有建立连接时,如何交换“媒体信息”和“网络信息”呢
此时,所谓信号服务器信号服务器应该出现:
如上图所示,两个浏览器可以抽象的上层一层信令服务器(可以是一个或多个,根据实际的应用程序中,如果两个浏览器可以访问公共网络环境,如公共如果没有公共网络环境中,您可以设置一组服务器两端,即信号服务器A和信号服务器B,但这两套信令服务器必须能够相互通信),在信令服务器的帮助下,可以实现上述SDP信息和网络信息的交换。
交换SDP的过程大致如图所示:
1 Amy(假设一个人的名字)通过setLocalDescription方法保存自己的SDP信息,然后通过offer方法发送给信令服务器。
2 信息服务器将Amy的SDP转发给另一端的Bob(另一个虚构的名字),Bob将首先调用setremotedescription来保存Amy的SDP。
3然后Bob调用setLocalDescription方法来保存他的SDP,然后使用answer方法通过信令服务器将他的SDP发送给Amy
4 Amy收到Bob的SDP后,调用setRemoteDescription进行保存,双方完成SDP交换,找到交集。如果他们能达成协议,他们就可以建立一个p2p连接并开始通信。
但现实往往是残酷的。在中国的网络环境下,据统计,至少有一半的网络不能直接连接。我个人认为根本原因是:在互联网发展的早期,绝大多数IP4地址资源都被国外所占据。当轮到中国等发展中国家使用IP地址时,大多数计算机没有公网IP地址,只能通过路由器和交换机进行NAT转换,相当一部分NAT是对称的。基本上,没有办法播放它。在这种情况下,您只能使用前一节提到的转向服务器进行转移。此外,在视频对话框中,通常会有房间(或组)的概念,用来隔离一些服务。这部分逻辑也在信号服务器中实现。对端、信令服务器、stun/转接服务器后,整个1对1实时视频通信顺序图如下:
主要流程如下:
1 双方首先调用getUserMedia打开本地摄像头
2 向信令服务器发送apply_join请求以加入房间
3信令服务器通知我成功加入(joined),同时向其他人广播加入消息(other_joined)
4 第二个端开始创建peerConnection连接
5 PeerB创建报价,同时将SDP保存到本地机器(setLocalDescription),并通过信令服务器将SDP传递给peerA
6 在setLocalDescription之后,PeerB将异步触发“候选网络链接”的集合,这大致决定了它自己所有的NAT映射通过Stun退出。如果Stun返回的NAT是“对称的”,它将基本上无法穿透。再次通过Turn得到中继应答地址,并通过信令服务器将网络候选链接信息发送给peerA(即:启动网络协商)
7 peerA收到peerB的SDP后,开始响应(createAnswer),仍然通过信令服务器将SDP发送给peerB
8 同时,peerA也会开始收集网络候选链路,并通过信令服务器(即网络协商)将自己的网络信息发送给peerB。
通过这种方式,peerA和peerB相互交换了媒体信息和网络信息。如果他们能达成一致(即找到交叉点),他们就能开始沟通。
WebRTC给我们带来了浏览器中的视频、音频聊天体验。但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道。在DataChannel之前,浏览器到浏览器的数据传递通常是这样一个流程:浏览器1发送数据给服务器,服务器处理,服务器再转发给浏览器2。这三个过程都会带来相应的消耗,占用服务器带宽不说,还减缓了消息从发送到接收的时间。其实最理想的方式就是浏览器1直接与浏览2进行通信,服务器不需要参与其中。WebRTC DataChannel就提供了这样一种方式。
如果对WebRTC和DataChannel不太了解的同学,可以先阅读如下文章:
- WebRTC的RTCDataChannel
- 使用WebRTC搭建前端视频聊天室——信令篇
- 使用WebRTC搭建前端视频聊天室——入门篇
当然服务器完全不参与其中,显然是不可能的,用户需要通过服务器上存储的信息,才能确定需要和谁建立连接。这里通过一个故事来讲述建立连接的过程:
不如钓鱼去
一些背景:
现在,老刘听说老姚钓鱼技术高超,想和老姚讨论钓鱼技巧。只要老刘和老姚相互之间知道对方的门牌号以及凭证,就可以串门了:
老刘和老姚相互之间知道了对方的门牌号和小区出入凭证,他们相互之间有什么需要交流的直接串门就行了,消息不再需要门卫老大爷来代为传达了
换个角度
我们把角色做一个映射:
于是乎故事就变成了这样:
这样,就建立了一个点对点的信道,流程如下所示:
故事
老刘和老姚已经可以相互串门了,经过一段时间的交流感情越来越深。老姚的亲友送了20斤葡萄给老姚,老姚决定送10斤给老刘。老姚毕竟年事已高,不可能一次带10斤。于是乎,老姚将葡萄分成了10份,每次去老刘家串门就送一份过去。
这里可以做如下类比:
这其实就是通过datachannel传输文件的方式,首先将文件分片,然后逐个发送,最后再统一的进行组合成一个新的文件
分片
通过HTML5的File API可以将type为file的input选中的文件读取出来,并转换成data url字符串。这也就为我们提供了很方便的分片方式:
组合
通过datachannel发送的分片数据,我们需要将其进行组合,由于是data url字符串,在接收到所有包之后进行拼接就可以了。拼接完成后就得到了一个文件完整的data url字符串,那么我们如何将这个字符串转换成文件呢?
方案一:直接跳转下载
既然是个dataurl,我们直接将其赋值给windowlocationhref自然可以下载,但是这样下载是没法设定下载后的文件名的,这想一想都蛋疼
方案二:通过a标签下载
这个原理和跳转下载类似,都是使用dataurl本身的特性,通过创建一个a标签,将dataurl字符串赋值给href属性,然后使用download确定下载后的文件名,就可以完成下载了。但是很快又有新问题了,稍微大一点的文件下载的时候页面崩溃了。这是因为dataurl有大小限制
方案三:blob
其实可以通过给a标签创建blob url的方式来进行下载,这个没有大小限制。但是我们手上是dataurl,所以需要先进行转换:
获得blob后,我们就可以通过URL API来下载了:
这里有几个点:
1 datachannel其实是可以直接传送blob的,但是只有ff支持,所以传data url
2 chrome下载是直接触发的,不会进行询问,firefox会先询问后下载,在询问过程中如果执行了revokeObjectURL,下载就会取消,囧
升级
如我们所知,WebRTC最有特点的地方其实是可以传输getUserMedia获得的视频、音频流,来实现视频聊天。但事实上我们的使用习惯来看,一般人不会一开始就打开视频聊天,而且视频聊天时很消耗内存的(32位机上一个连接至少20M左右好像,也有可能有出入)。所以常见的需求是,先建立一个包含datachannel的连接用于传输数据,然后在需要时升级成可以传输视频、音频。
看看我们之前传输的session description,它其实来自Session Description Protocol。可以看到wiki上的介绍:
这意味着什么呢?我们之前建立datachannel是没有加视频、音频流的,而这个流的描述是写在SDP里面的。现在我们需要传输视频、音频,就需要添加这些描述。所以就得重新获得SDP,然后构建offer和answer再传输一次。传输的流程和之前一样,没什么区别。但这一次,我们不需要传输任何的ice candidate,这里我曾经遇到了坑,经过国外大大的点拨才明白过来。
Peertc
我将datachannel和websocket组合,实现了一个构建点对点连接的库Peertc,它提供非常简洁的方式来建立连接和发送数据、文件和视频/音频流,详情见github。走过路过的记得star一下哦,有什么bug也非常希望能够提出来。
最后
WebRTC的点对点方式能够运用在很多场景:
- 如web qq这种Web IM工具,这就不说了
- 如象棋这种双人对战 游戏 ,每一步的数据服务器时不关心的,所以完全可以点对点发送
- 一对一在线面试、在线教育,这其实是即时通信的一个业务方向
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)