移动端浏览器AR扫描识别指定图片

最新推荐文章于 2025-04-14 10:38:21 发布
最新推荐文章于 2025-04-14 10:38:21 发布
阅读量2.9k 收藏 12
点赞数 1
分类专栏： h5 文章标签： AR
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/judykang123/article/details/109715212
版权

官网：https://www.easyar.cn/

本次学习的是在移动端浏览器识别指定图片

目录

效果

在这里插入图片描述

第一步：下载文件

下载文件地址：https://github.com/gentwolf-shen/EasyAR-WebAR-Demo

如果地址改变请根据以下路径寻找

下载文件路径：
easyAR官网–【文档】–【EasyAR WebAR】–【EasyAR WebAR 快速入门】–滑到最后完整示例【点击查看】–【下载压缩包】(点击绿色按钮code–Download ZIP)

第二步：找到要用的文件

找到我们要用的文件，单独拖出来

下载的文件解压【EasyAR-WebAR-Demo-master】–【html】–【TokenVideoExample】，这里面我们只需要他的【index.html】和【asset】

首先打开【TokenVideoExample】里面的readme.md看看写了什么。
看过后发现我们需要一个WebAR Token，那接下来就需要获取这个token了<

最低0.47元/天 解锁文章
vue2/3 - 接入百度图像识别API及使用方法（百度智能云），实现上传图片并调用百度图像识别api进行图像的各种信息的识别，解决各种浏览器运行跨域及报错问题解决（详细示例源码，一键复制开箱即用！）
高级前端工程师
08-07 3228
vue百度智能云，vue百度智能云图像识别接口调用，vue网页pc移动h5如何调用百度智能云的图像识别api，vue调用百度图像识别详细教程示例代码，vue项目网页怎么引入百度图片识别api接口，vue使用百度智能云API时出现的跨域问题解决办法，vue调用百度图片识别接口报错，vue使用百度智能云图像识别接口跨域怎么办，vue调用百度api跨域，vue百度图像识别识别前端上传的图片，Vue中如何进行图片识别与物体检测，Vue中如何进行图片识别与物体检测，vue页面直接调用百度图片文字识别的接口，vue使用
android 图像识别定位,Android OpenCV 图像识别
weixin_34791250的博客
05-26 2028
最近打算写一个android 平台opencv 的小程序,着手查找了一下资料.网络上的资料参差不齐,有一些都比较老旧,我参考了前面的方法找到了一个简单的搭建方法,分享给大家.0,环境的搭建:java 虚拟机环境搭建,网络资料很多不再赘述.下面说明如果搭建 android opencv 环境:下载Opencv-android-sdk OpenCV for AndroidEclipse 安装CDT ...
在android系统下实现图像识别|基于飞凌RK3399平台
ningmengrouer的博客
07-29 1023
首先我们了解下 Android系统常用的图像识别框架 一：调用一些不开源库进行识别 旷视的图像识别及 OCR 文字识别库，及其他厂家如阿里，百度，华为，腾讯的 OCR 文字识别库等。 二：调用一些开源库进行识别 一）： tensorflow 训练自定义图像并识别 1. 是先在 ubuntu 上对很多图片进行训练得到自己的类别模型文件， xxx.pb 文件及 xxx_labels.txt 文件 2. 把上一步生成的文件放到 Android studio （ AS ）工程里 3.AS 添加 ten
【CNTK/OpenCV/Android】Server+Android+CNN实现移动端图像识别系统
努力奋斗
08-29 4793
使用CNTK训练的网络，和OpenCV提供的图片处理支持。在Android平台将图片上传服务器并返回图片种类。留自己备忘。转载请注明出处->http://blog.csdn.net/bless2015 首先是第一个BUG： 用NDK太麻烦，所以讲CNTK和OpenCV接口直接编译好了一个exe，用Java Runtime直接调用。但是除了一个问题，花了半天时间。原因是CNTK函数返回了很多日志信息，
ar.js demo 简介
最新发布
gitblog_06730的博客
04-14 381
ar.js demo 简介 【下载地址】ar.jsdemo简介 ar.js demo 是一个基于 ar.js 和 three.js 的 WebAR 示例项目，展示了如何使用 JavaScript 实现增强现实技术。随着 AR 技术在原生应用中的广泛应用，这个项目通过简单的 WebAR 示例，让开发者轻松体验 AR 的魅力...
再谈AR中的图像识别算法
jaccen的专栏
04-24 9409
转自：http://www.jianshu.com/p/35aec0e907e4 之前在《浅谈移动平台创新玩法》简单的猜测了easyar中使用的图像识别算法，基于图片指纹的哈希算法的图片检索 。后再阿里引商大神的指点下，意识到图片检测只适用于静态图片的识别，只能做AR脱卡（不进行图像追踪），简单地说就是如果图片有角度翻转，光线明暗的变化都会改变图片自身的指纹哈希值，无法做到跟踪识别。那要如何
基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能（含源码）
热门推荐
qq_33789001的博客
03-06 1万+
WebAR的源码，实现方式是图片识别，叠加模型；html、css和JavaScript语言，根据识别图生成的.mind文件调用摄像头进行识别，识别后叠加渲染gltf模型并进行追踪，同时模型进行动作展示。这个摸索了几天弄出来的效果，在手机和电脑上都能顺利运行，但是不知什么原因感觉帧率是有点低，就像效果图上的显示一样，只有个位数的帧率，所以要用这个开发测试还需要进行充分的测试。还有部分脚本库是托管在了cdn服务器，直接调用会比较的慢，还有可能出现脚本库加载不成功的情况，如果直接使用仓库中的案例可能需要科学上网。
Android 百度图像识别（详细步骤+源码）
2401_83703835的博客
04-04 821
外链图片转存中…(img-Qb36IwOz-1712162117001)][外链图片转存中…(img-TrjHYOfN-1712162117002)][外链图片转存中…(img-Pyxgee8j-1712162117002)][外链图片转存中…(img-pbNqa7Ls-1712162117002)][外链图片转存中…(img-HY1zW7OT-1712162117003)]
vite3+Vue与ar.js结合实现WebAR手机端交互展示
通过这种方式，开发者能够创建出能够在移动端浏览器上运行的AR体验，用户只需扫描二维码或识别特定的标记图像，即可看到叠加的AR内容。 #### 6. 实现视频和模型展示 资源中的代码和模型可以实现在AR环境中展示视频...
实现一个简单但有趣的AR效果（Web）
凹凸实验室
03-24 3930
增强现实（Augmented Reality，简称AR）：是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。本文将让你了解“如何通过 Web 技术实现一个简单但有趣的 AR 效果”。实现分析正如文章开头说道：AR 是将真实环境与虚拟物体实时地叠加到一个画面。因此我们需要通过摄像头实时获取真实环境，并通过识别算法识别...
基于python+MobileNetV2算法模型实现一个图像识别分类系统
子午的博客
08-12 2525
图像识别是计算机视觉领域的重要研究方向，它在人脸识别、物体检测、图像分类等领域有着广泛的应用。随着移动设备的普及和计算资源的限制，设计高效的图像识别算法变得尤为重要。MobileNetV2是谷歌（Google）团队在2018年提出的一种轻量级卷积神经网络模型，旨在在保持准确性的前提下，极大地减少模型的参数数量和计算复杂度，从而适用于移动设备和嵌入式系统等资源受限的场景。
ar-browser-sudoku:使用增强现实解决浏览器中的数独难题
05-10
增强现实数独解算器 您可以在视频中找到有关此项目如何工作的详细信息。 您也可以在这里尝试： 该项目将使您可以使用手机（或计算机网络摄像头）作为增强现实相机来解决数独难题。 看看现在手机上的浏览器功能多么强大，这是一个有趣的概念证明。 为了执行OCR，我们使用了tensorflowjs。 图像处理全部在客户代码中进行。 希望在看完视频后，大部分内容可以自我解释... 一个不错的起点是app/src/augmentedReality/Processor.ts的代码，因为它逐步通过了视频中描述的处理管道。 该项目包含两个文件夹： app-使用手机的摄像头或网络摄像头在浏览器中运行JavaScript应用程序 tensorflow-用于OCR的神经网络的训练和测试代码 构建应用 要构建该应用程序，您将需要安装节点和yarn。 设置 cd app yarn yarn start 如果要在
一个手机浏览器运行的AR例子
08-12
A AR demo on mobile browser(Android yet) powered by JavaScript 这是一个手机浏览器运行的AR例子
基于Three.js和MindAR实现的网页端WebAR人脸识别追踪功能的京剧脸谱Demo源码（可独立部署）
03-10
建议先看效果和说明：https://blog.csdn.net/qq_33789001/article/details/129442180 该功能基于mind-ar-js-master\examples\face-tracking\example1.html案例修改而来，主要是将部分托管在cdn服务器的脚本库进行了本地化关联（解决加载太慢的问题）和替换了面部网格贴图。 近段时间一直在玩MindAR的功能，之前一直在弄图片识别追踪的功能，发现其强大的功能还有脸部识别和追踪的功能，就基于其面部网格的例子修改了一个国粹京剧的。基于MindAR实现的网页端WebAR图片识别叠加动作模型追踪功能，其中包含了大致的配置步骤和图片识别的功能。本文就以仓库中的面网案例的基础上进行了修改，将部分托管在cdn服务器的脚本库进行了本地化关联（解决加载太慢的问题），利用了笔者的超低PS技术进行了京剧面网的p图，实现了该效果。按MindAR作者的说法是可以在手机上运行，但是笔者在进行手机测试的时候，一直在转圈加载中，并未在手机上成功使用该功能，如果有大佬知道是啥问题也请指点一下。
Web + Ai 实现图像识别（JS）
mini_malism_的博客
05-13 2000
通过本教程，我们学习了如何使用 JavaScript 和 Transformers 库来实现图像对象检测的功能。我们使用了一个预训练的对象检测模型，并将其集成到网页中，通过简单的上传图片操作就能实现对象检测，并在图片上标注检测到的对象。这个示例展示了如何利用现有的工具和库来快速实现复杂的计算机视觉任务，为开发者提供了一种简单而有效的方法来处理图像数据。
【学习笔记】AR码（二维码）识别
Howe_xixi的博客
02-26 9244
使用ar_track_alver进行AR码识别，本文更多的是对古月老师对于ar_track_alver的更新版本的使用和实际使用的补充说明
移动端OCR识别
qazwsxzse的博客
07-03 1545
关键词: 移动端OCR识别    移动互联网   OCR识别 物欲横流高速发展的今天，作为21世纪时代的主人，我想问一下什么是当下最热门的？ 想必不用说了，移动手机占据了我们的日常。吃饭时我连上wifi,打开电视剧《鬼吹灯》；坐公交车时刷下朋友圈动态；上洗手间时，打开《开心消消乐》玩上两把；上班时，趁老板不在身边打开我手机版《英雄联盟》撸...
VuforiaAR扫描3d物体
qq_44718259的博客
09-16 752
Unity版本为2020.3.20，Vuforia版本为9.6.3。
深度学习：移动端图像分类模型
AIBAIKE的博客
08-14 1449
移动端精简模型主要有：mobilenet-v1/v2，nasnet，mnasnet，shufflenet，squeezenet 参考：https://blog.csdn.net/PeaceInMind/article/details/78079263 https://blog.csdn.net/qq_14845119/article/details/73648100...
unityAR扫描识别
02-21
### Unity AR 扫描与识别功能实现 #### 准备工作 为了在Unity中实现AR扫描和识别功能，需先安装必要的包。这包括`AR Foundation`以及针对特定平台（如Android或iOS）的扩展包，例如`ARCore Extensions for AR Foundation`[^3]。 #### 创建项目并设置环境 启动Unity后创建新项目，选择适合AR开发的模板。随后，在Package Manager中导入上述提及的必要软件包以支持后续的操作。 #### 配置AR会话管理器 向场景添加`ARSessionOrigin`对象作为根节点来初始化AR体验，并挂载相应的预制体（Prefab）。此步骤确保了能够访问底层硬件特性，比如摄像头输入等资源用于图像捕捉与处理[^1]。 对于具体的人脸检测案例而言，由于这项技术主要由移动操作系统层面所提供——即Google的ARCore或是Apple的ARKit负责执行实际的脸部追踪任务；因此开发者只需按照官方指南完成相应配置即可让应用程序具备基本的人脸识别能力而无需编写额外逻辑代码。 而对于静态图片或者预定义标记物的识别，则可以借助于`ARTrackedImageManager`组件。该组件允许程序监控已知目标的存在与否及其位置姿态变化情况，从而触发对应的交互事件响应机制。当一张被预先录入系统的照片出现在视场内时，系统将会自动匹配成功并向用户提供视觉或其他形式上的反馈提示信息[^2]。 ```csharp using UnityEngine; using UnityEngine.XR.ARFoundation; public class ImageRecognitionHandler : MonoBehaviour { private void OnEnable() { var trackedImageManager = FindObjectOfType<ARTrackedImageManager>(); trackedImageManager.trackedImagesChanged += OnTrackedImagesChanged; } private void OnDisable() { var trackedImageManager = FindObjectOfType<ARTrackedImageManager>(); trackedImageManager.trackedImagesChanged -= OnTrackedImagesChanged; } private void OnTrackedImagesChanged(ARTrackedImagesChangedEventArgs eventArgs) { foreach (var image in eventArgs.added) { Debug.Log($"Detected new image {image.referenceImage.name} at position {image.transform.position}"); } foreach (var updatedImage in eventArgs.updated) { Debug.Log($"Updated tracking state of image {updatedImage.referenceImage.name}: {updatedImage-trackingState}"); } } } ``` 这段C#脚本展示了如何监听来自`ARTrackedImageManager`的变化通知，并据此作出适当反应。每当有新的可识别图案进入视野范围之内或者是已有图案的状态发生改变的时候都会调用指定的方法来进行日志记录或者其他业务流程控制操作。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值