本周工作思考
Web录制本周已经完成了流程的主要架构设计开发和关键技术的开发和整合。架构基于tapable和web stream的事件合流的设计(参考数据流管道架构图)，主要解决两个关键问题：1 是录制，美颜，合成，上传等各个模块的耦合串联及扩展，通过tapable定义整个流程的钩子函数，让各个模块可以灵活通信及扩展，2 采用数据流管道的思想串联各个模块的数据，目的数据流生产和消费通过消息队列的方式生产录制流和消费录制流；
实现过程中比较花时间的是合成和美颜，合成选了两种技术方案，1是基于webassembly的FFmpeg多路视频流合成方案， 2是基于双video + canvas的画图方式；FFmpeg合流的方案比较成熟，现在涉及音视频合流的场景很多都是用FFmpeg实现的，web端的比较少见，@duanjun做了web端的技术预研，在录制项目我做完成了FFmpeg的接入，但是接入美颜后，涉及数据格式的转换，美颜基于opencv，返回的是帧图片，需要转成stream或者blob的形式使用FFmpeg ，所以从串联简单性考虑使用了canvas的方案，canvas方案是基本原理是每路流打入对应video并自动播放，同时捕获video帧数据，根据每路流的合成方式，使用canvas的绘制API绘制到canvas上，canvas的捕获流可以直接接入上传流；
web端FFmpeg的接入给我们带来了很多想象的地方，简单的如，上传的图片，音频，视频都可以在浏览器端加可见水印，这可以有效的保护讲师和企业的知识产权，复杂点的，我们可以在web端实现微课小节，视频小节，作业小节，直播回放的音视频材料的裁切及拼装等编辑，可以提升音视频内容小节的内容编辑能力和内容制作体验；
整个录制流程涉及的环节稍多，可以参考录制流程图，很多技术点在最初技术设计和技术预研上并未完全想到，这也是个比较大的教训，对与技术难点较多的项目，要比较完整的分析整体功能，对关键的代码结构，关键的技术实现有比较透彻的了解才能比较好的评估项目用时。
录制流程图
数据流管道架构图