#OpenHarmony学生挑战赛# 基于增强现实技术的交互式导购系统 原创

@toc

项目摘要

  随着世界经济的高速发展，科学技术的深度应用将是未来各行各业升级换代的必然趋势。家居行业经历近30年的快速发展，逐渐从传统的工业化向科技化转变。我们的沉浸式导购项目无疑是家居行业的一项新举措，尤其是在后疫情时代沉浸式导购的无接触式这一特点更能有效避免接触式微生物传播，给人们的生活带来极大便利，是一个全新的、特别的数字化城市生活应用场景。

  我们的沉浸式导购项目集成广告选择模块、环境理解识别、人体理解与真实模型渲染模块、web网页端模块、鸿蒙APP模块，以实现动态沉浸式导购效果和后台各项数据动态展示，并针对客户提供个性化定制服务。

  沉浸式导购的概念出现于2015年左右，2018年后随着电子商务的指数级增长开始被广泛报道。2021年10月，ReportLinker推出的沉浸式导购市场研究报告指出，全球沉浸式导购市场规模在2020年为34.6804亿美元，预计2021年达到39.4140亿美元，到2026年

一.项目背景

1.1.非接触式”的广泛应用

  非接触式就是指人和人，以及人和具体的实物保持一定的距离，不发生直接接触。“非接触式”服务依靠人工智能、大数据、物联网等一系列新兴科技手段做支撑，已广泛应用于智慧物流、智慧零售、智能安防等领域。

  2019年爆发的新冠疫情是发生传播速度最快、感染范围最广、防控难度最大的一次突发公共卫生事件。

  新冠肺炎疫情之下，有效阻断“人传人”的传播链条是关键。于是，机器人承接了消毒清洁、送药送餐、诊疗辅助等“一线工作”，VR看房、在线娱乐、在线教育等也成为大众居家必备之选，而打造无人工厂、自动化产线的需求比以往任何时候都显得更为迫切。这些“非接触式”服务的变革，不仅催生了新的经济模式——“非接触经济”，如在线办公、在线医疗等，还为人工智能带来新的产业机遇。

  “非接触式”并不是一个新鲜事物，从20世纪七八十年代兴起至今，其已经过了五个发展阶段。

  2002年发生的SARS疫情催生了第一次非接触式经济的热潮。2020年年的新冠疫情则加速了‘非接触式’服务和‘非接触式’经济的发展，促使‘非接触式’进入了第五个主要发展阶段。此次疫情期间，“非接触式”技术应用呈现出一些亮点，除了上文提及的非接触式体温检测、机器人外，还有在线教育、远程办公、无人机大量应用、线上义诊、零接触电梯等，甚至有一些“非接触式”服务通过高清直播来完成，如火神山和雷神山的“云监工”。

1.2.后疫情时代的时代背景

  “后疫情时代”，顾名思义，是指新冠疫情过去后的时代。但在后疫情时代疫情未必完全消失，而是时有起伏，从外国外地回流及季节性发作，迁延较长时间，对人类社会各方面产生深远影响，从而不可能完全都恢复如前了。

  “后疫情时代”因此是以疫情被基本控制为节点，经历疫情后人类已具备应对病菌变异的相应医疗救治条件，并在此基础上形成新的生产生活状态的时代，全球经贸往来得以恢复正常。危机可能也是商机，积极适应环境变化，顺应优胜劣汰，才能生存发展。

1.3.元宇宙导致AR爆火

  近年来，元宇宙成为热门话题，尤其是新冠疫情爆发以来，人们越来越多活动转移到线上。通过增强现实和虚拟现实等沉浸式体验，用户可在元宇宙这一虚拟现实空间与电脑生成的环境和其他人互动，完成社交、娱乐、办公和游戏等活动。

  VR/AR技术，是通往元宇宙的关键接口。

  新冠疫情爆发以来，远程办公、在线娱乐等多种应用场景大规模成为现实，激发了市场对虚拟现实技术及其应用空间的进一步想象。而随着移动互联网增长见顶，从业者也需要寻求下一轮流量爆发的“风口”，于是高度仿真、沉浸体验的相关技术和应用场景进入了他们的视线。

  AR/VR打破了距离和地理位置限制，可用于远程社交、远程协作办公、远程指导等多种现场场景，其最大的优势是可以让用户在支持定制的虚拟空间中建立联系，利用虚拟形象代表自己，再加上远程交互等体验，沉浸感和临场感足够强。

