CN114885204A - 一种基于web的AR场景互动sdk - Google Patents
一种基于web的AR场景互动sdk Download PDFInfo
- Publication number
- CN114885204A CN114885204A CN202110164544.1A CN202110164544A CN114885204A CN 114885204 A CN114885204 A CN 114885204A CN 202110164544 A CN202110164544 A CN 202110164544A CN 114885204 A CN114885204 A CN 114885204A
- Authority
- CN
- China
- Prior art keywords
- model
- component
- sdk
- web
- target detection
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/433—Content storage operation, e.g. storage operation in response to a pause request, caching operations
- H04N21/4334—Recording operations
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/81—Monomedia components thereof
- H04N21/816—Monomedia components thereof involving special video data, e.g 3D video
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N5/00—Details of television systems
- H04N5/76—Television signal recording
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
本发明公开了一种基于web的AR场景互动sdk。该sdk提供了固定标记物识别、目标检测、屏幕录制、透明背景视频播放的能力。获取视频流数据,当出现标记物时触发固定标记物的回调函数,应用webgl方法构建模型,在用户界面中渲染模型;目标检测采用YOLO算法,利用tensorflow.js在前端完成目标检测;对纯色背景视频利用ffmpeg进行切帧,通过MediaRecorder获取视频流,由录制开始按钮触发事件。本发明构建可移植、组件化、低耦合的前端AR组件,并结合Tensorflow.js在前端构建深度学习网络,在前端实现目标检测需求,有效降低后台服务负载,在准确率和时效性之间取得平衡。
Description
技术领域
本发明涉及计算机技术领域,具体涉及一种基于web的AR场景互动sdk。
背景技术
现有的商用AR定制业务依赖于原生APP,以支付宝、QQ、手机百度等原生应用的扫一扫作为AR触发入口,在原生应用中进行AR的体验与交互。原生应用作为AR的唯一入口在实际应用场景中存在着局限性。在进行AR体验时需要在移动设备中下载并安装相应的应用、无法进行便利的分享,无法跨平台进行AR体验。
发明内容
针对现有技术中的不足,本发明的目的在于提供一种基于web的AR场景互动sdk,以方便跨平台进行AR体验的问题。
为实现上述目的,本发明采用了以下技术方案:
基于AR的场景互动前端系统基本功能分为:平面图片或固定标志物的识别追踪及触发,实体识别追踪及触发,3D模型、视频的渲染,场景互动中的复杂交互。通过构建通用功能组件以满足不同业务的需求。AR体验中的识别和触发是整个体验的第一步,在识别环节中分为静态2D图片、标记物识别和3D实体识别两种。
本发明的sdk提供了固定标记物识别、基于前端的目标检测、屏幕录制、透明背景视频播放的能力。
一种基于web的AR场景互动sdk,包括接入层、编辑运营层、应用服务层和基础服务层;所述基础服务层包括屏幕录制模块、固定目标物触发模型、透明背景视频播放模块和YOLO-v3目标检测模块;所述接入层为提供sdk的接入方式;所述编辑运营层提供sdk运行中的数据编辑、处理功能;所述应用服务层包括用户可开发使用的任务和功能;
所述固定目标物触发模型提供sdk的固定标记物识别、固定标记物跟踪、固定标记物屏幕坐标回调函数功能,所述固定目标物触发模型包括组件detection.js、组件model.js、组件Three.js,所述组件detection.js中封装有检测方法,所述组件model.js中封装有组件Three.js的实现模型;所述组件Three.js与固定标记物识别进行联系,当触发固定标记物回调函数时,在固定标记物检测界面利用组件Three.js渲染模型,对识别到的固定标记物进行跟踪并在对应识别区域渲染模型;
所述YOLO-v3目标检测模块是采用voc数据集格式,利用darknet在后端进行模型训练,将训练好的模型进行模型优化,得到目标检测模型,并将目标检测模型得到的静态pb文件转换为适合前端网络页面的加载文件;基于Tensorflow.js实现YOLO目标检测;将训练后的Tensorflow模型saved_model,将save_model转化为可以在Tensorflow构建的前端神经网络中直接加载的web_model模型;
所述屏幕录制模块提供sdk的屏幕录制功能,所述屏幕录制模块包括组件button.js、组件countdown.js、组件timer.js,所述组件button.js中封装有录屏开始按钮、屏幕录制界面、触发事件及点击方法,开始录制和结束方法;所述组件countdown.js中封装有实现倒计时方法,所述组件timer.js中封装有录制时计时方法;
所述透明背景视频播放模块提供sdk的透明背景播放功能,所述透明背景视频播放模块包括组件canvid.js,所述组件canvid.js中封装有对纯色背景视频进行过滤裁剪处理的方法,通过导入canvid.js,在React生命周期函数componentWillMount()中进行挂载,实现透明背景播放功能。
进一步地,所述屏幕录制功能通过MediaRecorder获取视频流,由组件button.js中的录制开始按钮触发事件,在点击录制开始按钮后触发回调函数,开始获取视频流,在录制时由组件timer.js实现录制计时,由组件countdown.js实现倒计时,停止录制。
再进一步地,所述YOLO-v3目标检测模块中的web_model模型包括json格式的权重文件,通过Tensorflowjs转换工具,将save_model转化为可以在Tensorflow构建的前端神经网络中直接加载的web_model模型,并且以shard形式进行分割;获取设备摄像头权限;通过调用浏览器的MediaRecorder接口,将设备摄像头所获取的视频流传入YOLO-v3目标检测模型,实时对目标物体通过Anchor Boxes标注出;当目标物从视频流消失时,将AnchorBoxes从canvas中移除。
更进一步地,所述组件canvid.js中封装有对纯色背景视频进行过滤裁剪处理的方法,该方法是对纯色背景视频按帧切分为png或jpg,利用ffmpeg工具可对视频进行按帧切分,同时对切分图片的帧数和大小进行控制;通过cv方案,区域增长算法将纯色区域从数据集中去除,将透明背景的png图像通过montage工具组合为完整的Sprite文件;通过canvas实现在前端用户界面按帧数播放sprite文件。
与现有技术相比,本发明具有以下有益效果:
通过对在前端构建AR增强现实体验的研究,构建可移植、组件化、低耦合的前端AR组件,并结合Tensorflow.js在前端构建深度学习网络,在前端实现目标检测需求,实现“一次加载,多次检测”,从而有效降低后台服务负载,在准确率和时效性之间取得平衡。
附图说明
图1为本发明的系统架构图。
图2为本发明屏幕录制模块的工作时序图。
图3为本发明固定目标物触发模型的工作时序图。
图4为本发明YOLO-v3目标检测模块的工作时序图。
具体实施方式
下面通过具体实施例来进一步说明本发明的技术方案。本领域技术人员应该明了,所述具体实施方式仅仅是帮助理解本发明,不应视为对本发明的具体限制。
如图1-4所示:一种基于web的AR场景互动sdk,包括接入层、编辑运营层、应用服务层和基础服务层;所述基础服务层包括屏幕录制模块、固定目标物触发模型、透明背景视频播放模块和YOLO-v3目标检测模块;
在W3C(万维网联盟)发布了新标准包括MediaRecorder(多媒体录制接口)这一API,这一接口使得web开发者可以获取设备摄像头权限并对设备摄像头所获取的视频流进行操作,屏幕录制功能的实现主要基于这一功能性API,时序图如图2所示。
屏幕录制模块:所述屏幕录制模块提供sdk的屏幕录制功能,所述屏幕录制模块包括组件button.js、组件countdown.js、件timer.js,通过MediaRecorder获取视频流,由录制开始按钮触发事件,将触发事件和按钮点击方法封装为button.js;实现倒计时方法并封装为组件countdown,在点击按钮后触发回调函数,开始获取视频流.js,在点击按钮之后触发coutdown.js,进行三秒的倒计时;在录制时进行计数,对录制时间进行计数,将方法封装为timer.js并在界面导入,实现录制时计时;将开始录制和结束录制方法封装在button.js中,点击触发事件,实现视频流开始获取与停止获取。
固定目标物触发模型:利用视频流对固定标记物识别的方法,触发webgl渲染实现的模型。对检测方法封装为detection.js,对Three.js的实现模型封装为model.js,通过将组件化的检测方法核模型导入项目,在用户界面的React生命周期函数中挂载,实现相关功能包括:固定标记物识别,固定标记物跟踪,固定标记物屏幕坐标回调函数。对基础功能组件进行封装达到解耦的目的。在前端工程化中,对基础功能组件进行封装,使得在React多个JSX中,可以对基础功能组件进行复用。将Three.js与固定标记物识别进行联系,当触发固定标记物回调函数时,在固定标记物检测见面利用Three.js渲染模型,对识别到的固定标记物进行跟踪并在对应识别区域渲染模型。多个功能性组件可以进行复用。固定目标物触发模型的工作时序图如图3所示。
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所示。
透明背景视频播放模块:与原生应用中透明背景模块实现不同,基于AR的场景互动前端无法直接调用cv的方法对纯色背景视频进行过滤裁剪处理。
对纯色背景视频按帧切分为png或jpg,利用ffmpeg工具可对视频进行按帧切分,同时对切分图片的帧数和大小进行控制;通过cv方案,区域增长算法将纯色区域从数据集中去除,将透明背景的png图像通过montage工具组合为完整的Sprite文件;通过canvas实现在前端用户界面按帧数播放sprite文件,将这一方法封装canvid.js,并实现暂停、播放、恢复、获取当前播放帧、设置当前播放帧、获取播放状态等方法;通过导入canvid.js,在React生命周期函数componentWillMount()中进行挂载,实现透明背景播放功能。
所述接入层为sdk提供的接入方式;具体接入方式有web端入口、HS入口、小程序入口、ReactNative入口等。
所述编辑运营层提供sdk运行中的数据编辑、处理功能;具体包括如数据标注、内容运营、效果评估、数据分析等。
所述应用服务层包括用户可开发使用的任务和功能;具体包括如基础任务、知识库、资源库等。
Claims (4)
1.一种基于web的AR场景互动sdk,其特征在于:包括接入层、编辑运营层、应用服务层和基础服务层;所述基础服务层包括固定目标物触发模型、YOLO-v3目标检测模块、屏幕录制模块和透明背景视频播放模块;所述接入层提供sdk的接入方式;所述编辑运营层提供sdk运行中的数据编辑、处理功能;所述应用服务层包括用户可开发使用的任务和功能;
所述固定目标物触发模型提供sdk的固定标记物识别、固定标记物跟踪、固定标记物屏幕坐标回调函数功能,所述固定目标物触发模型包括组件detection.js、组件model.js、组件Three.js,所述组件detection.js中封装有检测方法,所述组件model.js中封装有组件Three.js的实现模型;所述组件Three.js与固定标记物识别进行联系,当触发固定标记物回调函数时,在固定标记物检测界面利用组件Three.js渲染模型,对识别到的固定标记物进行跟踪并在对应识别区域渲染模型;
所述YOLO-v3目标检测模块是采用voc数据集格式,利用darknet在后端进行模型训练,将训练好的模型进行模型优化,得到目标检测模型,并将目标检测模型得到的静态pb文件转换为适合前端网络页面的加载文件;基于Tensorflow.js实现YOLO目标检测;将训练后的Tensorflow模型saved_model,将save_model转化为可以在Tensorflow构建的前端神经网络中直接加载的web_model模型;
所述屏幕录制模块提供sdk的屏幕录制功能,所述屏幕录制模块包括组件button.js、组件countdown.js、组件timer.js,所述组件button.js中封装有录屏开始按钮、屏幕录制界面、触发事件及点击方法,开始录制和结束方法;所述组件countdown.js中封装有实现倒计时方法,所述组件timer.js中封装有录制时计时方法;
所述透明背景视频播放模块提供sdk的透明背景播放功能,所述透明背景视频播放模块包括组件canvid.js,所述组件canvid.js中封装有对纯色背景视频进行过滤裁剪处理的方法,通过导入canvid.js,在React生命周期函数componentWillMount()中进行挂载,实现透明背景播放功能。
2.根据权利要求1所述的一种基于web的AR场景互动sdk,其特征在于:所述屏幕录制功能通过MediaRecorder获取视频流,由组件button.js中的录制开始按钮触发事件,在点击录制开始按钮后触发回调函数,开始获取视频流,在录制时由组件timer.js实现录制计时,由组件countdown.js实现倒计时,停止录制。
3.根据权利要求1所述的一种基于web的AR场景互动sdk,其特征在于:所述YOLO-v3目标检测模块中的web_model模型包括json格式的权重文件,通过Tensorflowjs转换工具,将save_model转化为可以在Tensorflow构建的前端神经网络中直接加载的web_model模型,并且以shard形式进行分割;获取设备摄像头权限;通过调用浏览器的MediaRecorder接口,将设备摄像头所获取的视频流传入YOLO-v3目标检测模型,实时对目标物体通过AnchorBoxes标注出;当目标物从视频流消失时,将Anchor Boxes从canvas中移除。
4.根据权利要求1所述的一种基于web的AR场景互动sdk,其特征在于:所述组件canvid.js中封装有对纯色背景视频进行过滤裁剪处理的方法,该方法是对纯色背景视频按帧切分为png或jpg,利用ffmpeg工具可对视频进行按帧切分,同时对切分图片的帧数和大小进行控制;通过cv方案,区域增长算法将纯色区域从数据集中去除,将透明背景的png图像通过montage工具组合为完整的Sprite文件;通过canvas实现在前端用户界面按帧数播放sprite文件。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110164544.1A CN114885204B (zh) | 2021-02-05 | 2021-02-05 | 一种基于web的AR场景互动sdk |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110164544.1A CN114885204B (zh) | 2021-02-05 | 2021-02-05 | 一种基于web的AR场景互动sdk |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114885204A true CN114885204A (zh) | 2022-08-09 |
CN114885204B CN114885204B (zh) | 2023-10-20 |
Family
ID=82667878
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110164544.1A Active CN114885204B (zh) | 2021-02-05 | 2021-02-05 | 一种基于web的AR场景互动sdk |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114885204B (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116886955A (zh) * | 2023-07-24 | 2023-10-13 | 北京泰策科技有限公司 | 基于ffmpeg和yolov5的视频分析方法及系统 |
CN116980680A (zh) * | 2023-09-22 | 2023-10-31 | 浙江华创视讯科技有限公司 | 电子铭牌显示方法、终端设备及计算机存储介质 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102752666A (zh) * | 2012-07-06 | 2012-10-24 | 福建邮科通信技术有限公司 | 一种ics流媒体平台系统 |
CN103559713A (zh) * | 2013-11-10 | 2014-02-05 | 深圳市幻实科技有限公司 | 一种提供增强现实的方法及终端 |
CN104394324A (zh) * | 2014-12-09 | 2015-03-04 | 成都理想境界科技有限公司 | 特效视频生成方法及装置 |
CN107295284A (zh) * | 2017-08-03 | 2017-10-24 | 浙江大学 | 一种由音频和图片组成的视频文件的生成和检索播放方法、装置 |
CN107483253A (zh) * | 2017-08-23 | 2017-12-15 | 合肥中盈信息工程有限公司 | 一种基于三维vr的数据中心机房运营管理系统 |
CN110535909A (zh) * | 2019-07-29 | 2019-12-03 | 广东电网有限责任公司信息中心 | 面向能源互联网应用的大数据与云计算一体化平台系统 |
CN110809173A (zh) * | 2020-01-08 | 2020-02-18 | 成都索贝数码科技股份有限公司 | 基于智能手机ar增强现实的虚拟直播方法及系统 |
-
2021
- 2021-02-05 CN CN202110164544.1A patent/CN114885204B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102752666A (zh) * | 2012-07-06 | 2012-10-24 | 福建邮科通信技术有限公司 | 一种ics流媒体平台系统 |
CN103559713A (zh) * | 2013-11-10 | 2014-02-05 | 深圳市幻实科技有限公司 | 一种提供增强现实的方法及终端 |
CN104394324A (zh) * | 2014-12-09 | 2015-03-04 | 成都理想境界科技有限公司 | 特效视频生成方法及装置 |
CN107295284A (zh) * | 2017-08-03 | 2017-10-24 | 浙江大学 | 一种由音频和图片组成的视频文件的生成和检索播放方法、装置 |
CN107483253A (zh) * | 2017-08-23 | 2017-12-15 | 合肥中盈信息工程有限公司 | 一种基于三维vr的数据中心机房运营管理系统 |
CN110535909A (zh) * | 2019-07-29 | 2019-12-03 | 广东电网有限责任公司信息中心 | 面向能源互联网应用的大数据与云计算一体化平台系统 |
CN110809173A (zh) * | 2020-01-08 | 2020-02-18 | 成都索贝数码科技股份有限公司 | 基于智能手机ar增强现实的虚拟直播方法及系统 |
Non-Patent Citations (1)
Title |
---|
陶磊;洪韬;钞旭;: "基于YOLOv3的无人机识别与定位追踪", 工程科学学报, no. 04 * |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116886955A (zh) * | 2023-07-24 | 2023-10-13 | 北京泰策科技有限公司 | 基于ffmpeg和yolov5的视频分析方法及系统 |
CN116886955B (zh) * | 2023-07-24 | 2024-04-16 | 北京泰策科技有限公司 | 基于ffmpeg和yolov5的视频分析方法及系统 |
CN116980680A (zh) * | 2023-09-22 | 2023-10-31 | 浙江华创视讯科技有限公司 | 电子铭牌显示方法、终端设备及计算机存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN114885204B (zh) | 2023-10-20 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108140263B (zh) | 应用于图像或视频的ar显示系统及方法 | |
CN110177218B (zh) | 一种安卓设备的拍照图像处理方法 | |
US20220007083A1 (en) | Method and stream-pushing client for processing live stream in webrtc | |
CN106851386B (zh) | 基于Android系统的电视终端中增强现实的实现方法及装置 | |
CN114885204B (zh) | 一种基于web的AR场景互动sdk | |
Keil et al. | The House of Olbrich—An augmented reality tour through architectural history | |
CN115918108B (zh) | 一种功能切换入口的确定方法与电子设备 | |
CN111583348B (zh) | 图像数据编码方法及装置、显示方法及装置、电子设备 | |
CN111966275A (zh) | 程序试用方法、系统、装置、设备及介质 | |
CN106775258A (zh) | 利用手势控制实现虚拟现实交互的方法和装置 | |
CN115546377B (zh) | 一种视频融合方法、装置、电子设备及存储介质 | |
CN111179392A (zh) | 一种基于5g通信的虚拟偶像综艺直播的方法及系统 | |
CN113873100B (zh) | 视频录制方法、装置、电子设备及存储介质 | |
CN115412714A (zh) | 数据处理方法、控制终端、ar终端、ar系统及存储介质 | |
Fernández et al. | Performance characterization of mobile phones in augmented reality marker tracking | |
US11443450B2 (en) | Analyzing screen coverage of a target object | |
Karhu et al. | Towards augmented reality applications in a mobile web context | |
CN116452778A (zh) | 一种增强现实系统、多设备构建三维地图的方法及设备 | |
Lindqvist | Edge computing for mixed reality | |
CN109640023B (zh) | 一种视频录制方法、装置、服务器及存储介质 | |
CN111367598B (zh) | 动作指令的处理方法、装置、电子设备及计算机可读存储介质 | |
CN113157092A (zh) | 可视化方法、终端设备和存储介质 | |
CN112437224B (zh) | 一种相机数据处理方法、装置、计算机设备及存储介质 | |
WO2023185968A1 (zh) | 相机功能页面切换方法、装置、电子设备及存储介质 | |
CN111833459B (zh) | 一种图像处理方法、装置、电子设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |