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

最新推荐文章于 2024-04-21 14:45:38 发布

judy_1118

最新推荐文章于 2024-04-21 14:45:38 发布

阅读量2.5k

点赞数 1

分类专栏： h5 文章标签： AR

本文链接：https://blog.csdn.net/judykang123/article/details/109715212

版权

37 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

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

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

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

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

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

在这里插入图片描述

创建一个API KEY。因为我们是用来识别图片，所以创建时一定要把【云识别】勾选上，其他的根据个人需要勾选。
新建云识别图库。点击【新建云识别图库】，区域可以选择离自己比较近的。在这里也是有不同的分类对应不同价位，那只是个人测试的话我就选了最基础的按调用次数的免费款。
上传识别图片。点击创建的云识别图库后面的【管理】，点击上传识别图，注意宽度的单位是cm不是px。meta写不写都行，写的话最好是用对象的形式。上传后记得点击下识别图后面的管理，看看其【可识别度】和【可跟踪度】。我第一次上传的图片这俩都是0（灰色的），我还傻了吧唧没发现。

在这里插入图片描述

获取token。回到识别图列表页，点击【密钥】，点击【WebAR使用】，选择有效期，点击【生成Token】。就能获取到token啦~可以点击【复制】进行一键复制。

在这里插入图片描述

const webAR = new WebAR(1000, 'https://cn1-crs.easyar.com:8443/search', '你的token');

在我的手机上，获取所有的音视频设备时只能获取到一个摄像设备，所以我就直接将这个设备写成后置的了，修改的是webar.js里面listCamera函数中的代码

option.text = device.label || 'camera environment';
option.value = JSON.stringify({ audio: false, video: { facingMode: { exact: 'environment' } } });

在这里插入图片描述

第四步修改token时，修改的文件是文件夹【TokenThreeJsExample】里面的，其他步骤和第四步基本相同

关注