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

时间:2021-7-3 作者:qvyue

由于疫情原因很多公司都选择线上办公,让我对实时音视频倍感兴趣,所以决定了解下。

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

  1. 了解下 webRTC 是个什么,能做什么。

  2. 选一家可以做实时音视频的三方集成实验下,同时也想具体了解小他们是如何实现的。

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

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

WebRTC 简介 WebRTC 是一个由 Google 发起的实时通讯解决方案,其中包含视频音频采集,编解码,数据传输,音视频展示等功能,我们可以通过技术快速地构建出一个音视频通讯应用。 虽然其名为 WebRTC,但是实际上它不光支持 Web 之间的音视频通讯,还支持 Android 以及 IOS 端,此外由于该项目是开源的,我们也可以通过编译 C++代码,从而达到全平台的互通。

WebRTC 架构介绍

WebRTC 实现实时音视频技术研究
image

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

//

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 介绍的连接,本人也是通过此处了解的,不过还不是很透彻还只是了解皮毛。

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

WebRTC 实现实时音视频技术研究
image
WebRTC 实现实时音视频技术研究
image
WebRTC 实现实时音视频技术研究
image

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。