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

官网：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了

第三步：获取webAR Token

在官网注册一个账号
点击【开发中心】
获取Sense授权。这里分为个人版（免费）、专业版（按月付费）、经典版（一次付费），因为只是看下怎么实现功能，所以这里选的是个人版

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

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

第四步：修改代码（识别成功播放视频）

1、修改token

在编辑器中打开第二步分出来的文件夹【TokenVideoExample】
按照readme的指示，打开【TokenVideoExample】–【asset】–【js】–【app.js】，并将第三步获取的token替换上

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

2、修改摄像头

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

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

3、修改视频路径/识别成功后显示其他

这里需要修改的代码是app.js里的
如果需要替换视频就更改橙色下划线部分
如果不播放视频出现其他效果（出来图片或者跳页之类的），可以将红色框选部分删掉换成自己想要的效果

识别成功后播放3D模型

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

写在最后（注意）

因为电脑上没有摄像头，我就没测电脑上好不好使（电脑上的摄像头好像是前置？）。
在手机上测试需要链接是https的，需要注意一下
安卓手机（据说）可以直接在微信打开，苹果手机需要在Safari中打开
如果想苹果安卓都从手机上打开，建议使用小程序
如果识别一直失败，可以多换几个token试试，这次测试3D的就总不好使，多换了几个token后就好了
如果账号云识别的免费试用到期了，又不是商用，只是自己使用的话，建议换一个邮箱重新注册，然后换个token就行

移动端浏览器AR扫描识别指定图片相关推荐

Java 扫描识别条形码图片
1.条形码扫描识别的实现方法及步骤本文以Java代码示例介绍如何来扫描和识别条形码图片.这里使用免费的条码工具Free Spire.Barcode for Java,调用BarcodeScanner ...
编程语言Java 扫描识别条形码图片
编程语言Java 扫描识别条形码图片 1.条形码扫描识别的实现方法及步骤本文以Java代码示例介绍如何来扫描和识别条形码图片.这里使用免费条码工具 Free Spire.Barcode for Ja ...
微信小程序AR扫描识别图(支持多图片)加载3D模型及其动画
MP-EasyAR-3DModels-Animations For Instance *微信公众平台* *微信开发者工具* *EasyAR* *项目实践* *下载文件到本地* *扫描识别* *加载模型 ...
Android实现OCR扫描识别数字图片之图片扫描识别
Android可以识别和扫描二维码,但是识别字符串呢? google提供了以下解决方案用的是原来HP的相关资料. 可以吧,这个迁移到Android上. 工程导入成功是可以正常运行的,我是专门换了个电脑 ...
移动端二代身份证扫描识
一.移动端二代身份证扫描识别应用背景这些年,随着移动互联网的的发展,越来越多的企业都推出了自己的移动APP,这些APP多数都涉及到个人身份证信息的输入认证(即实名认证),如果手动去输入身份证号码和 ...
手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码
一.场景手机移动端-原生js 浏览器h5 解决识别二维码条形码功能: 不借助Hbuilder.需要自己打包成APP,比如用Hbuilder打包,浏览器端项目h5 无打包成app部署 X 不采用 ...
外地车摄像头 android,Android端车牌识别可以用来实现摄像头扫描识别车牌？
原标题:Android端车牌识别可以用来实现摄像头扫描识别车牌? 随着汽车的需求暴增,车辆管理成为了城市管理的重中之重.Android端车牌识别技术已被广泛应用于城市智能交通.智慧小区的系统中,以往是 ...
pyaudio：基于pyaudio利用Python编程从电脑端录制音频保存到指定文件夹+将录音上传服务器+录音进行识别并转为文本保存
pyaudio:基于pyaudio利用Python编程从电脑端录制音频保存到指定文件夹+将录音上传服务器+录音进行识别并转为文本保存目录输出结果代码实现输出结果代码实现 # -*- codi ...
如何识别图片表格？在线扫描识别表格的方法分享
如何识别图片表格?小伙伴们应该都知道,我们在装修的时候需要购买许多材料.我们在购买材料的时候则会留存许多纸质版的采购单.随着材料购买越来越多,我们在纸质单子上统计装修费用多有不便.其实我们完全可以识别 ...