作者 | 覃栋

导读：作为时下最火的直播业务，这其中的前端技术是如何构建和思考的？淘宝直播技术团队通过直播开放体系的建设让直播遍地开花。

本文作者与你分享对直播技术思考。

遍地开花的直播

2020年5月17日，由阿里妈妈、淘宝直播、银河众星共同发起的国内首档直播节目——《向美好出发》重磅开启，主持人汪涵加入淘宝直播，重启阿里巴巴“春雷计划”，以文化带货的全新模式，助力国货崛起，促内销、稳外贸、助农兴农，扶持中小企业共渡疫情难关。

淘宝直播技术团队过去一年在ALive开放上持续深耕，沉淀了SDK开放、WEEX开放、小程序开放接入，完美支撑汪涵《向美好出发》直播，在手淘、优酷、支付宝、高佣联盟多平台同步开播，其中，蔚来汽车ES6场次观看人数累计2000w+，锁定超过1.28亿销售额。

那么，这么多APP、技术栈，我们是如何做到多个平台同时覆盖到同一场直播的呢？以下是我们的开放技术设计。

直播开放设计

总体架构中，我们的分层是这样的：

• 基础能力：最底层是基础的媒体技术，如播放器、低延时通道、双向通信，不同的平台有不同的实现
• app层：淘系环境包含weex容器、消息通道连接、容器生命周期管理，小程序侧包含同层渲染、容器api和小程序运行时
• 直播容器：直播容器层，负责定义组件的渲染规则、组件通用api、组件消息通道分发
• 接入物料：接入物料为二方、三方在对接时候所需要提供的组件，保护rax语法的和小程序语法的，在迭代过程，我们在图中最左侧设计了对应的研发支撑，支持接入方对接入物料进行初始化、构建、迭代、搭建、代码发布
• 开放投放：物料开放完成后，再上层是我们的ALive平台，负责组件的审核、上线，如果是淘系开放流程，ALive审核便可直接同步线上，而小程序开放流程，还需要在对应的开放平台进行提审、上线

小程序环境开放技术

过去一年，我们更多的是关注在淘系app环境下的开放对接，在淘系环境，我们面临着性能和效能低下的两个问题，针对性能，我们将组件规范进行了整合，抽象了直播容器，解决了过去多实例无法复用基础依赖的问题，并且给组件提供了丰富的容器能力，同时建设了对应的组件规范、工程体系、数据保障方案，过去有更详细的总结可以分享给大家，本文的重点是在小程序环境开发技术上的建设。

那么，对于业务来说，过去如果拥有了淘系app的基本环境（ali weex、淘宝直播SDK）就可以进行组件定制，但今天是一个全新的业务，并没有没有淘系app环境，想要更快速、轻量的进行对接，应该怎么做呢？

从过去的总结中可以知道，开放技术能顺利推行需要注意几个关键点：低成本接入、灵活定制、高产出，基于这几点考虑，我们重新梳理了native、小程序、weex/rax和h5各自在直播领域的优缺点

通过对比分析，我们不难发现，h5链路在「淘外app环境」由于体验问题、功能完备性、以及技术上存在一定的壁垒（H.265移动端播放），所以被我们首先放弃；客户端在淘外存在定制能力弱、动态化能力弱，所以也被pass；而weex方案在淘内有了很大范围的应用，也承接了很多的业务场景，因此也成为重点考虑方案之一，但是对比小程序，weex在淘外未必有更大的空间，而运行weex所需要的客户端依赖环境，也需要接入方技术、直播技术费不少精力进行适配（按照过去的对接情况，大约需要将近1个月的时间）。因此，综合分析动态化能力、容器依赖、定制能力等因素，小程序方案成了目前淘外开放的最优选。

小程序环境开放接入流程

而细分到小程序的场景，在流程上我们进行了接入方的定义、物料的定义和接入的细化：

