作者 | 覃棟
導讀：作為時下最火的直播業務，這其中的前端技術是如何建構和思考的？淘寶直播技術團隊通過直播開放體系的建設讓直播遍地開花。
本文作者與你分享對直播技術思考。
遍地開花的直播
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」
把握阿裡巴巴前端新動向