CN106384388A - 基于html5和增强现实技术的互联网眼镜实时试戴方法及系统 - Google Patents

Abstract

本发明涉及一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，根据人脸识别+HTML5 +视频流+眼镜绘制的思想，HTML5前台展示模块中，通过摄像机获取的视频流，用JavaScript预处理后进行人脸扫描，并进入图像识别与增强现实模块进行相关判断与处理，接着调用后台服务器模块获取用户试戴的眼镜模型，确定眼镜位置后进行试戴，最后视频流合并输出到HTML5前台展示模块。在点击预览后，图片缓存预览模块会截取视频当前帧进行缓存并预览，点击分享后，进入上传与分享模块中处理。本发明克服了flash插件的平台依赖，速度更快，更加易用。

Description

基于HTML5和增强现实技术的互联网眼镜实时试戴方法及 系统

技术领域

本发明涉及互联网购物体验领域，特别是一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法及系统。

背景技术

增强现实（Augmented Reality，简称 AR），是近几年发展中越来越火的技术，它将现实世界的信息和虚拟世界的信息无缝集成，是把原本在现实世界的一定时间空间范围内很难体验到的实体信息，模拟仿真后再叠加，将虚拟的信息应用到真实世界，产生了一个新的混合环境。随着经济的发展和技术的进步， AR技术如今已经广泛应用于各个领域，人们对于AR的需求也越来越多。

随着消费水平的提高，人们对物质水平和用户体验的要求也越来越高。为用户提供网上商城上饰品（如眼镜）的试戴效果预览，将会极大的增强用户的真实体验，提高用户购买成功率。传统的眼镜试戴效果是主要是以产品为中心，主要是提供给用户所需要的多种角度的产品渲染图和模特试戴效果的合成图，缺乏互动效果和实时试戴的体验。当然，目前还存在一些基于增强现实的眼镜试戴技术方法。眼镜试戴效果的实现方案主要分为以下几种：

（1）通过在摄像头中央一次性生成静态的眼镜模型。这种试戴方法是一种比较笨拙的办法，一次性把试戴的眼镜绘制在摄像头的中央，用户需要调整自己与摄像头的距离和角度去适应眼镜的大小，不够人性化。

（2）通过拍照上传处理的方式。用户拍照并将头像上传，在服务器合成用户和产品的最终效果图再反馈给用户，取得了一定效果。

（3）通过基于flash插件的眼镜试戴。目前，效果比较成熟试戴方式是基于flash插件的眼镜试戴，这种效果需要在客户端安装并运行相关的flash插件，尽管实现的灵活性比前者好，但是由于flash 本身的局限性，目前已经不是主流的构建方式。

另外，随着电子商务的蓬勃发展，越来越多的人依赖于虚拟试戴的预览效果来挑选自己喜欢的款式。网络上的图像预览，对计算机的存储能力和网络的传输能力有着更高的要求。虚拟试戴的静态帧预览需要用到缓存策略，传统的图像缓存策略一般有两种解决方式。一类是截取静态帧并在服务器上的指定位置上生成缓存图片，然后返回图片的网络地址并在指定页面上显示，显然需要传输大量的图像数据；另一类是下载后显示，即把要显示的静态帧预先下载到本地，等待下载完毕后再用看图软件打开显示。

发明内容

有鉴于此，本发明的目的是提出一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法及系统，克服了flash插件的平台依赖，速度更快，更加易用。

本发明采用以下方案实现：一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，包括以下步骤：

步骤S1：采集人脸数据，获得人脸数据集；

步骤S2：将步骤S1获得的人脸数据集用于训练人脸机器学习模型得到人脸训练库，所述人脸训练库的数据包括人脸的宽度、人脸的高度，人脸的数量，特征点位置坐标、图像分类器；

步骤S3：摄像头获取视频流，从JavaScript函数获取HTML5的摄像头视频流，并将视频流以URL的方式导入HTML5页面的节点中；

步骤S4：扫描步骤S3的视频流，对用户的头像进行预处理，弱化光照、背景的干扰，根据特征点位置提取算法计算出人眼的位置；用灰度投影法、曲面匹配法将摄像头获取的人脸数据与步骤S1中的人脸数据集进行原型比对判断，若存在相似的原型，则将计算出的人眼位置存储标记为眼睛的正确位置，并记录眼睛的深度值；

步骤S5：从图片服务器中加载用户选择的眼镜模型，根据人脸大小、角度、眼睛的深度值及特征点位置对眼镜模型进行缩放、旋转用以适应人脸、眼睛的大小与位置；将人脸与眼镜模型的视频流合并后输出；

步骤S6：摄像头实时获取视频流，判断人脸的移动是否超过预设的阈值，如果是，则返回步骤S4。

