由于疫情原因很多公司都选择线上办公，让我对实时音视频倍感兴趣，所以决定了解下。
首先来画个饼，说下我的熟悉了解的过程。
- 了解下 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。