前端视角解密天猫双11晚会的魔术节目

有幸被邀请在23号的云栖社区大会上做了个前端相关的主题分享，分享的主题是——《前端视角解密双十一晚会的魔术节目》。

       其实在今年8月份的云栖大会上，阿里云宣布推出人工智能ET，引起了业内的广泛关注。而在双十一晚会上，为了能够引出马总及后面的节目，ET也参与表演了一个魔术。

       在视频中大家会发现，ET有一段时间的停顿，没有很快地进行回话。是什么原因导致了这样一个情况发生。答案在最后揭晓。

       下面让我们来看一下前端在整个工程中我们都做了哪些事情，来保障整个双十一节目的一个顺利进行。这一张是双十一当晚，ET的整个架构图。

       这张图里可以看到所有的东西可以说都是由我们小组的前端同学在cover，包括整个的架构以及同电视台各个部门间的一个对接。我们不仅要进行页面的开发，还要保障整个节目的效果以及稳定性。为了保障整个的稳定性，我们在前后端的中间加入了一个数据的传输层，采用了创建多路webworker，然后每条worker同时创建websocket的方式，来保证数据在传输的过程中不会出现意外。即便有一个连接挂了，或者一个线程挂了，也会有备用的线程去保障这个传输。数据传输层的结构图如下：

       当然每个worker里也有非常复杂的流程，如果两个线程同时都去进行数据的传输，那必然就会造成一个资源的浪费及数据的冗余的问题。所以我们做了一个前端的分布式设计，两段式提交。来实现多线程的一个协同。

       除了数据的传输，在这个传输的通道上，传输的数据的大小及质量都是我们需要去保障的。主要包含了如下几块：

1. 语音采集（ 引入来实现语音采集，解决浏览器兼容性及降级问题 ）
2. 语音降噪
3. 语音压缩（ 对音频进行三段式的压缩，最后将采样率从44Khz压缩到14Khz。即保证了清晰度，也更接近后端的接收标准，不影响语音解析 ）

       上面讲到的这些东西都是软件层面的。如果中间硬件出问题了，我们该怎么办呢。因为当时这个节目，如果按照时间来算成本的话，浙江卫视在黄金时间5分钟的一个广告价格大约是5000万左右。所以在整个的节目过程中我们是绝对不允许失败的。所以我们当时做了很多的预案（ 大家可以参照上面的ET架构图来理解 ）。

阅读全文请点击：