进一步地，包括步骤S7：若用户要截图预览，截取人脸与眼镜模型的合并视频流的当前帧并缓存到页面的HTML标签中提供预览，通过分享接口调用并上传服务器，分享用户试戴眼镜的最终效果。

进一步地，图像的缓存预览采用的是页面上实时的缓存，用户获取预览时，并不立即向服务器发送数据，而是在页面上存储，覆盖原有的图片缓存空间而不造成浪费。

进一步地，所述上传服务器具体为：利用百度分享的接口，自定义函数，将缓存预览图像数据在后台通过Ajax上传到服务器，用以简化了用户的操作。

进一步地，在步骤S3中，通过摄像机输入视频流，然后在HTML页面通过编写集成的CCV函数库绘制到HTML5的画布上。

本发明还提供了一种基于上文所述的基于HTML5和增强现实技术的互联网眼镜实时试戴方法的系统，包括HTML5前台展示模块、图像识别与增强模块、图片缓存预览模块、上传与分享模块、后台服务器模块；

所述HTML5前台展示模块将摄像头的视频数据流进行获取，将数据传递到HTML5元素中，通过对视频流的人脸进行检测标记，并将眼镜模型进行变换贴图处理后进行展示；

所述图像识别与增强模块用以采集人脸数据，并通过机器学习提取出人脸的位置特征值，形成模型的原型，并导出人脸识别的特征数据集文件；通过摄像机对人脸进行扫描，对用户的头像进行预处理，根据已有的数字图像处理算法计算出人眼的位置，与导出的人脸数据集进行原型比对判断，如果是相似的原型，则标记为眼睛的位置，将眼镜与人脸的大小和角度进行匹配；

所述图片缓存预览模块利用JavaScript函数在当前页面找到HTML5的视频流加载播放的元素，从中截取视频流中的一帧，并把它缓存到预定义的页面标签中提供预览；

所述上传与分享模块引入百度的分享接口，将截取的图片缓存在页面上，在百度分享前通过Ajax自动提交到服务器，并返回路径，并将路径放入到分享的图片接口；AJAX通过在后台与服务器进行少量数据交换，使得网页实现异步更新；

后台服务器模块包括图片的服务器和图片数据的存取；后台通过解码，然后将字节转换为文件并指定相应的后缀名，用流的方式把图片保存到服务器上。

与现有技术相比，本发明有以下有益效果：本发明在HTML5的基础上结合人脸识别和增强现实技术的应用程序，客户端变得更加轻薄，不需要额外的插件就能进行实时图像检测和虚拟试戴。利用HTML5的强大跨平台特点，克服现有技术的缺点，能够在保证稳定性、安全性、实用性、扩展性的基础上显著提高用户体验度。

附图说明

图1为本发明实施例的方法流程示意图。

图2为本发明实施例的系统框图。

具体实施方式

下面结合附图及实施例对本发明做进一步说明。

如图1所示，本实施例提供了一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，包括以下步骤：

步骤S1：采集人脸数据，获得人脸数据集；

步骤S2：将步骤S1获得的人脸数据集用于训练人脸机器学习模型得到人脸训练库，所述人脸训练库的数据包括人脸的宽度、人脸的高度，人脸的数量，特征点位置坐标、图像分类器；

步骤S3：摄像头获取视频流，从JavaScript函数获取HTML5的摄像头视频流，并将视频流以URL的方式导入HTML5页面的节点中；

步骤S4：扫描步骤S3的视频流，对用户的头像进行预处理，弱化光照、背景的干扰，根据特征点位置提取算法计算出人眼的位置；用灰度投影法、曲面匹配法将摄像头获取的人脸数据与步骤S1中的人脸数据集进行原型比对判断，若存在相似的原型，则将计算出的人眼位置存储标记为眼睛的正确位置，并记录眼睛的深度值；

步骤S5：从图片服务器中加载用户选择的眼镜模型，根据人脸大小、角度、眼睛的深度值及特征点位置对眼镜模型进行缩放、旋转用以适应人脸、眼睛的大小与位置；将人脸与眼镜模型的视频流合并后输出；

步骤S6：摄像头实时获取视频流，判断人脸的移动是否超过预设的阈值，如果是，则返回步骤S4。

在本实施例中，包括步骤S7：若用户要截图预览，截取人脸与眼镜模型的合并视频流的当前帧并缓存到页面的HTML标签中提供预览，通过分享接口调用并上传服务器，分享用户试戴眼镜的最终效果。

在本实施例中，图像的缓存预览采用的是页面上实时的缓存，用户获取预览时，并不立即向服务器发送数据，而是在页面上存储，覆盖原有的图片缓存空间而不造成浪费。

