文章导读：本文来实现上节提到的需求。推荐阅读方式：实操。

　　为了保证案例代码的足够简单，这里了不引入任何第三方css美化库，但为了使得案例的界面显得稍微规整，简单的写了一些css样式。实现UI界面如下图2.4.1所示。

图 2.4.1 （项目软件界面）

本文的内容将完整的实现上图的软件的功能，先介绍下本软件要完成的功能：①、软件加载完毕，如上图2.4.1所示，默认情况下不会开启摄像头，所以所有的配置按钮均不可用。②、当点击左上角的“开启摄像头”按钮，启动摄像头成功，黑框部分将显示采集到的摄像头视频画面，此刻“更新配置、开始录制、更新滤镜”这三个按钮可用。③、设置完“视频采集参数”后，点击“更新配置”，即可生效。④、设置完“视频滤镜”参数后，点击“更新滤镜”，即可实时更新视频滤镜。⑤、点击“开始录制”按钮，即可开始录制视频，同时在黑框的右下角显示已经录制的时长，此时“结束录制”按钮可用。⑥、当点击“结束录制”按钮，则提示用户将录制的视频保存，当用户点击保存视频则视频被下载到本地保存。通过完整的实现这个案例，我们将对webrtc的设备管理以及音视频数据采集有更深的理解。

　　 本案例中，html、css代码我不在赘述，读者自行从本书的讨论圆桌中下载，我主要讲解核心逻辑的设计。

第一、软件状态设计。我们先考虑软件的运行状态：加载完成、已开启摄像头、录制中、已关闭摄像头5种状态。，之所以要考虑运行状态是因为，不同的状态能操作的功能不一样，例如如果软件都没有加载完成，所有功能将不可用，包括“打开摄像头”功能；如果摄像头都没有打开，出了“开启摄像头”功能外，其他功能均不可用；如果未开始录制视频，则结束录制功能将不可用。只有设计了状态机制，我们才能处理这些功能的依赖关系。

第二、当软件加载完成，程序的状态变成“加载完成”，则开启摄像头功能可用。

第三、开启摄像头功能。这个功能将要读取默认摄像头并将视频播放到黑色的video标签中，如果成功，更新软件状态为“已开启摄像头”，此刻更新配置功能和更新滤镜功能可用。同时加载本机可用的视频输入设备列表到“采集设备选择”下拉选框中。如果失败，弹出提示信息“设备读取失败”。第四、更新配置功能。这里更新的是视频采集参数配置，更新完毕之后实时作用到视频采集中。第五、更新滤镜功能类似。第六、开始录制功能。如果开始视频的录制，软件状态为“录制中”，为了保证逻辑的严谨，只有“结束录制”功能可用。第七、结束录制功能。结束录制之后，状态再次变成“开启摄像头”状态、并提示用户下载视频到本地，如果用户选择下载，那么视频文件将保存到本地。

至此，软件逻辑设计完毕，接下来编码实现。

我们得有一个对象，用来存储软件当前运行状态，