天天看点

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

今天我们再来讨论一些CreateOffer这个函数,那实际在此之前我们已经使用了CreateOffer,并且将我们的媒体协商Candidate收集以及连通性检测还有就是在同一个页面中进行端对端的传输做了一个验证,那么我们今天再讨论这个CreateOffer主要是来看看这个CreateOffer还包括了哪些参数,在此之前的实验中并没有对这些参数做详细的介绍,首先是createOffer的基本格式

基本格式

aPromise = myPeerConnection.createOffer([options]);

这个格式此前我们已经看到过了,他也是一个Promise的格式,前面是你的连接后面是调用的createOffer,在后面是它的options,这个options是可选的,就是我们可以添加也可以不添加,这里主要就是看options它里面的内容。

在这个Options里面一共有四项,其中关键的需要重点说明的有两项 。一个是iceRestart另一个是voiceActivityDetection.

Options可选

iceRestart:该选择会重启ICE,重新进行Candidate收集。

voiceActivityDetection:是否开启静音检测,默认开启。

那首先我们来看一下iceRestart,那它是什么作用呢?那其实就是重新启动ICE,那在重启启动ICE之后就会重新启动Candidate收集,那收集完了之后在进行连通性检测。那它有什么好处呢?那可以想象一种场景就是当我们使用手机的时候从4G换成wifi,或者从wifi换成4G的时候,实际它的链路已经发生了变化,就是说我们的IP地址和出口都发生了变化。那这个时候我们应该进行重新的选择;第二种情况就是说我们的传输网络是动态变化的,就是你数据量的多少,有没有其他人和你抢占带宽都是有关的,那么当我们最开始选择的这条线路呢,是比较高效的,连通性比较好,但是过了一端时间由于某种原因它产生拥塞了,那这时候如果有路的话我们有必要重新选择一条路,还有一种就是比如说我们在服务器端增加了新的中继节点 ,就是TURN服务,那么我们又增加了三个TURN服务,那么将这些TURN服务增加到连接的配置服务中去,那这个时候也应该重新启动ICE让它选路。

基于以上的这些原因,这个iceRestart是非常好的一个方案,就是可以自动的去帮我们去选择新的有效的数据传输的线路,这是一个非常好的机制,当我们设置它为true的时候,当有这些变化的时候就可以触发重新选路,那么第二个呢,就是静音检测那基因检测的好处,这有必要给大家说一下,就是当我们不说话的时候,有一些背景噪音实际是可以被忽略掉,那么当检测到这个没有人声只是一些背景噪音的时候,我们可以选择不传输这些背景噪音,那么在另外一端呢,当我们打开了进行检测之后呢,当没有音频数据过来的时候,它会自己去创建那个静默包,整个儿这个音频呢,他是一个连续的,在没有声音的时候第一个可以减少带宽,那么第二个呢,把一些没必要的背景音就省得去掺杂了整个儿的这个直播系统中。当然,一路的这个音频,其实占用的带宽量并不大,但是如果你是多路的话,那其实还是有一些这个客观的,这是两个需要特别说明的两个option,

但除了这个两个option之后呢,还有两个这个option一个是用于接收音频,一个是用于接受视频。

接收远端音频

接收远端视频

静音检测

ICE restart

这里去接收音频和视频没有必要特别的去讲解,那么静音呢必须在我们后面真正一对一时时直播系统之后,才能通过这个网络抓包工具,然后看到它的效果,那么我们这堂课重点来看ICE restart。我们通过一个实战来看看ICE restar的他是怎么生效的。那这里呢,就涉及到一个重点,其实这个ICE restart的最终的结果反映在哪儿呢?就反映在SDP,反映到我们的媒体协商上,在媒体协商的时候,当我们在进行交换SDP的时候,通讯的双方当发现这个ICE uflag大家还记得吗?我们在讲解这个SDP的时候,讲解了ICE ufrog 和 ICE password,那这两个参数是干什么呢?就是用于验证这个连通性的,Candidate的连通性的,当他们发生变化的时候,我们就要重新进行这个检测。那么在检测过程中,如果我们整个链路都通了,又发现一条新的路,那这个时候呢,他就会把老的那个数据切到这个新的路,在新的路没有建成之前,老的路还是依然在传输数据的,这点大家特别的清楚。那所以说呢,就是说,我们怎么能知道这个ICE restar的有没有真正的起效果,那么我们的观察点就在于将我们协商后的这个SDP然后看一看他的这个ICE-uflag和ICE password有没有发生变化?如果没有的话,说明ICE没有启动,如果发生变化了,说明ICE启动了,一会儿我就能看到这个效果,那现在我们就来具体实操一下。

