背景：明天给大家带来的分享主题是《媒体智能 - 淘宝直播流媒体互动实际》，内容分为 5 个局部，首先看看在淘宝直播的直播间里主播能够怎么给用户拜年；而后具体讲如何制作一个手势拜年的特效；接着介绍咱们媒体智能整体的方案设计以及其中外围的工作之一，MediaAI Studio 这样一款编辑器的实现；最初讲讲咱们后续的建设方向。

直播间里怎么拜年？

马上又要过年了，每次过年咱们都会给亲朋好友拜年。那在直播间里，主播怎么给用户拜年呢？今年年初春节，咱们做了一个我的项目，就是让主播能够在直播间里给本人的粉丝拜年，而后在直播间里出一些春节的气氛特效。

具体的设计方案就是主播在直播的过程中，实时辨认主播的拜年手势，来触发一些春节气氛特效的渲染，同时实时辨认主播的脸部，来追随渲染一些人脸道具。

能够看到下面的几个成果示意，比方主播能够通过做一个爱心或者拜年的手势，来触发直播间的花字、对联或者礼花，也能够给主播的面部加上财神帽等人脸道具，加强直播间里的节日气氛。

制作手势拜年特效

那么要在直播的过程中做到这些成果，须要怎么来制作呢。接下来就具体介绍如何在直播间里制作这样一个手势拜年的特效。

大体上分为 4 个步骤，第一步是设计师通过一些设计软件制作好动态或动静的素材，比方财神帽及相干的微动效，交付物能够是一个序列帧动画；第二步是设计师在咱们自研的 MAI 编辑器里制作残缺的素材包，在这个编辑器里能够做画幅的适配、人脸识别追随、设置手势触发条件，实时的本地成果预览等；编辑好素材之后打包上传到内容素材平台；最初是前台的应用，也就是咱们的主播在推流端抉择开启一些素材玩法包，而后推流的过程中实时辨认和渲染合流，分发给用户端观看。

比方在编辑器里设置辨认一个手势，来触发特定的特效，大略的操作流程是这样的：首先增加一个素材贴纸，上传替换素材图片，能够是一个序列帧，而后调整贴纸的地位和大小，播放成果里抉择触发条件，通过拜年手势触发。怎么看成果呢？在右侧的预览成果里抉择咱们预制好的视频，就能够看到通过拜年手势触发了一个花字特效：

再比方咱们想给主播戴一个财神帽，大略的操作流程是这样的：首先还是增加素材贴纸，抉择财神帽的序列帧动画，调整大小和地位，在追随地位里抉择追随人脸的前额部位。预览成果，抉择咱们预制好的视频，能够看到主播在拍板的时候，财神帽也会跟着挪动，这样就像是给主播戴上了帽子：

素材制作好之后，前面就是上传、散发、应用，咱们能够看看在直播间里最终的实际效果：

媒体智能方案设计

后面咱们介绍了一个单点的 case，那咱们定义的媒体智能流媒体玩法到底是什么，接下来咱们具体介绍下媒体智能整体的方案设计。咱们再来看一个 case：

直播间里传统的红包雨互动，是在视频流上盖了一层一般的 H5 页面，和流内容是割裂的；咱们想做的媒体智能流媒体互动，是在视频流中渲染素材，并且主播能够通过手势来管制红包雨的发放，将直播内容和互动深度联合，晋升直播的互动率和停留时长。

咱们定义的媒体智能，就是在直播和视频流上，联合 AI/AR 玩法，造成新型的流媒体互动。作为前端，咱们的指标是构建从生产到生产的媒体智能计划，同时造成工程化链路，将流媒体互动的生产周期提效至「7+3+1」的模式，即 7 天算法开发、3 天玩法编写、1 天素材制作就能够上线一个全新的玩法。比方往年双 11 花「7+3+1」开发一个全新的玩法，在明年的日常，咱们只须要 1 天制作新素材，或者花 3 天改一下玩法逻辑，就能变种出一个新的玩法。

接下来咱们对计划进行了链路拆解，包含 4 个步骤，玩法生产、玩法治理、玩法应用和玩法展现。

生产者通过编辑器来生产玩法，通过素材平台来治理素材包，买通 ALive 平台做组件治理，主播通过多媒体生产端来应用玩法，在中控台做玩法配置和开启，在推流端做玩法执行和合流输入，同时通过 SEI 关键帧传输素材的地位、热区等信息，在直播间里通过直播容器来监听 SEI 和互动响应。

媒体智能的方案设计分为两个方面，智能素材和互动玩法。智能素材是面向产品、经营和设计师的，提供一站式的智能素材制作平台，互动玩法是面向开发者的，提供一个反对代码编写、调试、预览、部署的流媒体互动 IDE。

什么是智能素材，比方钉钉的 Real 如我，通过 MediaAI Studio 生产了大量的智能素材，给用户拍摄场景提供了很多人脸道具；今年春节咱们也生产了一些春节气氛利用在直播场景，比方直播间顶部和底部的这些春节气氛动效，以及通过辨认主播的拜年手势来触发的特效。

智能素材的技术计划其实比较简单，外围是约定了一套 JSON 协定的模块配置，底层依靠人脸检测、手势检测、物体辨认等算法能力，在配置层形象出模块，包含滤镜、贴纸、美颜美型、文字模板等，每个模块会做一些配置，包含款式、播放成果、动画等等，最初在终端上进行素材下载，实现配置解析，底层的渲染计算引擎依据配置做渲染计算，最初合流输入。

上面是咱们定义的模块 JSON 配置的案例，能够看到外面有编辑器版本、画幅、模块类型配置，以及素材的资源、地位大小信息、播放设置、触发设置、动画设置等。

什么是互动玩法，比方往年双 11 在淘宝直播里的一些案例，右边是小米超大杯挑战赛，能够看到主播通过身材来管制超大杯的挪动，来接管屏幕上方掉落的道具，左边是泡泡玛特的出道挑战赛，能够看到主播通过脸部来管制君子的静止，通过一些碰撞检测能够取得道具积分，来实现一些游戏逻辑。

要在直播过程中实现这样一套流媒体互动玩法，大抵的技术计划是这样的。联合后面提到的红包雨的 case，咱们做一下链路串联。首先通过 MediaAI Studio 这样一款编辑器来生成玩法素材和脚本，而后在 ALive 里新建一个红包雨组件并绑定玩法，主播通过中控台开启玩法，推流端下载、执行玩法脚本，把红包素材合在流里，用户播放端通过流里的 SEI 关键帧信息获取红包的地位，在 ALive 组件里生产这次互动，通过绘制热区响应用户操作。

编辑器 MediaAI Studio

后面屡次提到了玩法编辑器，在媒体智能的链路里咱们的外围工作之一就是要构建一个玩法生产的编辑器。

基于 Electron 咱们打造了 MediaAI Studio 这样一个玩法生产的编辑器，底层依赖客户端的跨平台渲染计算引擎 RACE，RACE 集成了算法推理框架 MNN 和算法平台 PixelAI，提供了根底的算法辨认、渲染计算的能力。

Electron 的主过程负责窗口治理、降级服务等，渲染过程里负责模块树等一些工具和编辑面板，以及实时渲染。同时渲染过程里开了一个 worker 线程，负责和 RACE 的 node 模块通信及一些图像处理。性能层面提供了工程治理、素材制作、玩法开发、账户治理等性能。

咱们把 RACE 的 c 模块封装成一个.node 的 c 扩大，通过 N -API 的形式做一些画幅解析、背景设置、渲染输入等性能，通过 JSBinding 调用 c ++ 模块实现 js 脚本能力。渲染局部会波及大量的画布像素替换和输入，在渲染层形象了 worker 层，包含背景更新、画幅更新、模块更新、Buffer 更新等。worker 和 render 之间是通过一些 JSON 协定和二进制的数据协定进行通信，来实现实时渲染的能力。

这是咱们实现的编辑器成果，

从设计师视角能够生产智能素材，这里用到了底部的固定贴纸、头上的人脸贴纸，和手势触发的贴纸：

以及开发者视角能够在编辑器里编写玩法脚本，这个 case 里是通过脸部辨认来管制小鸟静止轨迹，来实现的一个智能互动：

后续建设

媒体智能咱们也才刚开始摸索，目前次要是工具视角，外围通过 MediaAI Studio 这款 PC 桌面端工具提供智能素材和互动玩法的生产，后续会更多的和平台买通，包含和算法平台、素材平台、公布平台的买通，比方咱们的互动玩法里 js 脚本也须要合乎前端平安生产的标准，所以在编辑器里须要和公布平台买通实现我的项目创立、调试、CR、公布部署等能力。最初是基于工具和平台，提供设计师和 ISV 生态，甚至是商业化运作，疾速裁减直播流媒体互动的体量、丰盛玩法类型。

后记：D2 直播 QA

Q1: 前端在玩法特效这块承当了哪些工作（除素材编辑平台）

A1: 玩法链路次要分为 4 个环节：玩法生产、玩法治理、玩法应用、玩法展现。玩法生产的外围是 MediaAI Studio 这款编辑器，前端基于 Electron 打造的 PC 客户端；玩法治理次要是 ALive 平台；玩法应用是主播推流工具，咱们提供了 PC 和 APP 两个场景的工具，其中 PC 推流工具咱们也启动了 Electron 我的项目，把推流能力和特效玩法两局部更深度联合；玩法展现次要是直播间和短视频里的互动组件，这块整体的凋谢技术计划也是前端主导的。所以在各个环节，前端都承当了一些工作，其中生产、应用、展现环节前端承当了比拟外围的工作。

Q2: 特效检测频率如何选取？

A2: 推流自身的性能耗费比拟大，包含音视频采集、编码、美颜滤镜等等，所以在玩法特效的算法检测局部，咱们做了两层频率管制：一是整个玩法包的开启和敞开，只有当主播或助理明确开启某个玩法时，才会做相应的算法检测；二是不同的算法也有不同的检测设置，算法外部也分检测帧和追随帧，来尽量减少玩法检测的性能开销。

Q3: 辨认、合流别离在哪个端实现的? 流用的是什么技术和协定？

A3: 辨认、合流目前都是在主播推流端实现的，包含 PC 和 APP。流就是传统的直播技术和协定，推流 rtmp、拉流 hls 和 http-flv。

Q4: 直播有提早，合流是否会减少延时？怎么保障推流画面和用户交互之间的数据提早？

A4: 合流不会减少直播延时，如果算法执行太慢，一帧解决不完，会导致直播帧率变低，对于用户体感就是画面变卡。这里问的用户交互我了解是 C 端用户的交互，个别 C 端用户的交互和响应都是在 C 端实现的，目前没有碰到 C 端用户交互后还须要推流端实时响应的 case。如果是答题这类对流画面和内容同步度要求很高的场景，咱们会通过 SEI+CDN 的计划来保障画面和数据的同步。

Q5: 能举荐下手势监听的开源库吗？

A5: Google Research 开源的 MediaPipe

Q6: 辨认会不会显著减少前端包的大小？

A6: 不会，前端包的大小次要是素材资源和 js 脚本，算法模型和辨认能力是在端侧的，不会打到前端的包里。

Q7: 编辑器里的算法局部具体是用什么实现的？TFjs 吗？

A7: 不是 TFjs，算法的能力是 MNN 推理框架和 PIXAI 算法平台的能力，跨平台渲染计算框架 RACE 集成的也是这部分的能力。

Q8: 红包雨中，红包地位是不是随机的吗？如何预约义热区呢？

A8: 是随机的，推流端脚本执行后将红包绘制的地位、大小、形变等信息通过 SEI 关键帧传到播放端，播放端通过 SEI 解析后，前端还原出相应的热区，来响应用户操作事件。

Q9: 游戏局部的代码执行效率如何保障？

A9: 目前游戏局部是将 RACE c++ 代码通过 jsbinding 的形式供 js 调用，游戏画面由客户端进行渲染，而且 RACE 底层会做 JS 调用优化机制，因而执行效率上靠近原生。然而目前提供的 api 较少，随着业务复杂度越来越高，游戏的开发效率倒是成了瓶颈，接下来咱们在思考通过 RACE canvas 提供的 WebGL 协定接口，适配淘内支流 H5 游戏引擎，借助 H5 游戏欠缺的互动能力和引擎生态，再联合多媒体互动特有 api，进行流媒体互动开发，实现一次开发，多渲染引擎运行。

作者：林晚
原文链接
本文为阿里云原创内容，未经容许不得转载