前端视角解密双十一晚会的魔术节目

本文涉及的产品
数据传输服务 DTS,数据迁移 small 3个月
推荐场景:
MySQL数据库上云
简介: 在云栖社区举办的云栖计算之旅第3期——前端专场沙龙中,阿里云数加资深前端工程师王朗从前端的视角为大家解密了双十一晚会的魔术节目。在分享中,他从软硬件两个角度出发详细讲解了ET的工作原理。

在2016年12月23日由云栖社区举办的云栖计算之旅第3期——前端专场沙龙中,阿里云数加资深前端工程师王朗从前端的视角为大家解密了双十一晚会的魔术节目。在分享中,他主要从软硬件两个角度出发详细讲解了ET的工作原理。


以下内容根据现场分享和幻灯片整理而成。


人工智能ET

在16年8月份的云栖大会上,阿里云正式推出了人工智能ET。在2016年双十一晚会上,为了引出马总及其后续节目,ET参与了一系列的魔术表演。

1dcbc23a1cc1e5deaaa8c39b19157b84d061c1fa 

从双十一的表演中来看,ET基本具备了语言识别和人机对话的能力。那么前端在ET开发中所扮演的角色和完成的工作是哪些呢?是如何保障双十一晚会的顺利进行的呢?下面来一探究竟。

 

技术环节

尽管ET魔术节目只有短短五分钟,但其背后价值却有五千万之多,因此其必须稳定工作,不容有失。

b686dcc06d160ac44625af0d723755d8b3df9083

上图是ET的整体架构图。当主持人通过话筒向ET询问一个问题后,前端机会通过浏览器H5的API来接收语音数据,接收到的数据有两个去向:一是通过数据传输层,送至后台的控制机,再通过控制机的语音识别将语音数据翻译成文本再返回给前端机做展示;同时会将语音数据进行人工智能的解析,得到问题的答案,再将该答案回交给前端机进行展示,形成完整的人机对话。音频数据另一个去向是通过DAC解码器进行音频解码,解码完成的数据转交给音控台,最后将音频数据转接到导播车,在导播车内将其与前端机传回的图像数据进行组装,最后通过卫星发送给全国各地的观众。

魔术过程中人脸识别环节的原理是:首先将摄像机拍摄下来SDI视频信号汇集到视频采集卡,再由采集卡统一发送给控制台的图像识别的服务进行人脸识别,然后再将解析出的人脸数据发送至前端机进行展示。

多路Websocket保障数据传输稳定

61d16731689f5e4b2e471de2fdf23adce1ad767b 

为了保障前端工作的稳定性,在前端的页面展现层和控制台服务之间增加了数据传输层。数据传输层实际是通过创建多路Web Worker做到多线程的管理,每个Web Worker会各自创建一个Websocket的长连接与控制台做交互。当其中一个Web Worker/Websocket挂掉,仍有备用的Web Worker/Websocket保障数据传输的稳定,保证节目可以顺利进行。

60fc3a77dd7bd0a3acc0b191ca16e66924920855 

在整体通信过程中,有两个较为重要的规则:

(1)只有当Worker获得令牌后才能给控制台发送数据,进行交互;如果Worker没有获得令牌,即便其与控制台间存在长连接,也无法发送数据。

(2)当Websocket进行创建或重连时,都会发送消息给页面展现层去抢令牌;当Websocket断掉或重连时,会释放掉令牌。

如上图所示,当页面刷新展示时,会创建两个Web Worker;Web Worker在长连接连接成功后会各自发消息给页面展现层抢夺令牌(先到先得);获得令牌的长连接进行消息的传输,当传输完成或连接断开后会释放该令牌;再由页面展现层通知这两个Worker再次进行抢令牌。整体过程类似于前端分布式、两段提交的过程。

但这样是远不够的:当其中一个Web Worker异常稳定时,Websocket会在很长一段时间内都连接着控制台,由长连接产生的数据会慢慢积累,必然导致控制台和前端的内存无法得到很好地释放,产生内存溢出现象。针对这种情况,对应增加了软重连和硬重连的机制:软重连是指控制台和Websocket之间的数据交互传输总量达到阈值时,直接断掉连接,释放内存和令牌,重新开展下一轮抢夺令牌;硬重连是指即便控制台和Websocket之间数据交互总量达不到阈值,但当连接时间超过一定的区间后,仍然会断开连接,释放内存和令牌,重新开展下一轮抢夺令牌。

语音的处理

在数据传输过程中,数据的格式和质量都必须得到保证。在语音采集端,引入了MediaStreamRecorder来实现语音采集,完美地解决了浏览器兼容性和版本问题;其次,对硬件设备进行了降噪处理,将语音识别率提高到90%以上。

