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为知识扩展篇,讲解音频采集参数的配置、桌面录制相关的知识。

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

 

posted on 2020-03-12 23:09  Rajan  阅读(342)  评论(0编辑  收藏  举报
扫码和作者预约吧