共计 7029 个字符，预计需要花费 18 分钟才能阅读完成。
因为疫情起因很多公司都抉择线上办公，让我对实时音视频倍感趣味，所以决定理解下。
首先来画个饼，说下我的相熟理解的过程。
- 理解下 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/…，让我对实时音视频倍感趣味，所以决定理解下。
首先来画个饼，说下我的相熟理解的过程。
- 理解下 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