手势切换背景，让直播带货更加身临其境

想让APP和微信一样，可以流畅运行小程序？ | 体验即送大疆、华为、樱桃键盘！>>>

前言

  由于今年疫情改变了各类人群的购物习惯，电商市场份额持续攀升，而直播电商作为一种崭新的交易方式正在重塑流量入口格局，越来越多消费者通过直播带货的方式进入商品页。因此主播为了获取更好的直播效果，往往要花费更多时间准备商品亮点介绍、优惠措施、展示环节，每一个环节都对最终交易结果产生直接影响。以往商家在固定布景的直播间带货，很容易让观众产生审美疲劳，当观众看不到自己对口的商品时往往因为不感兴趣而离开，除非超级段子手，否则主播无法在所有商品环节让每个观众保持兴致盎然，导致的结果可能是直播观看人数随着商品介绍不增反减。   现在借助华为机器学习服务推出的图像分割技术就可以实现根据不同商品品类、需求数字化实时替换各种静态和动态布景，让直播随着切换的各种风格背景变得生动有趣。该技术采用语义分割的方式分割出主播人像，比如介绍家居类商品时可以立即切换成家居风格的房间，介绍户外运动装备时也可以实时切换到户外，观众通过这种创新体验也更能找到身临其境的代入感。

功能介绍

  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