1. 首页 东莞电脑绣花厂 东莞绣花加工 东莞特种绣 东莞牙刷绣 社区 新闻中心 企业文化 地方资讯

当前位置:主页 > 东莞特种绣 > 内容

零基础入门:基于开源WebRTC从0到1实现实时音视频聊天功能
发布日期:2022-01-14 22:20   来源:未知   阅读:

  本文由微医云技术团队前端工程师张宇航分享,原题“从0到1打造一个 WebRTC 应用”,有修订和改动。

  去年初,突如其来的新冠肺炎疫情让线下就医渠道几乎被切断,在此背景下,在线问诊模式快速解决了大量急需就医病患的燃眉之急。而作为在线问诊中重要的一环——医患之间的视频问诊正是应用了实时音视频技术才得以实现。

  众所周之,实时音视频聊天技术门槛很高,一般的公司要想在短时间内从零补齐这方面的技术短板相当困难,而开源音视频工程WebRTC提供了这样一个捷径(包括笔者公司的产品在内,同样是基于WebRTC技术才得以达成)。

  本文将基于笔者公司开发的在线问诊产品中WebRTC技术的实践经验,讲述的如何基于WebRTC从零开发一个实时音视频聊天功能。文章会从WebRTC的基本知识、技术原理开始,基于开源技术为你演示如何搭建一个WebRTC实时音视频聊天功能。

  在了解WebRTC技术之前,如果你对音视频技术的基础理论还不了解的话,建议优先从以下几篇入门文章先学一学。

  《实时音视频面视必备:快速掌握11个视频技术相关的基础概念》(* 必读)

  ▲ 图片引用自《了不起的WebRTC:生态日趋完善,或将实时音视频技术白菜化》

  除了我们大家每天都在用的微信、钉钉、qq这类传统的IM社交软件中的实时音视频通话以外,笔者公司产品中涉及医疗领域中的在线问诊/远程门诊/远程会诊,还有时下较为流行的互动直播、在线教育等场景。除此之外,伴随着 5G 的快速建设,WebRTC 也为云游戏提供了很好的技术支撑。

  3)蓝色虚线 部分:音频引擎、视频引擎、网络传输 (Transport),都可以自定义实现。

  因篇幅有限,本节不深入讨论,有兴趣可以读读《WebRTC实时音视频技术的整体架构介绍》。

  要实现两个不同网络环境(具有麦克风、摄像头设备)的客户端(可能是不同的 Web 浏览器或者手机 App)之间的实时音视频通信的难点在哪里、需要解决哪些问题?

  对于问题 1:WebRTC 虽然支持端对端通信,但是这并不意味着 WebRTC 不再需要服务器。

  在P2P通信的过程中,双方需要交换一些元数据比如媒体信息、网络数据等等信息,我们通常称这一过程叫做“信令(signaling)”。

  对应的服务器即“信令服务器 (signaling server)”,通常也有人将之称为“房间服务器”,因为它不仅可以交换彼此的媒体信息和网络信息,同样也可以管理房间信息。

  为了避免出现冗余,并最大限度地提高与已有技术的兼容性,WebRTC 标准并没有规定信令方法和协议。在本文后面的实践章节会利用 Koa 和Socket.io技术实现一个信令服务器。

  对于问题 2:我们首先要知道的是,不同浏览器对于音视频的编解码能力是不同的。

  比如:Peer-A 端支持H264、VP8等多种编码格式,而 Peer-B 端支持 H264、VP9 等格式。为了保证双方都可以正确的编解码,最简单的办法即取它们所都支持格式的交集-H264。

  因此:参与音视频通讯的双方想要了解对方支持的媒体格式,必须要交换 SDP 信息。而交换 SDP 的过程,通常称之为媒体协商。

  对于问题 3:其本质上就是网络协商的过程,即参与音视频实时通信的双方要了解彼此的网络情况,这样才有可能找到一条相互通讯的链路。

  理想的网络情况是每个浏览器的电脑都有自己的私有公网 IP 地址,这样的话就可以直接进行点对点连接。

  但实际上:出于网络安全和 IPV4 地址不够的考虑,我们的电脑与电脑之间或大或小都是在某个局域网内,需要NAT(“Network Address Translation,” 中文译为“网络地址转换”)。在 WebRTC 中我们使用 ICE 机制建立网络连接。

  简单来说:其目的就是解决对称 NAT 无法穿越的问题,在 STUN 分配公网 IP 失败后,可以通过 TURN 服务器请求公网 IP 地址作为中继地址。

  1)主机候选者:表示的是本地局域网内的 IP 地址及端口。它是三个候选者中优先级最高的,也就是说在 WebRTC 底层香港正版资料兔费大全。首先会尝试本地局域网内建立连接;

  2)反射候选者:表示的是获取 NAT 内主机的外网 IP 地址和端口。其优先级低于 主机候选者。也就是说当 WebRTC 尝试本地连接不通时,会尝试通过反射候选者获得的 IP 地址和端口进行连接;

  3)中继候选者:表示的是中继服务器的 IP 地址与端口,即通过服务器中转媒体数据。当 WebRTC 客户端通信双方无法穿越 P2P NAT 时,为了保证双方可以正常通讯,此时只能通过服务器中转来保证服务质量了。

  从上图我们可以看出:在非本地局域网内 WebRTC 通过 STUN server 获得自己的外网 IP 和端口,然后通过信令服务器与远端的 WebRTC 交换网络信息,之后双方就可以尝试建立 P2P 连接了。当 NAT 穿越不成功时,则会通过 Relay server (TURN)中转。

  综上对三个问题的解释,我们可以用下图来说明 WebRTC 点对点通信的基本原理。

  简而言之:就是通过 WebRTC 提供的 API 获取各端的媒体信息 SDP 以及 网络信息 candidate ,并通过信令服务器交换,进而建立了两端的连接通道完成实时视频语音通话。

  《P2P技术详解(二):P2P中的NAT穿越(打洞)方案详解(基本原理篇)》

  《P2P技术详解(三):P2P中的NAT穿越(打洞)方案详解(进阶分析篇)》

  RTCPeerConnection作为创建点对点连接的 API,是我们实现音视频实时通信的关键。

  在上个章节的描述中可以知道 P2P 通信中最重要的一个环节就是交换媒体信息。

  从上图不难发现,整个媒体协商过程可以简化为三个步骤对应上述四个媒体协商方法。

  实际上:在呼叫端以及接收端调用 setLocalDesccription 同时也开始了收集各端自己的网络信息(candidate),然后各端通过监听事件onicecandidate收集到各自的 candidate 并通过信令服务器传送给对端,进而打通 P2P 通信的网络通道,并通过监听onaddstream事件拿到对方的视频流进而完成了整个视频通线、动手编码实践

  注意:如果只是本地局域网测试则无需搭建 [url=%5Burl=服务器,如果需要外网访问在搭建 coturn 服务器之前你需要购买一台云主机以及绑定支持 https 访问的域名。以下是笔者自己搭建的过程,感兴趣的可以参照着自已实践一次。

  在编写代码之前,结合上述章节 WebRTC 点对点通信的基本原理,可以得出以下流程图。

  前面提起过其实在调用 setLocalDescription 的同时,也会开始收集自己端的网络信息(candidate),如果在非局域网内或者网络“打洞”不成功,还会尝试向 Stun/Turn 服务器发起请求,也就是收集“中继候选者”,因此在创建 RTCPeerConnection 我们还需要监听 ICE 网络候选者的事件:

  经过上个章节的6个步骤,即可完成一个基于WebRTC的完整 P2P 视频实时通话功能(代码可通过:本节所涉及的完整源码,请从本文“

  本文只是简单地介绍了WebRTC P2P的通信基本原理以及简单的代码实践,事实上我们生产环境所使用的 SDK 不仅支持点对点通信,还支持多人视频通话,屏幕共享等功能这些都是基于WebRTC实现的。商务部:阿根廷对我国油浸式