二.团队介绍

2.1.团队概述

  我们的研发团队是一家专注于沉浸式导购技术研发的在校创新创业团队项目成员共有四位，各自擅长不同的领域。目前整个项目是以学生为主导开发，多名指导教师、顾问教师帮助我们完成该项目。

2.2.专业背景

  九位项目成员分别来自各个不同的互联网类专业：包括：软件工程、智能物联、大数据、嵌入式软件和网络云开发等，我们有不同的专业背景，项目制作过程中能够将知识融合和改进，李鑫冉和张庆峰有丰富的软件专业背景，熟悉掌握java开发，虚拟vr，机器视觉等领域，李旭亭有着丰富的数据科学背景，对数据有多个层面的敏感度，熟悉掌握mysql语言，和django框架，任家辉有丰富的物联背景，精通单片机的开发，田沛宇熟悉动作识别算法，张瑛芬能够进行前端开发和UI设计，董家豪能够掌握硬件的开发，许佳丽和郭昊熟悉后端的开发和部署。

三.应用场景

  在疫情前，线上下沉市场的力量已经开始崭露头角。以拼多多为代表的主打下沉市场的移动电商平台，在疫情后，随着这疫情期间，对下沉市场人们消费模式和习惯的培养，会有更多的以前未被激活的人群，开始线上购买产品和服务的消费模式。

  随着全球逐步进入疫情后复苏期，线下消费的日益反弹，以线下体验与互动为基础的沉浸式体验开始再次进入蓬勃发展期。除了传统的剧本杀，密室等相对成熟的产品类型，Moment Factory和teamLab为代表的艺术导向、融合技术的混合建模方式日益受到关注。而在疫情期间线上体验的技术探索，进一步打开了行业对于沉浸式技术的想象空间。

  既然购物都是在线上完成的，那么实体店的存在价值体现在哪里呢？未来的实体店将不再是以“销售产品”为中心，而是以“提供体验”为核心。人们去实体店不再是为了买东西，而是为了购买各种“体验”。如果实体店仍旧把自己当成买卖的场所，那么即将失去存在的价值。

  疫情期间线上体验的技术探索，进一步打开了行业对于沉浸式技术的想象空间。另一方面，随着全球逐步进入疫情后复苏期，线下消费的日益反弹，将加剧对沉浸式体验的需求，从而推动沉浸式体验的升级。

四.产品功能

4.1.商品选择模块

  项目采用mediapipe人体特征点检测框架，检测人体躯干的33个特征点和手部的21个关键点，为了减少多个关键点造成的混乱问题，我们采用用右手的手心作为唯一定位点，通过屏距比实现投影效果，计算出用户手掌的关键点在屏幕上的投影点，通过坐标变换来实现效果。通过xy值归一化显示标识点在平面上的位置信息，通过z值显示标识点的深度信息，实现三维的检测效果。元节点混合，提高了模型检测时间，实现更低时延的识别效果。

4.2.喜好推荐模块

  客户使用鸿蒙APP从而针对客户提供个性化定制服务，鸿蒙系统是面向全场景的分布式操作系统，具有分布式软总线、分布式数据管理、分布式安全的特性。客户可以在APP端进行登录、注册个人账号，进行用户信息的相关数据统计，能够进行品牌订阅和查看当季新品。项目采用协同过滤算法实现服饰推荐效果，展现在鸿蒙app上，为用户生成唯一的个性化标签，通过个性化标签将人群划分为小群体，在小群体内实现喜好服饰的数据共享，即喜好推荐。

4.3.部分前端代码展示

