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

相关推荐
一棵开花的树,枝芽无限靠近你2 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜5 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑13 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX15 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12524 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12531 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00140 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron