手勢切換背景，讓直播帶貨更加身臨其境

前言

  由於今年疫情改變了各類人群的購物習慣，電商市場份額持續攀升，而直播電商作為一種嶄新的交易方式正在重塑流量入口格局，越來越多消費者通過直播帶貨的方式進入商品頁。因此主播為了獲取更好的直播效果，往往要花費更多時間准備商品亮點介紹、優惠措施、展示環節，每一個環節都對最終交易結果產生直接影響。以往商家在固定布景的直播間帶貨，很容易讓觀眾產生審美疲勞，當觀眾看不到自己對口的商品時往往因為不感興趣而離開，除非超級段子手，否則主播無法在所有商品環節讓每個觀眾保持興致盎然，導致的結果可能是直播觀看人數隨着商品介紹不增反減。
  現在借助華為機器學習服務推出的圖像分割技術就可以實現根據不同商品品類、需求數字化實時替換各種靜態和動態布景，讓直播隨着切換的各種風格背景變得生動有趣。該技術采用語義分割的方式分割出主播人像，比如介紹家居類商品時可以立即切換成家居風格的房間，介紹戶外運動裝備時也可以實時切換到戶外，觀眾通過這種創新體驗也更能找到身臨其境的代入感。

功能介紹

  Demo基於華為機器學習服務推出的圖像分割和手部關鍵點識別兩大技術，開發通過手勢切換背景功能，為了避免誤操作，本次Demo設置只有大幅揮手時才切換背景，加載自定義的背景后支持向前切換（向右撥動）和向后切換（向左撥動），操作方式和手機一致，支持動態視頻背景，同時如果想采用定制化的手勢進行背景切換或實現其他手勢特效，可以集成華為ML Kit手部關鍵點識別進行定制開發。

  是不是很具有想象力的交互體驗？讓我們一起看看是如何實現的。

開發步驟

1. 添加HUAWEI agcp插件以及Maven代碼庫。

buildscript {
    repositories {
        google()
        jcenter()
        maven {url 'https://developer.huawei.com/repo/'}
    }
    dependencies {
        ...
        classpath 'com.huawei.agconnect:agcp:1.4.1.300'
    }
}
  
allprojects {
    repositories {
        google()
        jcenter()
        maven {url 'https://developer.huawei.com/repo/'}
    }
}

2. Full SDK方式集成。

dependencies{
     // 引入圖像分割基礎SDK
    implementation 'com.huawei.hms:ml-computer-vision-segmentation:2.0.4.300'
    // 引入多類別分割模型包
    implementation 'com.huawei.hms:ml-computer-vision-image-segmentation-multiclass-model:2.0.4.300'
    // 引入人像分割模型包
    implementation 'com.huawei.hms:ml-computer-vision-image-segmentation-body-model:2.0.4.300'
    // 引入手勢識別基礎SDK
    implementation 'com.huawei.hms:ml-computer-vision-handkeypoint:2.0.4.300'
    // 引入手部關鍵點檢測模型包
    implementation 'com.huawei.hms:ml-computer-vision-handkeypoint-model:2.0.4.300'
}

3. 在文件頭添加配置。
     在apply plugin: 'com.android.application'后添加apply plugin: 'com.huawei.agconnect'

4. 自動更新機器學習模型
     在AndroidManifest.xml文件中添加

<manifest
    ...
    <meta-data
        android:name="com.huawei.hms.ml.DEPENDENCY"
        android:value="imgseg,handkeypoint" />
    ...
</manifest>

5. 創建圖像分割檢測器。

MLImageSegmentationAnalyzer imageSegmentationAnalyzer = MLAnalyzerFactory.getInstance().getImageSegmentationAnalyzer();//圖像分割分析器
MLHandKeypointAnalyzer handKeypointAnalyzer = MLHandKeypointAnalyzerFactory.getInstance().getHandKeypointAnalyzer();//手勢識別分析器
  
MLCompositeAnalyzer analyzer = new MLCompositeAnalyzer.Creator()
                                    .add(imageSegmentationAnalyzer)
                                   .add(handKeypointAnalyzer)
                                   .create();

6. 創建識別結果處理類。

public class ImageSegmentAnalyzerTransactor implements MLAnalyzer.MLTransactor<MLImageSegmentation> {
    @Override
    public void transactResult(MLAnalyzer.Result<MLImageSegmentation> results) {
        SparseArray<MLImageSegmentation> items = results.getAnalyseList();
        // 開發者根據需要處理識別結果，需要注意，這里只對檢測結果進行處理。
        // 不可調用ML Kit提供的其他檢測相關接口。
    }
    @Override
    public void destroy() {
        // 檢測結束回調方法，用於釋放資源等。
    }
}
  
public class HandKeypointTransactor implements MLAnalyzer.MLTransactor<List<MLHandKeypoints>> {
    @Override
    public void transactResult(MLAnalyzer.Result<List<MLHandKeypoints>> results) {
        SparseArray<List<MLHandKeypoints>> analyseList = results.getAnalyseList();
        // 開發者根據需要處理識別結果，需要注意，這里只對檢測結果進行處理。
        // 不可調用ML Kit提供的其他檢測相關接口。
    }
    @Override
    public void destroy() {
        // 檢測結束回調方法，用於釋放資源等。
    }
}

7. 設置識別結果處理器，實現分析器與結果處理器的綁定.

imageSegmentationAnalyzer.setTransactor(new ImageSegmentAnalyzerTransactor());
handKeypointAnalyzer.setTransactor(new HandKeypointTransactor());

8. 創建LensEngine

Context context = this.getApplicationContext();
LensEngine lensEngine = new LensEngine.Creator(context,analyzer)
    // 設置攝像頭前后置模式，LensEngine.BACK_LENS為后置，LensEngine.FRONT_LENS為前置。
    .setLensType(LensEngine.FRONT_LENS)
    .applyDisplayDimension(1280, 720)
    .applyFps(20.0f)
    .enableAutomaticFocus(true)
    .create();

9. 啟動相機，讀取視頻流，進行識別。

// 請自行實現SurfaceView控件的其他邏輯。
SurfaceView mSurfaceView = new SurfaceView(this);
try {
    lensEngine.run(mSurfaceView.getHolder());
} catch (IOException e) {
    // 異常處理邏輯。
}

10. 檢測完成，停止分析器，釋放檢測資源。

if (analyzer != null) {
    try {
        analyzer.stop();
    } catch (IOException e) {
        // 異常處理。
    }
}
if (lensEngine != null) {
    lensEngine.release();
}

總結

  綜上，通過引入包、建立檢測、分析與結果處理等幾個簡單的步驟就可以快速實現這個小小的黑科技。另外通過圖像分割技術，我們還可以做很多東西，比如視頻網站中的蒙版彈幕，結合一些前端渲染技術輕松避免彈幕遮蓋人體部分，或者利用現有素材制作各種尺寸的精美寫真照片，語義分割的一大好處就是可以精准地控制你想要分割出來的物體，除了人像還可以對美食、寵物、建築、風景甚至花花草草等進行分割，再也不用死磕電腦上的專業修圖軟件了。

Github Demo

更詳細的開發指南參考華為開發者聯盟官網：https://developer.huawei.com/consumer/cn/hms/huawei-mlkit

---

原文鏈接：https://developer.huawei.com/consumer/cn/forum/topic/0204395267288570031?fid=18
原作者：timer