乐趣区

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

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

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

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

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

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

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

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

WebRTC 架构介绍

<img src=”https://upload-images.jianshu.io/upload_images/24954647-056ea5c4e555cd31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″ width=”400″>

咳咳~~ 介绍说的有点僵硬,这个查 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

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

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

房间是一个抽象概念,目标是退出房间,而后再应用 PeerConnection 建设连贯进行通话。所以房间模型中提供了退出,来到获取房间内信息等接口

资源流次要是指媒体流,用到的是 WebRTC 的 navigator.mediaDevices.getUserMedia 来获取视频流,在通过建设的 PeerConnection 连贯,对本人和别人的流进行公布和订阅等操作。具体能够看参考文旦中的 PeerConnection 介绍的连贯,自己也是通过此处理解的,不过还不是很透彻还只是理解皮毛。

融云提供的接口还是蛮简洁的,用起来很不便。上几块代码大家能够看下如果感兴趣也能够多理解理解。

<img src=”https://upload-images.jianshu.io/upload_images/24954647-36dfb10dae482380.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″ width=”400″>
<img src=”https://upload-images.jianshu.io/upload_images/24954647-2744fb1686239d6e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″ width=”400″>
<img src=”https://upload-images.jianshu.io/upload_images/24954647-d78caae40afe9f5d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240″ width=”400″>

截图借鉴的融云官网文档的,没有贴本人的代码,因为我的代码里会有些本人的业务逻辑。

本文纯属集体学习总结,为了理解 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

退出移动版