__<div>  
    <div id="wrapper">  
        <div id="div1">  
            <div id="div2">  
                <div id="div3">  
                    <image id="image1" src="/pages/index/mediap/返回\.png"></image>  
                    <text id="text1">椅子</text>  
                </div>  
            </div>  
            <div id="div4">  
                <select id="select1"></select>  
                <select id="select2"></select>  
                <select id="select3"></select>  
            </div>  
            <image id="image3" src="/pages/index/mediap/1\.jpg"></image>  
            <image id="image5" src="/pages/index/mediap/2\.jpg"></image>  
            <text id="text2">椅子家具舒适电脑椅简约现代风格电竞椅</text>  
            <text id="text3">椅子家具舒适电脑椅简约现代风格电竞椅</text>  
            <image id="image12" src="/pages/index/mediap/3\.jpg"></image>  
            <image id="image11" src="/pages/index/mediap/4\.jpg"></image>  
            <text id="text5">椅子家具舒适电脑椅简约现代风格电竞椅</text>  
            <text id="text4">椅子家具舒适电脑椅简约现代风格电竞椅</text>  
            <image id="image14" src="/pages/index/mediap/1\.jpg"></image>  
            <image id="image13" src="/pages/index/mediap/2\.jpg"></image>  
            <text id="text7">椅子家具舒适电脑椅简约现代风格电竞椅</text>  
            <text id="text6">椅子家具舒适电脑椅简约现代风格电竞椅</text>  
        </div>  
        <image id="image8" src="/pages/index/mediap/1\.jpg"></image>  
        <image id="image7" src="/pages/index/mediap/1\.jpg"></image>  
        <image id="image6" src="/pages/index/mediap/1\.jpg"></image>  
    </div>__
#wrapper {
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

#div1 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#div2 {
    width: 100%;
    height: 100px;
}

#div3 {
    width: 100%;
    height: 373.31px;
    margin-top: 8px;
}

#image1 {
    width: 87px;
    height: 85.28px;
    margin-top: 6px;
    margin-left: 12px;
}

#text1 {
    height: 60px;
    width: 200px;
    margin-left: 200px;
    margin-top: 10px;
    font-size: 49px;
}

#div4 {
    width: 100%;
    height: 100px;
}

#select1 {
    width: 200px;
    height: 60px;
    margin-top: 20px;
    margin-left: 30px;
}

#select2 {
    width: 200px;
    height: 60px;
    margin-top: 20px;
    margin-left: 30px;
}

#select3 {
    width: 200px;
    height: 60px;
    margin-top: 20px;
    margin-left: 30px;
}

#image3 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#image5 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#text2 {
    height: 103.86px;
    width: 291.1px;
    margin-right: 20px;
}

#text3 {
    height: 103.86px;
    width: 291.1px;
    margin-right: 20px;
}

#image12 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#image11 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#text5 {
    height: 103.86px;
    width: 291.1px;
    margin-right: 20px;
}

#text4 {
    height: 103.86px;
    width: 291.1px;
    margin-right: 20px;
}

#image14 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#image13 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#text7 {
    height: 103.86px;
    width: 291.1px;
    margin-right: 20px;
}

#text6 {
    height: 103.86px;
    width: 291.1px;
    margin-right: 20px;
}

#image8 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#image7 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

#image6 {
    width: 294px;
    height: 294.48px;
    margin-right: 21px;
}

五.项目创新点

5.1.沉浸式体验

  项目通过增强现实技术将产品视觉化，使用华为HMS的场景化组件化的极简解决方案，理解真实世界提供增强现实效果，将商品的实物模型在真实世界中渲染出来，让用户沉浸式体验商品，从而提升用户黏性。

5.2.可视化数据反馈

  产品后台均采用可视化数据展示，数据可视化的一个重要优势，是它使用户能够更有效地查看在操作条件和业务性能之间发生的连接。在当今竞争激烈的商业环境中，在数据中找到这些相关性从未如此重要。

  利用数据可视化，我们可以更深入地了解客户情绪和其他数据，从而揭示他们向客户推出新服务的新机遇。这些有用的见解使企业能够采取新的商机，以保持领先于竞争对手。

5.3.无接触式交互

  项目采用无接触式商品视觉引导，通过使用mediapipe人体姿态识别和手部特征点检测实现隔空切换商品广告效果，用户通过手势切换查看静态广告、播放动态广告视频和查看商品实景效果的功能。有效减少了微生物传播的途径，是后疫情时代下公共卫生健康安全的守护者。

【本文正在参加物联网有奖征文活动】，活动链接：https://ost.51cto.com/posts/14758