因为疫情起因很多公司都抉择线上办公,让我对实时音视频倍感趣味,所以决定理解下。
首先来画个饼,说下我的相熟理解的过程。
- 理解下 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