零基础入门：基于开源WebRTC，从0到1实现实时音视频聊天功能

1、引言

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

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

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

2、本文源码

完整源码附件下载： gitee.com/instant_me…

cdwebrtc-serveryarnnpm startcdwebrtc-staticyarnnpm start

3、知识准备

3.1 音视频理论基础

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

1. 《零基础，史上最通俗视频编码技术入门》（* 必读）

2. 《写给小白的实时音视频技术入门提纲》

3. 《零基础入门：实时音视频技术基础知识全面盘点》

4. 《实时音视频面视必备：快速掌握11个视频技术相关的基础概念》（* 必读）

5. 《爱奇艺技术分享：轻松诙谐，讲解视频编解码技术的过去、现在和将来》

3.2 什么是WebRTC

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

WebRTC（Web Real-Time Communication）是 Google 在 2010 年以 6820 万美元收购 VoIP 软件开发商 Global IP Solutions 的 GIPS 引擎，并改名为“WebRTC”于 2011 年将其开源的旨在建立一个互联网浏览器之间的音视频和数据实时通信的平台。更多WebRTC介绍详见《了不起的WebRTC：生态日趋完善，或将实时音视频技术白菜化》，本文不做赘述。

那么 WebRTC 能做些什么呢？

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

3.3 WebRTC的学习资源

WebRTC官方资源：

1. 《WebRTC开源工程官网》

2. 《WebRTC开源工程源码托管地址》

3. 《WebRTC标准API在线文档》

其它WebRTC学习资源：

1. 《开源实时音视频技术WebRTC在Windows下的简明编译教程》

2. 《WebRTC实时音视频技术的整体架构介绍》

3. 《[良心分享：WebRTC 零基础开发者教程（中文）附件下载]》

4、WebRTC技术组成

来自WebRTC 官网的整体技术组成图：