013956aed143abba4ff118be4680bb9743fe272b 

语音数据的大小对系统的稳定性也有着很大的影响。当时宽带的上限是1M/S传输速率,前端默认采集的音频数据是44KHz的采样率;而控制台语音识别服务接收语音数据标准的采样率是16KHz。如果在前端将44KHz采样率的数据压缩到16KHz基本上不可能实现。因此采用了三段式压缩方式,将搜集到的音频数据每三段取一段,最后压缩到14KHz左右,效果也较好。

 

双十一晚会优雅降级预案

上文提到的数据通信和语音输入的保障都是软件层面的解决方案,但双十一晚会不仅仅需要考虑软件方面的稳定,还需要兼顾硬件的稳定性。为了避免硬件出现故障,在双十一晚会上准备了一系列的优雅降级预案。

 

dc69dad4b5f9d6e70ef95ade40358919920568b3 

如果摄像机的网络或者图像识别挂掉,前端机拿不到人脸识别的图像数据怎么办?对应的预案是在前端机预存了几张天猫的logo图,如果拿不到人脸识别图像,则用天猫Logo代替;如果语音识别挂掉怎么办?语音识别挂掉后,发过去的语音数据是得到不回应的,也就是无法显示字幕。对应的解决方案是在控制机中添加了隐藏字幕的机制,如果语音识别挂掉,则控制机不再显示字幕;如果控制机或控制机与前端机之间的网络挂掉该怎么办?对应的方案是在前端机内设置一套控制的机制,当前端机得不到控制机的反馈时,则通过前端机上预设的控制程序相对完整地保证节目进行。

 

不止是前端

在双十一晚会这类直播节目中,要做的不仅仅是让产品更稳定、性能更好,还需要对整个节目的Backup尽量做到极致。因此,这不仅仅是前端开发这么简单,还需要承担保障性的工作以及软硬件的对接、输入输出的格式/质量、与电视台完美对接等。

相关实践学习
RocketMQ一站式入门使用
从源码编译、部署broker、部署namesrv,使用java客户端首发消息等一站式入门RocketMQ。
Sqoop 企业级大数据迁移方案实战
Sqoop是一个用于在Hadoop和关系数据库服务器之间传输数据的工具。它用于从关系数据库(如MySQL,Oracle)导入数据到Hadoop HDFS,并从Hadoop文件系统导出到关系数据库。 本课程主要讲解了Sqoop的设计思想及原理、部署安装及配置、详细具体的使用方法技巧与实操案例、企业级任务管理等。结合日常工作实践,培养解决实际问题的能力。本课程由黑马程序员提供。
相关文章
|
2月前
|
前端开发 UED CDN
从前端工程师的视角看待用户体验优化
在当今互联网高度竞争的时代,用户体验优化已经成为各个企业追求的目标之一。作为前端工程师,我们不仅要关注页面的美观和交互设计,更要深入了解用户行为和需求,从而为用户提供更好的体验。
|
3月前
|
前端开发 JavaScript Java
从前端开发的视角来搭建本地java开发环境
从前端开发的视角来搭建本地 java 开发环境,其实主要也就 java 环境、maven 包管理工具、IntelliJ IDEA 开发工具这3个方面,对应前端中的 nodejs 环境、npm 包管理工具、vscode 开发工具。
38 1
|
设计模式 XML 数据可视化
降低前端业务复杂度新视角:状态机范式
无论做业务需求还是做平台需求的同学,随着需求的不断迭代,通常都会出现逻辑复杂、状态混乱的现象,维护和新增功能的成本也变的十分巨大,苦不堪言。下图用需求、业务代码、测试代码做对比:
261 0
降低前端业务复杂度新视角:状态机范式
|
前端开发 人机交互 UED
浅谈前端视角下的用户体验
浅谈前端视角下的用户体验
1211 0
浅谈前端视角下的用户体验
|
Web App开发 监控 程序员
从前端程序员的视角看小程序的稳定性保障
当我们谈业务稳定性的时候,通常是指后端工程师从架构的角度来看的,例如限流和降级、流量调度、业务开关、容量压测等,但监控也是整个业务稳定性建设中不可或缺的一环,例如对业务和前端的监控,以保证出现问题的时候,可以第一时间找到根因所在。
3727 1
|
前端开发 双11
前端视角解密双十一晚会的魔术节目
       有幸被邀请在23号的云栖社区大会上做了个前端相关的主题分享,分享的主题是——《前端视角解密双十一晚会的魔术节目》。        其实在今年8月份的云栖大会上,阿里云宣布推出人工智能ET,引起了业内的广泛关注。而在双十一晚会上,为了能够引出
2323 0
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
64 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
8月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
34 0