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

相关推荐
zqx_712 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己29 分钟前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2341 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河1 小时前
CSS总结
前端·css
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H2 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍2 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai2 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端