一种基于web的AR场景互动sdk的制作方法

一种基于web的ar场景互动sdk
技术领域
1.本发明涉及计算机技术领域，具体涉及一种基于web的ar场景互动sdk。


背景技术：

2.现有的商用ar定制业务依赖于原生app，以支付宝、qq、手机百度等原生应用的扫一扫作为ar触发入口，在原生应用中进行ar的体验与交互。原生应用作为ar的唯一入口在实际应用场景中存在着局限性。在进行ar体验时需要在移动设备中下载并安装相应的应用、无法进行便利的分享，无法跨平台进行ar体验。


技术实现要素：

3.针对现有技术中的不足，本发明的目的在于提供一种基于web的ar场景互动sdk，以方便跨平台进行ar体验的问题。
4.为实现上述目的，本发明采用了以下技术方案：
5.基于ar的场景互动前端系统基本功能分为：平面图片或固定标志物的识别追踪及触发，实体识别追踪及触发，3d模型、视频的渲染，场景互动中的复杂交互。通过构建通用功能组件以满足不同业务的需求。ar体验中的识别和触发是整个体验的第一步，在识别环节中分为静态2d图片、标记物识别和3d实体识别两种。
6.本发明的sdk提供了固定标记物识别、基于前端的目标检测、屏幕录制、透明背景视频播放的能力。
7.一种基于web的ar场景互动sdk，包括接入层、编辑运营层、应用服务层和基础服务层；所述基础服务层包括屏幕录制模块、固定目标物触发模型、透明背景视频播放模块和yolo-v3目标检测模块；所述接入层为提供sdk的接入方式；所述编辑运营层提供sdk运行中的数据编辑、处理功能；所述应用服务层包括用户可开发使用的任务和功能；
8.所述固定目标物触发模型提供sdk的固定标记物识别、固定标记物跟踪、固定标记物屏幕坐标回调函数功能，所述固定目标物触发模型包括组件detection.js、组件model.js、组件three.js，所述组件detection.js中封装有检测方法，所述组件model.js中封装有组件three.js的实现模型；所述组件three.js与固定标记物识别进行联系，当触发固定标记物回调函数时，在固定标记物检测界面利用组件three.js渲染模型，对识别到的固定标记物进行跟踪并在对应识别区域渲染模型；
9.所述yolo-v3目标检测模块是采用voc数据集格式，利用darknet在后端进行模型训练，将训练好的模型进行模型优化，得到目标检测模型，并将目标检测模型得到的静态pb文件转换为适合前端网络页面的加载文件；基于tensorflow.js实现yolo目标检测；将训练后的tensorflow模型saved_model，将save_model转化为可以在tensorflow构建的前端神经网络中直接加载的web_model模型；
10.所述屏幕录制模块提供sdk的屏幕录制功能，所述屏幕录制模块包括组件button.js、组件countdown.js、组件timer.js，所述组件button.js中封装有录屏开始按
钮、屏幕录制界面、触发事件及点击方法，开始录制和结束方法；所述组件countdown.js中封装有实现倒计时方法，所述组件timer.js中封装有录制时计时方法；
11.所述透明背景视频播放模块提供sdk的透明背景播放功能，所述透明背景视频播放模块包括组件canvid.js，所述组件canvid.js中封装有对纯色背景视频进行过滤裁剪处理的方法，通过导入canvid.js，在react生命周期函数componentwillmount()中进行挂载，实现透明背景播放功能。
12.进一步地，所述屏幕录制功能通过mediarecorder获取视频流，由组件button.js中的录制开始按钮触发事件，在点击录制开始按钮后触发回调函数，开始获取视频流，在录制时由组件timer.js实现录制计时，由组件countdown.js实现倒计时，停止录制。
13.再进一步地，所述yolo-v3目标检测模块中的web_model模型包括json格式的权重文件，通过tensorflowjs转换工具，将save_model转化为可以在tensorflow构建的前端神经网络中直接加载的web_model模型，并且以shard形式进行分割；获取设备摄像头权限；通过调用浏览器的mediarecorder接口，将设备摄像头所获取的视频流传入yolo-v3目标检测模型，实时对目标物体通过anchor boxes标注出；当目标物从视频流消失时，将anchor boxes从canvas中移除。
14.更进一步地，所述组件canvid.js中封装有对纯色背景视频进行过滤裁剪处理的方法，该方法是对纯色背景视频按帧切分为png或jpg，利用ffmpeg工具可对视频进行按帧切分，同时对切分图片的帧数和大小进行控制；通过cv方案，区域增长算法将纯色区域从数据集中去除，将透明背景的png图像通过montage工具组合为完整的sprite文件；通过canvas实现在前端用户界面按帧数播放sprite文件。
15.与现有技术相比，本发明具有以下有益效果：
16.通过对在前端构建ar增强现实体验的研究，构建可移植、组件化、低耦合的前端ar组件，并结合tensorflow.js在前端构建深度学习网络，在前端实现目标检测需求，实现“一次加载，多次检测”，从而有效降低后台服务负载，在准确率和时效性之间取得平衡。
附图说明
17.图1为本发明的系统架构图。
18.图2为本发明屏幕录制模块的工作时序图。
19.图3为本发明固定目标物触发模型的工作时序图。
20.图4为本发明yolo-v3目标检测模块的工作时序图。
具体实施方式
21.下面通过具体实施例来进一步说明本发明的技术方案。本领域技术人员应该明了，所述具体实施方式仅仅是帮助理解本发明，不应视为对本发明的具体限制。
22.如图1-4所示：一种基于web的ar场景互动sdk，包括接入层、编辑运营层、应用服务层和基础服务层；所述基础服务层包括屏幕录制模块、固定目标物触发模型、透明背景视频播放模块和yolo-v3目标检测模块；
23.在w3c(万维网联盟)发布了新标准包括mediarecorder(多媒体录制接口)这一api，这一接口使得web开发者可以获取设备摄像头权限并对设备摄像头所获取的视频流进
行操作，屏幕录制功能的实现主要基于这一功能性api，时序图如图2所示。
24.屏幕录制模块：所述屏幕录制模块提供sdk的屏幕录制功能，所述屏幕录制模块包括组件button.js、组件countdown.js、件timer.js，通过mediarecorder获取视频流，由录制开始按钮触发事件，将触发事件和按钮点击方法封装为button.js；实现倒计时方法并封装为组件countdown，在点击按钮后触发回调函数，开始获取视频流.js，在点击按钮之后触发coutdown.js，进行三秒的倒计时；在录制时进行计数，对录制时间进行计数，将方法封装为timer.js并在界面导入，实现录制时计时；将开始录制和结束录制方法封装在button.js中，点击触发事件，实现视频流开始获取与停止获取。
25.固定目标物触发模型：利用视频流对固定标记物识别的方法，触发webgl渲染实现的模型。对检测方法封装为detection.js，对three.js的实现模型封装为model.js，通过将组件化的检测方法核模型导入项目，在用户界面的react生命周期函数中挂载，实现相关功能包括:固定标记物识别，固定标记物跟踪，固定标记物屏幕坐标回调函数。对基础功能组件进行封装达到解耦的目的。在前端工程化中，对基础功能组件进行封装，使得在react多个jsx中，可以对基础功能组件进行复用。将three.js与固定标记物识别进行联系，当触发固定标记物回调函数时，在固定标记物检测见面利用three.js渲染模型，对识别到的固定标记物进行跟踪并在对应识别区域渲染模型。多个功能性组件可以进行复用。固定目标物触发模型的工作时序图如图3所示。
26.yolo-v3目标检测模块：采用voc数据集格式，利用darknet在后端进行模型训练，将训练好的模型进行模型优化。yolo-v3检测模块用于在前端加载由darknet训练得到的目标检测模型，将训练后的目标检测模型进行转换。将模型训练得到的静态pb文件转换为适合前端网络页面的加载文件。基于tensorflow.js实现yolo目标检测，将训练后的tensorflow模型saved_model，通过tensorflowjs转换工具，将save_model转化为可以在tensorflow构建的前端神经网络中直接加载的web_model模型，包括json格式的权重文件和转化后的web_model，并且以shard形式进行分割；获取设备摄像头权限，通过调用浏览器的mediarecorder接口，将设备摄像头所获取的视频流传入yolo-v3目标检测模型，实时对目标物体通过anchor boxes标注出；当目标物从视频流消失时，将anchor boxes从canvas中移除。yolo-v3目标检测模块的工作时序图如图4所示。
27.透明背景视频播放模块：与原生应用中透明背景模块实现不同，基于ar的场景互动前端无法直接调用cv的方法对纯色背景视频进行过滤裁剪处理。
28.对纯色背景视频按帧切分为png或jpg，利用ffmpeg工具可对视频进行按帧切分，同时对切分图片的帧数和大小进行控制；通过cv方案，区域增长算法将纯色区域从数据集中去除，将透明背景的png图像通过montage工具组合为完整的sprite文件；通过canvas实现在前端用户界面按帧数播放sprite文件，将这一方法封装canvid.js，并实现暂停、播放、恢复、获取当前播放帧、设置当前播放帧、获取播放状态等方法；通过导入canvid.js，在react生命周期函数componentwillmount()中进行挂载，实现透明背景播放功能。
29.所述接入层为sdk提供的接入方式；具体接入方式有web端入口、hs入口、小程序入口、reactnative入口等。
30.所述编辑运营层提供sdk运行中的数据编辑、处理功能；具体包括如数据标注、内容运营、效果评估、数据分析等。
31.所述应用服务层包括用户可开发使用的任务和功能；具体包括如基础任务、知识库、资源库等。