背景：今天給大家帶來的分享主題是《媒體智能-淘寶直播流媒體互動實踐》，內容分為5個部分，首先看看在淘寶直播的直播間里主播可以怎樣給用戶拜年；然后具體講如何制作一個手勢拜年的特效；接著介紹我們媒體智能整體的方案設計以及其中核心的工作之一，MediaAI Studio這樣一款編輯器的實現；最后講講我們后續的建設方向。

目錄

今天給大家帶來的分享主題是《媒體智能-淘寶直播流媒體互動實踐》，內容分為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

https://github.com/google/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，進行流媒體互動開發，實現一次開發，多渲染引擎運行。

作者：林晚

原文鏈接?

本文為阿里云原創內容，未經允許不得轉載

?

總結

以上是生活随笔為你收集整理的媒体智能-淘宝直播流媒体互动实践 | D2 分享视频+文章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。