2.0、本章导读

文章导读： 按照本书的内容安排，本章开始进入webrtc实操学习。本文将对本章的内容简单的做一下叙述，一起“先睹为快”，看看本章都能Get哪些“干货”吧。本文阅读建议：了解。

　　学习音视频通信，首先要能搞定音视频数据的采集。先通过一个视频来了解下本章即将要开发的软件吧，视频演示链接：点击播放 。软件界面如下图2.0.1 所示。

 图 2.0.1 （本章实战案例 软件界面图）

参照上图，这里描述下本软件实现的功能：软件分为两个区域，黑色的视频展示区和底部参数设置区。接下来分别描述。

　　黑色区:  该部分为视频展示区，左上角有两个按钮：“开启摄像头、关闭摄像头”，从演示视频中，我们很清楚这两个按钮的功能，点击“开启摄像头”按钮，软件将从摄像头中采集到视频并展示在黑色区域部分，同时，其他功能的按钮可用，如更新配置按钮、开始录制按钮、更新滤镜按钮；点击“关闭摄像头”功能，摄像头被关闭， 相关功能不可用。

　　参数设置区：参数设置分为两部分：视频采集参数、视频滤镜参数。在视频采集参数区域，可以设置视频相关的参数，如视频的宽高（通过宽高可视频调节分辨率）、视频的帧率，所选摄像头等；此外，还可以录制和保存视频。在视频滤镜区，我们可以调整基础滤镜参数来实现不同的视频渲染效果。 

　　不单单是这些功能，还可以扩展很多，如视频拍照，桌面录制、录制视频预览等，虽然这些功能我没有在本案例中体现出来，但相关核心技术在本章中都能学到，扩展功能的工作就留给读者作为作业来实现。 

　　所以，本章的内容，除了webrtc核心技术的讲解外，更关键的是基于这些技术来实战项目。实战是基本目标也是最终目标。我在讲解本软件的设计时，既要兼顾初学者的接受能力，又要考虑到代码的可维护性。所以编码过程中，尽可能不采用任何第三方框架，保证“原汁原味”的JS前端编程，而代码结构上采用“行为结构样式相分离”设计方式，即HTML、CSS、JS相互分离，保持代码条理清晰；在业务划分上，采用“面向对象”的思维，通过不同的对象管理不同的业务，如摄像头管理对象就只负责和摄像头相关的逻辑：打开摄像头、关闭摄像头。如此的付出，只为给读者呈上一份“有用”的参考、学习资料。

　　  本章的内容展开顺序：2.1 -  2.3 为理论讲解篇，讲解webrtc如何操作摄像头、如何采集媒体数据、如何为视频添加滤镜、如何录制和下载视频等； 2.4 - 2.6 为内容实操篇，正式进入“在线音视频录制软件”的开发实战； 2.7为知识扩展篇，讲解音频采集参数的配置、桌面录制相关的知识。

　　 最后，请开始本章内容的学习吧。