登录终端服务器

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

切换到工作目录下

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

在这里我们有一个基础了,也就是testCreateOffer,这里有两个文件一个是index.html一个是js,首先我们看一下index.html

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer
实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

非常的简单,这里只是有一个button,当我们点击这个button的时候,他就调用一下新的createOffer,就是在原来的连接上调用这个createOffer,那如果说我们没有设置restart,那每次创建createOffer,它获取的这个ICE-uflag它的值是不变的,但是如果我们设置了ICE restart,那它的值就会发生变化,那这是index.html;

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

我们再看js

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

我们在js上做一些功能的增加,在这里首先是当用户点击createoffer的时候会触发一个时间,也就是test,那么在test里面对这个PC做了一个验证,就是我们这个连接,这时候我们去getStream,那从这个音视频设备中获取视频设备,这里我们将音频关了

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer
实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

那么这个时候就会调用getMediaStream,

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

那在这个函数里会将获取到的所有的音频和视频track,添加到pc中去,那么这时候这个pc里就有了视频的track,那有了这个之后我们再创建Offer的时候,那实际就有了新的媒体描述信息就是video,如果有音频就是audio,现在我们就实现媒体协商这部分,首先是pc.createOffer(),那么在这个createOffer里写一些这个options,现在我们第一步先让这个restart先为false,

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

设置offerToReceiveAudio为0,因为我们现在不支持音频,我们没有获取音频的数据,offerToReceiveVideo是1,因为我们有视频的这媒体 ,在设置一个iceRestart: false,这样我们就将参数设好了,设置好之后我们就可以获取这个Offer,

紧接着我们就来实现这个getOffer方法,创建Offer成功之后他会穿进一个desc参数,当我们拿到这个desc之后通过console.log将这个desc打印一下,这就是我们创建的SDP,

紧接着我们去设置pc.setLocalDescription(desc);创建完成之后如果是真实的,我们会通过信令将这个desc传过去,传到对方实际上就是pc2了,pc2收到之后它要调用setRemoteDescription(desc);那当这个pc2收到这个pc1的描述之后呢,它设置了远程的,紧接着它要回答一个应答,所以pc2要调用createAnswer,createAnswer的时候实际是不用传任何的option的,如果成功了就获取这个answer就好了,如果失败就处理这个错误,

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

那因此还是要实现getAnswer,getAnswer也同样的会有一个desc参数传进来,当我们收到这个desc的时候我们将这个SDP打印出来,这个时候首先是pc2调用setLocalDescription,这个时应该发信令给远端,这时候pc收到之后它要设置setRemoteDescription,那么这样整个协商过程就完了

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

 也就是我每次点击createOffer的时候都触发每次协商的重建,每次重建的时候它都会把这个Offer和answer的信息打印出来,这就是我们整个的过程,现在我们先来验证一把。

打开浏览器

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

打开调试工具,我们发现这个信息就出来了 

我们搜一下这个ice-ufrag,第一个是NEOJ,第二个是xYXa,

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

现在我们将iceRestart设置为true,为了更加方便,我们在console里面加上标记,这样 更容易区别

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer
实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

现在我们点击两次createOffer,我看下console,这时候我们搜offer就好了

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

因为有两个Offer,第一次执行的时候我们看ice-ufrag:80oi,

实现1V1音视频实时互动直播系统 十二、第五节 再论CreateOffer

第二层ice-ufrag:u84D