• 首先我们将淘宝直播官方、二方、未来三方商户都作为直播搭建物料的产出方，是贯穿对接流程的主体

• 其次我们定义了官方插件、官方组件、二方组件、三方插件为搭建出一个观看端直播间的基本物料，解释如下：

  • 官方直播插件：包含直播基本能力，如直播间详情信息、播放、上下滑动、组件加载方案
  • 官方组件：内置于直播间插件的组件，如主播信息卡、宝贝口袋、评论、点赞等
  • 二方组件：具备二方业务特色的定制组件，如财富金融的金融口袋、金融公告，都属于二方组件
  • 三方插件：规划部分，未来当直播拥有了三方开放的能力，为了安全性、灵活性考虑，三方进来定制的方式必然是插件定制
• 当搭建物料准备完备后，搭建平台将模板、搭建组件通过云构建方式将物料构建成一个新的小程序实例
• 小程序实例产生后，与alive进行主播、直播类型绑定，最终由主播开播，投放到不同的观看端，观看端通过定义的插件规则、组件规则进行渲染，完成整个小程序直播开放的对接流程

直播小程序开放端设计

整个对接流程捋顺了后，最核心的问题是什么呢？便是直播插件和二方组件之间，通过什么方式进行连接、配合。

总体上，小程序直播间设计上我们分为几层：

• 直播插件：插件里除了包含最基本的播放器、无限列表、官方组件，还封装了组件布局规则、事件中心、容器api模块等基础能力
• 跨端通信层：由于插件和小程序宿主实例之间的js上下文完全隔离，因此@alipay/armer-x借助了appx对特定函数的声明不做序列化的特性进行了插件和宿主小程序之间的通信桥接，如给插件赋予函数onConnectEmitter，在appx里是不做会做序列化的，因此数据可以通过该函数给予插件通知信息

<live-room onConnectEmitter="onConnectEmitter" />

• 小程序组件：二方、三方定制的小程序组件，满足特定的接入规则就可以借助直播间的容器能力进行定制
• 小程序实例：在拥有了二方组件、直播插件后，我们可以将二者进行整合、打包构建，生成一个新的小程序实例，实例的生成方式可以通过IDE构建，也可以通过搭建平台，如：「闪蝶」（蚂蚁金服的一套搭建平台），目前我们的策略是支付宝侧通过闪蝶的方式构建生成实例，而百川侧，则通过IDE上传，并且借助淘宝开发平台进行百川投放，流程如下：

无论是哪条路径，基础物料都是组件、插件、模板，同时支持搭建平台（如闪蝶）构建生成实例，也支持通过ide进行构建生成实例，生成实例可以投放在百川小程序，与百川商业化环境集成提供给三方app，也可以直接投放在支付宝等支持蚂蚁小程序的app中（目前正在对接天猫精灵、口饿app）。

阶段成果

支付宝数金、生活号小程序

4月份，通过小程序直播开放流程，支付宝侧，我们支撑了如下场景的组件定制，成功应用于财富金融直播间、保险直播间、生活号直播间、网商直播间等，带来数量非常可观的直播用户增长：

一些例子

点击查看

百川小程序

百川侧，随同百川商业化sdk，我们覆盖了高佣联盟、省钱快报、花生日记等三方app，成功支撑了汪涵《向美好出发》直播

未来展望

1.小程序环境开放升级

目前小程序对接流程还未通过完整的工程化手段进行对接，模板代码初始化、调试、构建都采用最初级的方式进行，开发过程和直播插件提供的能力是没有办法联动的，仅仅是做到「可用」标准，距离「好用」还有一定的距离

比如，对接过程，我们的流程大致如上图，开发者需要不断感知各种平台，如迭代管理、alive、开放平台，而且每个平台都有非常多的概念，未来其实是通过可以将流程简化、收口的，减少用户的感知，让用户有一体化的体感

