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

相关推荐
于慨17 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz17 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶17 小时前
前端交互规范(Web 端)
前端
CHU72903517 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing17 小时前
Page-agent MCP结构
前端·人工智能
王霸天17 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航17 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界17 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript
PieroPc17 小时前
一个功能强大的 Web 端标签设计和打印工具,支持服务器端直接打印到局域网打印机。Fastapi + html
前端·html·fastapi
悟空瞎说17 小时前
深入 Vue3 响应式:为什么有的要加.value,有的不用?从设计到源码彻底讲透
前端·vue.js