webrtc之媒体协商

在《webrtc基础介绍》中简单介绍了下RTCPeerConnection 的作用,知道它是用来连接两个用户的。也有提到它的一些作用,比如媒体协商、 NAT 穿越、音视频数据的接收与发送等。那么这个章节就来详细介绍下它是如何进行媒体协商 的。因为只有先进行媒体协商,才会有后面的连接操作。

什么是媒体协商

首先,媒体是指麦克风、摄像头之类的,协商是指两个用户彼此交换自身的媒体信息。串起来理解就是两个用户互相讨论各自的媒体信息,比如说A用户告诉B用户说他的设备所支持的音视频编解码器是什么类型,使用的是啥传输协议,网速多少,IP地址和端口号是多少等,然后B用户也把自己的设备信息都告诉A用户。双方告诉完之后就开始思考自己能不能支持对方的一些设备和要求,再决定是不是进行下一步。

这就是媒体协商。一句话概括就是交换双方的媒体信息。至于具体有哪些媒体信息,以怎样的形式去交换,下一章节将会介绍。

为什么要媒体协商

两个用户要实现正常的音视频通讯,那么双方都必须知道对方的一些媒体信息,依靠掌握的媒体信息来决定是否进行通讯。

简单举例,比如A用户的浏览器是使用H.264/AVC视频解码器,而B用户使用的是VP9视频解码器。如果不进行媒体协商,就直接进行视频通话。那A的媒体流放到B设备上就无法正常播放出来了,而B的同样也无法在A播放。而如果事先进行了媒体协商,A和B都知道了对方的视频解码器类型,知道不能支持,也就不会进行下一步了。这就是媒体协商的作用。

媒体协商的作用就是要知道双方的媒体信息,然后找出其中的一些共同点,比如都支持H.264/AVC视频解码器,那么就能顺利的进行下一步。至于如何找出,我们并不需要关心。

如何进行媒体协商

媒体协商的大致过程如下:

  1. 首先,双方用户先将他们各自的媒体信息,如音视频的编解码器、媒体流的IP地址和端口号、传输协议、媒体格式等信息,然后统统放在SDP里(SDP下一章节会详细介绍)。
  2. 然后,通讯双方都连接信令服务器,通过信令服务器来转发SDP信息,并拿到对方的SDP信息,再找出其中的一些共同点。
  3. 最后,双方根据媒体协商的结果来决定是否进行音视频通讯。

过程其实挺好理解的,就是交换信息。但在webrtc中,具体执行过程则稍显复杂一些,涉及到好几个流程。就像TCP协议的三次握手和四次挥手一样,有点绕。

其中,还涉及到两个概念:offeransweroffer是呼叫方发送的SDP消息;answer是被呼叫方发送的SDP消息。注意别搞混了,先有offer再有answer。至于什么SDP,就是下一章节的内容了。这里先理解为媒体信息。

具体流程如下图所示: 对照这个图,来详细介绍下:

  1. A作为发起方,先连接信令服务器,然后本地创建出一个RTCPeerConnection对象,并且把本地的媒体流加入到这个对象中。
  2. A先创建出一个offer SDP,先在本地保存 一份,然后将这个offer SDP发送给信令服务器。
  3. B作为接收方,首先也是连接信令服务器,然后本地创建出一个RTCPeerConnection对象,并且把本地的媒体流加入到这个对象中。
  4. B接收到信令服务器发送的offer SDP,保存到本地。保存完后 再创建出应答消息answer SDP,再将其保存到本地,然后发送给信令服务器。
  5. A接收到信令服务器发送的answer SDP保存到本地

到这里,就算是完成了一个媒体协商过程。至于怎么协商的,这是webrtc内部去实现的,我们不必在意。

这里有两个注意点:

  1. 无论是offer SDP还是answer SDP, 在发送SDP之前,务必要先保存一份在本地,即先设置好本地的媒体信息,完成之后再去发送,不然会提示报错。
  2. 仔细看流程图可以发现,作为接收方,其实是少了一道过程的。即少了创建offer SDP并保存到本地这个过程,这是比较容易出现问题的地方。如果作为接收方也加上了这个过程,就会会提示报错。这个问题很容易被忽略,一定要注意。

至此,媒体协商的过程也介绍完了。之后,webrtc就会进入到下一个流程,开始收集ICE候选信息,尝试进行连接测试,完成后就会将双方用户建立起连接。

对于这个过程,还是很有必要掌握的。特别是刚接触webrtc的新手,要多看几遍。并且,这个过程是最为重要的,没有这个过程,后面都无从谈起。

小结

本文从三个方面来介绍了媒体协商,重点是协商的过程,这个是必须要掌握的,要非常熟悉每一个步骤。如果不熟悉,单单是在一对一视频中就很容易出现问题,比如音视频不通,或者单方面通了等。

这个媒体协商是webrtc进行双方连接的最开始的,也是最重要的步骤,少了这个步骤,后面就没办法进行下去了。这也是要掌握它的一个重要原因,必须拿下。

这章节介绍了媒体协商,但对于协商的具体内容是哪些并没有提及。在下一章节将会详细介绍SDP,它包含了双方通讯必要的媒体信息,内容很多,也是需要了解清楚的。

项目地址

前端:gitee.com/yoboom/webr...

后端:gitee.com/yoboom/webr...

项目功能如下:

感兴趣的可以直接去体验一下,欢迎star和提pr

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js