第二点，组件接入小程序时候，如果需要调用直播间插件的能力，是需要做一些前置工作的，如引入@ali/armer-x：

import { attachEmitter4C } from '@alipay/armer-x';
Component(
  attachEmitter4C({
    ...
  }, { rpc: true })
 )

类似这样的工作可以通过工程手段黑盒化，接入方感知到的概念越少，对于接入成本来说就越低。

2.淘系环境开放升级，拉通小程序开发流程

• 痛点：目前淘系环境开放依旧依赖于rax0.x，因此rax1.x的特性都没有能去享受到，并且按照目前的流程，淘系环境开放和小程序环境开放没有联动，对于业务来说，还有一定的接入成本
• 解法：淘系环境开放流程升级rax1.x，同时关注rax1.x与小程序dsl之间的互转，完成一套接入，多端投放的目标

3.构建全链路开放

• 痛点：直播对外开放做了一年多，更多的工作是围绕着二方的消费端开放，事实上也可将开播端能力进一步开放给二方，激励二方目标商家、达人进行入驻，同时在三方市场，存在着大量拥有强大运营能力的商家，但是这些商家并没有能力从0到1构建全链路直播，未来直播需要将更多不同层次的开播能力开放给二方、三方。对比友商腾讯，已经支持了直播能力全链路小程序化上云，支撑三方全链路构建直播能力。
• 解法：主播端小程序化，开放二方定制主播端场景，与观看端联动形成统一直播全链路定制方案。同时集成百川商业套件，配合百川生态能快速通过小程序将三方直播活动传播到各种应用场景，配合消费端小程序包括 iOS、Android等多平台播放，打造商业闭环。

4.探索媒体技术小程序化链路

在开放对接的过程中，我们一直朝着轻量化接入的方向努力着，但是无论在native集成接入，还是小程序接入，不免存在着依赖客户端环境集成的情况。也就是说当业务想要通过小程序方案构造自己的全链路直播能力时，不仅需要在自己的app里集成小程序环境，同时还需要拥有高可用的播放能力、双向通信能力、推流能力等，而这些能力在淘宝直播技术团队，已经有相对成熟的方案，因此我们在对接的时候需要将这些能力能够统一对外输出：

• 第一，提供统一的直播小程序依赖客户端部分的最小集成集合，避免接入方对接的时候，还需要去梳理依赖、联系不同的团队进行对接
• 第二，结合我们在pc上wasm 265的实践，可以探索在小程序环境应用wasm打包直播播放器，甚至推流、低延时通道，填补外部app没有高可用播放方案的空缺，同时也可以进一步降低对接方在客户端层面的对接成本。这样二三方在技术上就拥有了更灵活、可扩展的多媒体能力，从而打造稳定、高可用的直播全链路体系。

后续规划

围绕上述的展望，分为4个阶段去进行落地：

• 淘宝直播小程序化：完成淘宝直播自身的小程序化，包括频道页、预告、直播间、主播个人页等，打造淘宝直播自身在小程序的流量阵地，这个阶段已经完成
• 淘系开放+小程序开放升级：充分打磨淘宝直播小程序的产品后，将公有能力进行抽象、提取，形成直播小程序定制方案，开放二方业务进行接入，这个阶段已经拥有了初步的成果，但是流程还需要进一步打磨，并且该阶段需要进行淘系开放环境升级，使淘系开放和小程序开放进行联动，实现一套接入，多端投放
• 全链路开放：在完成了消费端的开放后，着手生产端开放，串联入驻、开播、直播间、投放全链路开放
• 媒体技术小程序化：进一步通过技术方向创新（如wasm），将多媒体团队核心技术——播放、低延时通道、推流等与小程序深度结合，以更解耦客户端、低成本的方式对外输出

最后

欢迎对淘宝直播感兴趣的同学一起交流，微信号（qindong0213、jovenpan）。

---

关注「Alibaba F2E」
把握阿里巴巴前端新动向