在本实施例中，所述上传服务器具体为：利用百度分享的接口，自定义函数，将缓存预览图像数据在后台通过Ajax上传到服务器，用以简化了用户的操作。

在本实施例中，在步骤S3中，通过摄像机输入视频流，然后在HTML页面通过编写集成的CCV函数库绘制到HTML5的画布上。

如图2所示，本实施例还提供了一种基于上文所述的基于HTML5和增强现实技术的互联网眼镜实时试戴方法的系统，包括HTML5前台展示模块、图像识别与增强模块、图片缓存预览模块、上传与分享模块、后台服务器模块；

所述HTML5前台展示模块将摄像头的视频数据流进行获取，将数据传递到HTML5元素中，通过对视频流的人脸进行检测标记，并将眼镜模型进行变换贴图处理后进行展示；利用HTML5一流的界面表现能力，更快更易用的效果达到用户的需求，解决用户体验困难。

所述图像识别与增强模块用以采集人脸数据，并通过机器学习提取出人脸的位置特征值，形成模型的原型，并导出人脸识别的特征数据集文件；通过摄像机对人脸进行扫描，对用户的头像进行预处理，根据已有的数字图像处理算法计算出人眼的位置，与导出的人脸数据集进行原型比对判断，如果是相似的原型，则标记为眼睛的位置，将眼镜与人脸的大小和角度进行匹配，达到任意脸型均可以自动试戴的效果。并且，在其中加入头像是否移动判断，如果头像发生移动，重新进行上述步骤，即可达到眼镜实时试戴的效果。机器学习是涉及概率论、统计学、逼近论、凸分析论等多门学科的人工智能的科学，其算法是一类从数据中自动分析获得规律，并利用规律对未知数据进行预测的算法。图像识别也是人工智能的一个重要领域。图像识别主要分为两种，一种是基于图像识别的模型，如模板匹配，在这种模型中，识别某个图像必须在已有的经验中有这个图像的记忆模式，即模板。这种模式强调图像必须与现有的模板完全一样才能被识别。另一种是基于原型匹配的模型，如从图像中抽取出来的“相似性”，不需要存储大量的模板，只需要找到一个相似的原型，这个图像也就能被识别。而增强现实是一种实时地计算摄影机影像的位置及角度并加上相应的图像、视频、3D模型的技术。应用方案中将摄像机摄取的真实世界图像输入到计算机中，并与计算机图像系统产生虚拟景象合成，并输出到屏幕显示器。

所述图片缓存预览模块利用JavaScript函数在当前页面找到HTML5的视频流加载播放的元素，从中截取视频流中的一帧，并把它缓存到预定义的页面标签中提供预览；这种方式既能避免下载后打开的繁琐，又能避免在服务器上缓存图片，极大的减轻了服务器的负担。JavaScript是一种脚本语言，是一种解释性语言，不需要进行预编译，其被设计用来向 HTML 页面添加交互行为，通常被直接嵌入 HTML 页面。JavaScript经过封装集成的库文件，只要在需要的地方引入该文件，就能像内部一样去调用函数实现响应的效果。常见的图片缓存方式有以下几种：一种是缓存到本地的文本文件，再从本地文件读取；二是通过缓存到服务器上，并返回图片地址。本方案中使用的图片缓存方式是在两者的基础上进行优化，用在页面的缓存方式来提高性能。

所述上传与分享模块引入百度的分享接口，将截取的图片缓存在页面上，在百度分享前通过Ajax自动提交到服务器，并返回路径，并将路径放入到分享的图片接口；AJAX通过在后台与服务器进行少量数据交换，使得网页实现异步更新；这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

后台服务器模块包括图片的服务器和图片数据的存取；后台通过解码，然后将字节转换为文件并指定相应的后缀名（如. png /.jpg/.gif等），用流的方式把图片保存到服务器上。只有通过图片服务器，客户端才能通过图片地址获取到图片。在图片的存取方面，正式的环境需要用到专门的图片服务器，开发环境下用HTTP和反向代理服务器（如nginx）进行反向代理，也能得到同样的效果。

本实施例根据“人脸识别+HTML5 +视频流+眼镜绘制”的思想，HTML5前台展示模块中，通过摄像机获取的视频流，用JavaScript预处理后进行人脸扫描，并进入图像识别与增强现实模块进行相关判断与处理，接着调用后台服务器模块获取用户试戴的眼镜模型，确定眼镜位置后进行试戴，最后视频流合并输出到HTML5前台展示模块。在点击预览后，图片缓存预览模块会截取视频当前帧进行缓存并预览，点击分享后，进入上传与分享模块中处理。

