找回密码
 立即注册
搜索
EasyAR 教程 WebAR 查看内容

WebAR 常见开发问题(停止更新)

AlbertLee 2018-5-11 11:10

WebAR 开发中的常见问题总结(停止更新,可去【支持/常见问题】落地页寻找解决方法。)

WebAR可以轻松地运行在Android、iOS、Windows、MacOS系统的Web浏览器上,无需APP,轻松实现跨平台. WebAR主要是以URL的格式传播,符合微信等社交媒体信息流动的基本技术要求,配合创意策划方案,可以形成爆炸式的病毒营销效果。WebAR 具有以下特点:



第一部分:WebAR 开发参考

1. 文档:https://www.easyar.cn/doc/EasyAR%20WebAR/manual.html

2. sample:https://github.com/gentwolf-shen/EasyAR-WebAR-Demo

3. 零配置运行WebAR Demo:https://github.com/gentwolf-shen/EasyAR-WebAR-Demo


第二部分:WebAR 开发基本步骤

1. 开通WebAR 图库

进入 开发中心 - - 新建云识别图库


WebAR 提供28 天的试用时间 ,你可以根据区域、扫面次数、期限来选择合适你的图库




创建好之后,会得到你的秘钥三要素(Key,secret,server)




2.  运行sample

下载好sample 之后,首先在图库上传你要识别的图片,然后将三要素填写在sample的正确位置(recognize.php


3. 部署服务器

在浏览器上使用摄像头,需要HTTPS协议支持


第三部分:常见问题整理(不断更新)


1. WebAR 适用于哪些平台?

1)WebAR可以轻松地运行在Android、iOS、Windows、Mac系统的Web浏览器上,无需APP,轻松实现跨平台。

2)PC:支持Chrome 、Safari、Firefox 浏览器

3)iOS:iOS系统上仅支持Safari浏览器(因此当你在微信打开WebAR 链接之后,需要在Safari浏览器打开使用,暂不支持微信直接浏览使用)

4)Android:支持微信直接打开使用


2. WebAR 可以使用Unity来开发吗?需要什么知识/技能来开发?

1)WebAR 不可以使用Unity来开发,与Unity(WebGL)没有任何关系

2)WebAR 主要需要前端(Html5、javascript)、服务器端(PHP)还有前端3D引擎(Three.js)知识


3. 使用WebAR 都可以实现什么效果?

使用WebAR 可以实现:扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果。并且支持3D模型交互。


4. WebAR 可以实现图像跟踪吗?

当前版本的WebAR 没有集成追踪的功能,后续版本迭代中会加入。


5. WebAR sample 的说明

1)WebAR sample 链接:https://github.com/gentwolf-shen/EasyAR-WebAR-Demo   WebAR 提供两个sample(SimpleExample、SimpleThreeJsExample)

2)SimpleExample:这个sample 主要展示了 WebAR  最基本的能力:识别。扫描识别图之后,会返回识别图的 targetid、meta等相关信息。

3)SimpleThreeJsExample:这个sample 主要展示如何使用Three.js 来渲染显示模型。


6. WebAR 模型的加载方式

webAR 主要有两种加载模型的方式:

1)本地加载:可以将模型放置在本地文件下,通过 threeHelper.loadObject(“本地model完整路径”)方法来实现模型的展示

2)URL 加载:首先将你的模型放置在服务器上,然后将URL保存在Meta文件里,识别成功之后,会从Meta取出Model 地址

const meta = JSON.parse (window.atob(msg.meta))

threeHelper.loadObject (meta.model)


7. WebAR 开发小细节注意

1)填写三要素时CLOUDURL 是HTTP 协议,并且不要遗漏search 参数

2)访问地址必须是HTTPS 协议


8. Meta 格式是什么样的?怎么用?

1)meta中储存的内容没有格式限制,建议使用JSON格式,可以储存模型、视频地址等信息,
   如:{"model":"\/assets\/models\/demo.fbx","scale":0.5,"position":[0,-7,0]}

2)识别成功后,客户端取到的meta是base64编码过的,使用前需要解码。


9. 手机运行WebAR程序,浏览器无法打开摄像头

1)需要HTTPS协议支持。

2)安卓应用微信或者QQ浏览器过于低级,检查并升级浏览器的内核版本。

3)WebAR主要是基于WebRTC协议,目前市面上并不是所有的浏览器支持此协议。所以WebAR 主要支持ChromeSafarifirefox浏览器。对于Android平台,支持在微信、QQChrome、火狐浏览器打开使用;对于iOS平台,仅支持Safari浏览器使用(且必须iOS V11.0+)。


10. WebAR小程序是否支持扫描识别图渲染视频以及加载方式

支持。

1)直接使用URL:Web video标签覆盖image上,即将URL地址填写在rc即可(传统的Web前端知识)。

2)使用Meta: URL添加到Meta文件之后,使用three.jsvideotexture方法来load video(需掌握Three.js的知识)。


11.WebAR小程序在采用填写Cloud key,secret,url识别请求方式时,出现报错信息”{StatusCode:2,result:“网络错误”}”

错误分析:该请求识别的方法是通过上传recognize.php文件,但是需要在recognize.php文件中填写Cloud key,secret,url。解决该问题也即是在上传recognize.php文件时填写上述三要素即可


12. 云识别API使用

1)从官网获取Cloud Key、Cloud Secret、Client-end (Target Recognition) URL
2)4个必须参数:data(GMT/UTC日期与时间)、appKey(Cloud Key)、image(base64后的图片数据,不包含“data:image/png;base64, ”),signature(参数签名)
            a. 将请求的参数按键名排序
            b.对于每个参数,将其键名与值拼接成字符串
            c.将这样得到的所有参数的字符串拼接
            d. 在得到的字符串后面拼上应用密文
            e. 得到的字符串的 sha1 哈希的十六进制表示即为签名
4)将上面的4个参数转换为JSON格式,使用POST,并设置Content-Type=application/json,发送到云识别服务器

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