关于web:WebRTC-实现实时音视频技术研究

因为疫情起因很多公司都抉择线上办公，让我对实时音视频倍感趣味，所以决定理解下。

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

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

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

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

WebRTC 简介
WebRTC 是一个由 Google 发动的实时通信解决方案，其中蕴含视频音频采集，编解码，数据传输，音视频展现等性能，咱们能够通过技术疾速地构建出一个音视频通信利用。尽管其名为 WebRTC，然而实际上它不光反对 Web 之间的音视频通信，还反对 Android 以及 IOS 端，此外因为该我的项目是开源的，咱们也能够通过编译 C++ 代码，从而达到全平台的互通。

WebRTC 架构介绍

咳咳~~ 介绍说的有点僵硬，这个查 WebRTC 相干资料室看到的。不过集体看架构图还是钻研了下，有点播种的大家也能够细看看，有不明确的能够深刻理解下，很有意思的

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

下载了 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:
获取本地资源失败

说说我是如何解决的吧：

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

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

RTCPeerConnection: 一个 RTCPeerConnection 对象容许用户在两个浏览器之间间接通信。

SDP 中都有哪些属性，别离是什么含意：

// 版本

v=0

//<username> <sess-id> <sess-version> <nettype> <addrtype> <unicast-address>

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 构造大体分了两大概念。

房间的概念
资源流的概念

房间是一个抽象概念，目标是退出房间，而后再应用 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

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