较佳的，传统的在线眼镜试戴策略主要是依赖于flash插件，在加载时用户往往需要耗费很长的等待时间，甚至在网络资源不好的情况下会出现无法使用的情况，这极大的影响了用户的体验。本实施例采用的是基于HTML5技术的眼镜实时试戴方法，不需要借助任何的插件，直接读取视频流，通过JavaScript脚本和函数库即可实现眼镜试戴，速度快，效果准确流畅，极大提高了用户体验。

传统的方案中，用户的截图预览往往是通过将截图发送到服务器，然后把服务器返回的图片地址进行解析显示，这种方式又必须耗费用户的等待时间。本实施例采用的是直接缓存在页面上，并且是覆盖性的，资源占用极少。这极大的提高了响应速度，提高了用户体验。另外，在用户分享之前，后台才通过AJAX上传预览图片，极大的减轻了服务器的负担。

以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。

Claims (6)

1.一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，其特征在于：包括以下步骤：

步骤S1：采集人脸数据，获得人脸数据集；

步骤S2：将步骤S1获得的人脸数据集用于训练人脸机器学习模型得到人脸训练库，所述人脸训练库的数据包括人脸的宽度、人脸的高度，人脸的数量，特征点位置坐标、图像分类器；

步骤S3：摄像头获取视频流，从JavaScript函数获取HTML5的摄像头视频流，并将视频流以URL的方式导入HTML5页面的节点中；

步骤S4：扫描步骤S3的视频流，对用户的头像进行预处理，弱化光照、背景的干扰，根据特征点位置提取算法计算出人眼的位置；用灰度投影法、曲面匹配法将摄像头获取的人脸数据与步骤S1中的人脸数据集进行原型比对判断，若存在相似的原型，则将计算出的人眼位置存储标记为眼睛的正确位置，并记录眼睛的深度值；

步骤S5：从图片服务器中加载用户选择的眼镜模型，根据人脸大小、角度、眼睛的深度值及特征点位置对眼镜模型进行缩放、旋转用以适应人脸、眼睛的大小与位置；将人脸与眼镜模型的视频流合并后输出；

步骤S6：摄像头实时获取视频流，判断人脸的移动是否超过预设的阈值，如果是，则返回步骤S4。

2.根据权利要求1所述的一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，其特征在于：包括步骤S7：若用户要截图预览，截取人脸与眼镜模型的合并视频流的当前帧并缓存到页面的HTML标签中提供预览，通过分享接口调用并上传服务器，分享用户试戴眼镜的最终效果。

3.根据权利要求2所述的一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，其特征在于：图像的缓存预览采用的是页面上实时的缓存，用户获取预览时，并不立即向服务器发送数据，而是在页面上存储，覆盖原有的图片缓存空间而不造成浪费。

4.根据权利要求2所述的一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，其特征在于：所述上传服务器具体为：利用百度分享的接口，自定义函数，将缓存预览图像数据在后台通过Ajax上传到服务器，用以简化了用户的操作。

5.根据权利要求1所述的一种基于HTML5和增强现实技术的互联网眼镜实时试戴方法，其特征在于：在步骤S3中，通过摄像机输入视频流，然后在HTML页面通过编写集成的CCV函数库绘制到HTML5的画布上。

6.一种基于权利要求1所述的基于HTML5和增强现实技术的互联网眼镜实时试戴方法的系统，其特征在于：包括HTML5前台展示模块、图像识别与增强模块、图片缓存预览模块、上传与分享模块、后台服务器模块；

所述HTML5前台展示模块将摄像头的视频数据流进行获取，将数据传递到HTML5元素中，通过对视频流的人脸进行检测标记，并将眼镜模型进行变换贴图处理后进行展示；

所述图像识别与增强模块用以采集人脸数据，并通过机器学习提取出人脸的位置特征值，形成模型的原型，并导出人脸识别的特征数据集文件；通过摄像机对人脸进行扫描，对用户的头像进行预处理，根据已有的数字图像处理算法计算出人眼的位置，与导出的人脸数据集进行原型比对判断，如果是相似的原型，则标记为眼睛的位置，将眼镜与人脸的大小和角度进行匹配；

所述图片缓存预览模块利用JavaScript函数在当前页面找到HTML5的视频流加载播放的元素，从中截取视频流中的一帧，并把它缓存到预定义的页面标签中提供预览；

所述上传与分享模块引入百度的分享接口，将截取的图片缓存在页面上，在百度分享前通过Ajax自动提交到服务器，并返回路径，并将路径放入到分享的图片接口；AJAX通过在后台与服务器进行少量数据交换，使得网页实现异步更新；

后台服务器模块包括图片的服务器和图片数据的存取；后台通过解码，然后将字节转换为文件并指定相应的后缀名，用流的方式把图片保存到服务器上。