WebRTC 实现实时音视频技术研究

由于疫情原因很多公司都选择线上办公，让我对实时音视频倍感兴趣，所以决定了解下。

首先来画个饼，说下我的熟悉了解的过程。

1. 了解下 webRTC 是个什么，能做什么。
2. 选一家可以做实时音视频的三方集成实验下，同时也想具体了解小他们是如何实现的。

调研是了几家：腾讯，声网和融云，这三家，最后选中了融云。
首先说下为什么选择了融云：首先作为个人开发者，而且是对这块想了解的用户，融云在我注册后给我了很快的回访，我说明我的需要还有人很细致的介绍了下，体验不错。就那你先试试吧，不过有点不给力的是，集成中遇到些问题，不过提工单还是解决了。虽然过程略微有点磕磕绊绊~~~~

首先按照画饼的步骤说下 WebRTC

WebRTC 简介
WebRTC 是一个由 Google 发起的实时通讯解决方案，其中包含视频音频采集，编解码，数据传输，音视频展示等功能，我们可以通过技术快速地构建出一个音视频通讯应用。 虽然其名为 WebRTC，但是实际上它不光支持 Web 之间的音视频通讯，还支持 Android 以及 IOS 端，此外由于该项目是开源的，我们也可以通过编译 C++代码，从而达到全平台的互通。

WebRTC 架构介绍

咳咳~~ 介绍说的有点生硬，这个查 WebRTC 相关资料室看到的。不过个人看架构图还是研究了下，有点收获的大家也可以细看看，有不明白的可以深入了解下，很有意思的

再说下集成融云音视频的一些问题：

1. 下载了 Demo，跑步起来，报了个 RongRTC-3.2.3.js:8335 Uncaught (in promise) DOMException: Failed to execute 'setLocalDescription' on 'RTCPeerConnection': Failed to parse SessionDescription. m=video 9 UDP/TLS/RTP/SAVPF 98 99 96 97 100 101 127 Invalid value:

2. 获取本地资源失败

说说我是如何解决的吧：

先说第二个问题吧。获取失败是因为我开了两个浏览器，有一个浏览器已经占用了资源，在第二个浏览器访问时就报了资源获取失败。好吧_{只能这样了，那就不用两个浏览器呗}~~

再说问题一，由于本来就是抱着学习的态度去了解 RTC 一看报了 RTCPeerConnection 很感兴趣，正好可以好好梳理下。说以了解了下 RTCPeerConnection 和 SDP

RTCPeerConnection: 一个 RTCPeerConnection 对象允许用户在两个浏览器之间直接通讯。

SDP 中都有哪些属性，分别是什么含义：

//版本

v=0

//     

o=- 3089712662142082488 2 IN IP4 127.0.0.1

//会话名

s=-

//会话的起始时间和结束时间，0代表没有限制

t=0 0

//表示音频传输和data channel传输共用一个传输通道传输的媒体，通过id进行区分不同的流

a=group:BUNDLE audio data

//WebRTC Media Stream

a=msid-semantic: WMS

//m=audio说明本会话包含音频，9代表音频使用端口9来传输，但是在webrtc中现在一般不使用，如果设置为0，代表不传输音频

//使用UDP来传输RTP包，并使用TLS加密, SAVPF代表使用srtcp的反馈机制来控制通信过程

//111 103 104 9 0 8 106 105 13 110 112 113 126表示支持的编码，和后面的a=rtpmap对应

m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126

//表示你要用来接收或者发送音频使用的IP地址, webrtc使用ice传输，不使用这个地址, 关于ICE是什么后面会讲到

c=IN IP4 0.0.0.0

//用来传输rtcp的地址和端口，webrtc中不使用

a=rtcp:9 IN IP4 0.0.0.0

//ice协商过程中的安全验证信息

a=ice-ufrag:ubhd

a=ice-pwd:l82NnsGm5i7pucQRchNdjA6B

//支持trickle，即sdp里面只描述媒体信息, ice候选项的信息另行通知

a=ice-options:trickle

//dtls协商过程中需要的认证信息

a=fingerprint:sha-256 CA:83:D0:0F:3B:27:4C:8F:F4:DB:34:58:AC:A6:5D:36:01:07:9F:2B:1D:95:29:AD:0C:F8:08:68:34:D8:62:A7

a=setup:active

//前面BUNDLE行中用到的媒体标识

a=mid:audio

//指出要在rtp头部中加入音量信息

a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level

//当前客户端只接受数据，不发送数据，recvonly,sendonly,inactive,sendrecv

a=recvonly

//rtp,rtcp包使用同一个端口来传输

a=rtcp-mux

//下面都是对m=audio这一行的媒体编码补充说明，指出了编码采用的编号，采样率，声道等

a=rtpmap:111 opus/48000/2

a=rtcp-fb:111 transport-cc

//对opus编码可选的补充说明,minptime代表最小打包时长是10ms，useinbandfec=1代表使用opus编码内置fec特性

a=fmtp:111 minptime=10;useinbandfec=1

//下面就是对Data Channel的描述，基本和上面的audio描述类似，使用DTLS加密，使用SCTP传输

m=application 9 DTLS/SCTP 5000

c=IN IP4 0.0.0.0

//可以是CT或AS，CT方式是设置整个会议的带宽，AS是设置单个会话的带宽。缺省带宽是千比特每秒

b=AS:30

a=ice-ufrag:ubhd

a=ice-pwd:l82NnsGm5i7pucQRchNdjA6B

a=ice-options:trickle

a=fingerprint:sha-256 CA:83:D0:0F:3B:27:4C:8F:F4:DB:34:58:AC:A6:5D:36:01:07:9F:2B:1D:95:29:AD:0C:F8:08:68:34:D8:62:A7

a=setup:active

//前面BUNDLE行中用到的媒体标识

a=mid:data

//使用端口5000，一个消息的大小是1024比特

a=sctpmap:5000 webrtc-datachannel 1024

好吧了解完这些还是没解决，于是我提了工单，额~让我升级 SDK 说 chrome 升级优化了协议，SDK 有配套优化更新。fine~

问题解决。很开心这次体验，虽然 Demo 写的很简单还借鉴了融云的 Demo ，不过本身就是为了学习 WebRTC 东西。整个历程还是收获匪浅的。

梳理了下融云整体的 SDK 结构大体分了两大概念。

1. 房间的概念
2. 资源流的概念

房间是一个抽象概念，目的是加入房间，然后再使用 PeerConnection 建立连接进行通话。所以房间模型中提供了加入，离开获取房间内信息等接口

资源流主要是指媒体流，用到的是 WebRTC 的 navigator.mediaDevices.getUserMedia 来获取视频流，在通过建立的 PeerConnection 连接，对自己和他人的流进行发布和订阅等操作。具体可以看参考文旦中的 PeerConnection 介绍的连接，本人也是通过此处了解的，不过还不是很透彻还只是了解皮毛。

融云提供的接口还是蛮简洁的，用起来很方便。上几块代码大家可以看下如果感兴趣也可以多了解了解。

截图借鉴的融云官方文档的，没有贴自己的代码，因为我的代码里会有些自己的业务逻辑。

本文纯属个人学习总结，为了了解 WebRTC，也集成了下融云的 SDK ！不喜勿喷哦 ~~~ ❤

参考文案：

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection

https://baike.baidu.com/item/WebRTC/5522744

融云官网：https://www.rongcloud.cn/

集成文档：https://docs.rongcloud.cn/v2/views/rtc/meeting/intro/ability.html