有幸被邀请在23号的云栖社区大会上做了个前端相关的主题分享，分享的主题是——《前端视角解密双十一晚会的魔术节目》。
其实在今年8月份的云栖大会上，阿里云宣布推出人工智能ET，引起了业内的广泛关注。而在双十一晚会上，为了能够引出马总及后面的节目，ET也参与表演了一个魔术。
在视频中大家会发现，ET有一段时间的停顿，没有很快地进行回话。是什么原因导致了这样一个情况发生。答案在最后揭晓。
下面让我们来看一下前端在整个工程中我们都做了哪些事情，来保障整个双十一节目的一个顺利进行。这一张是双十一当晚，ET的整个架构图。
这张图里可以看到所有的东西可以说都是由我们小组的前端同学在cover，包括整个的架构以及同电视台各个部门间的一个对接。我们不仅要进行页面的开发，还要保障整个节目的效果以及稳定性。为了保障整个的稳定性，我们在前后端的中间加入了一个数据的传输层，采用了创建多路webworker，然后每条worker同时创建websocket的方式，来保证数据在传输的过程中不会出现意外。即便有一个连接挂了，或者一个线程挂了，也会有备用的线程去保障这个传输。数据传输层的结构图如下：
当然每个worker里也有非常复杂的流程，如果两个线程同时都去进行数据的传输，那必然就会造成一个资源的浪费及数据的冗余的问题。所以我们做了一个前端的分布式设计，两段式提交。来实现多线程的一个协同。
除了数据的传输，在这个传输的通道上，传输的数据的大小及质量都是我们需要去保障的。主要包含了如下几块：
- 语音采集（ 引入MediaStreamRecorder来实现语音采集，解决浏览器兼容性及降级问题 ）
- 语音降噪
- 语音压缩（ 对音频进行三段式的压缩，最后将采样率从44Khz压缩到14Khz。即保证了清晰度，也更接近后端的接收标准，不影响语音解析 ）
上面讲到的这些东西都是软件层面的。如果中间硬件出问题了，我们该怎么办呢。因为当时这个节目，如果按照时间来算成本的话，浙江卫视在黄金时间5分钟的一个广告价格大约是5000万左右。所以在整个的节目过程中我们是绝对不允许失败的。所以我们当时做了很多的预案（ 大家可以参照上面的ET架构图来理解 ）。
- 图像识别功能挂了 -> 使用一个猫的图片来替换人脸
- 后台语音服务挂了 -> 隐藏ET的实时翻译字幕条
- 控制台机器挂了 -> 通过前端机预设的一套键盘指令保证节目继续进行
- 前端机也挂了 -> 这个...我们也想了办法，找了个配音演员在后台模拟ET的声音继续节目的表演
不只是前端！可以看到前端在整个事件中发挥的一个作用，不仅仅是工程的开发，我们还承担了大多数稳定性保障的工作，还需要关注到各种软件硬件的对接，输入输出的格式和质量。以及在直播过程中要去关注的一些保底的方案，及和电视台对接的方案。大家看到的东西可能只是我们前端在中间付出的冰山一角。
最后该来揭秘，为什么et在节目过程中会有一段失误。这并不是我们的服务挂了，这个锅应该是华少来背。因为主持人在台上的时候不止跟et有对话。跟观众跟参加魔术的美女都有对话。为了能知道哪些话是对et说的。我们采用了一个简单粗暴的办法。加入关键词，当对话中有这个关键词的时候，et才会去进行人机对话。但是在当时的对话里。华少不仅忘了词，还把关键词也忘了。导致了et没能进行正常的人机对话。那么大家来猜猜这个关键词是什么吧~