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

前言

由于今年疫情改变了各类人群的购物习惯,电商市场份额持续攀升,而直播电商作为一种崭新的交易方式正在重塑流量入口格局,越来越多消费者通过直播带货的方式进入商品页。因此主播为了获取更好的直播效果,往往要花费更多时间准备商品亮点介绍、优惠措施、展示环节,每一个环节都对最终交易结果产生直接影响。以往商家在固定布景的直播间带货,很容易让观众产生审美疲劳,当观众看不到自己对口的商品时往往因为不感兴趣而离开,除非超级段子手,否则主播无法在所有商品环节让每个观众保持兴致盎然,导致的结果可能是直播观看人数随着商品介绍不增反减。

现在借助华为机器学习服务推出的图像分割技术就可以实现根据不同商品品类、需求数字化实时替换各种静态和动态布景,让直播随着切换的各种风格背景变得生动有趣。该技术采用语义分割的方式分割出主播人像,比如介绍家居类商品时可以立即切换成家居风格的房间,介绍户外运动装备时也可以实时切换到户外,观众通过这种创新体验也更能找到身临其境的代入感。


功能介绍

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'后添加applyplugin: 'com.huawei.agconnect'


4.自动更新机器学习模型

在AndroidManifest.xml文件中添加

   ...


       android:name="com.huawei.hms.ml.DEPENDENCY"

       android:value="imgseg,handkeypoint" />

   ...


5.创建图像分割检测器。

MLImageSegmentationAnalyzer

imageSegmentationAnalyzer =

MLAnalyzerFactory.getInstance().getImageSegmentationAnalyzer();//图像分割分析器

MLHandKeypointAnalyzer handKeypointAnalyzer

= MLHandKeypointAnalyzerFactory.getInstance().getHandKeypointAnalyzer();//手势识别分析器


MLCompositeAnalyzer analyzer = newMLCompositeAnalyzer.Creator()

                                    .add(imageSegmentationAnalyzer)

                                   .add(handKeypointAnalyzer)

                                   .create();


6.创建识别结果处理类

public class ImageSegmentAnalyzerTransactorimplements MLAnalyzer.MLTransactor {

   @Override

   public void transactResult(MLAnalyzer.Resultresults) {

       SparseArray items = results.getAnalyseList();

       //开发者根据需要处理识别结果,需要注意,这里只对检测结果进行处理。

       //不可调用ML Kit提供的其他检测相关接口。

    }

   @Override

   public void destroy() {

       //检测结束回调方法,用于释放资源等。

    }

}


public class HandKeypointTransactorimplements MLAnalyzer.MLTransactor> {

   @Override

   public voidtransactResult(MLAnalyzer.Result> results) {

       SparseArray> analyseList = results.getAnalyseList();

       //开发者根据需要处理识别结果,需要注意,这里只对检测结果进行处理。

       //不可调用ML Kit提供的其他检测相关接口。

    }

   @Override

   public void destroy() {

       //检测结束回调方法,用于释放资源等。

    }

}


7.设置识别结果处理器,实现分析器与结果处理器的绑定

imageSegmentationAnalyzer.setTransactor(newImageSegmentAnalyzerTransactor());

handKeypointAnalyzer.setTransactor(newHandKeypointTransactor());


8.创建LensEngine

Context context =this.getApplicationContext();

LensEngine lensEngine = newLensEngine.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 = newSurfaceView(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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355