JSSDK文档
打开AR
更新时间：2018/01/30
访问次数：4773
AR
在摄像头View之上，需要识别具体的标识物，才会有进一步的互动效果。比较适合logo识别玩法、PokemonGo类似识别类的游戏。
识别物图片规范
- 图片格式为JPG。
- 图片尺寸建议在1024px * 1024px以内 ，具体尺寸根据业务需要合理安排。图片大小建议在800K以内。
- 识别图需要颜色差异明显，色彩单一会影响识别效果。（识别算法在颜色差异明显的情况下 识别更准确）
- 如果需要打印线下物料，则需要避免反光材质等。
- 天猫上：所有识别图大小不要超过400K, AR目前的数据传输类似JSbridge方式，超过400K以后 在部分Android机器上会出现数据丢失问题
Demo 使用流程展示：
使用天猫客户端扫描以下二维码, 找到AR按钮，点击打开摄像头后，点击选择需要识别的图片，启动AR成功后可看到结果
应用接入申请环节
目前是定向接入，找对应业务运营同学提交相关的PRD或者demo流程，通过相关的业务和技术审核以后才能往下进行应用开发。
识别流程：
- JS调用开启识别API开启摄像头
- WebView加载前端AR页面
- 调用开启识别接口，开始进行识别监听
- 前端根据返回的位置数据进行AR效果展示
开启AR窗口
// API参数说明
var configObject = {
"eventId":"1", // 活动Id，导入Marker后系统分配的。
"shopId":"123", // 店铺Id
"url":"https://xxxx.ews.m.jaeapp.com" //AR窗口上方叠加的H5页面
}
Tida.AR.openMarker(configObject)
启动识别Marker
// 参数说明
// onMatrixUpdateCallback // 在矩阵发生更新时的回调
var onMatrixUpdateCallback = {
markers:['通过mmarker工具生成那段字符串'],//识别标识物图片的加密信息，手机天猫App场景下需要设置。手机淘宝App下通过设置Eventid来实现。
success: function(data) {
console.log('success:'+JSON.stringify(data));
},
fail: function(data) {
console.log('fail:'+JSON.stringify(data));
},
recognizeSuccess: function(data) {
console.log('updatecallback:'+JSON.stringify(data));
},
recognize: function(data) {
console.log('recognize:'+JSON.stringify(data));
}
};
Tida.AR.startMarkerTrack(onMatrixUpdateCallback);
markers接入的标识物图片的加密信息通过mmarker工具生成，详见marker制作工具
回调参数
{
"projectionMatrix":"",
// 3D到屏幕显示的投影矩阵，16长度的数字数组字符串，以逗号分隔
"resourceId":"",
//标识物ID，仅在手机淘宝环境下支持。resourceId=s0.bin，resourceId=s1.bin分别代表第一个识别物、第二个识别物，如此递增。
"RT":""
//变换矩阵，16长度的数字数组字符串，以逗号分隔
models: [] // 天猫的识别结果，如果长度大于0，表示识别成功
}
在天猫上：如果你想在识别到目标后使用3D做渲染，识别程序会返回下面几个结果:
- viewport
- projection Matrix
- model Matrix
{
"viewport": [-105, 0, 851, 1136], // Viewport
"models": [
{
"name": "pinball",
"mvprojection": [ // Model View Projection
2.394426, -0.04623331, -0.1083115, -0.1077713,
0.0528238, 1.809534, -0.05749675, -0.05720999,
-0.2414996, -0.06555773, -0.9975035, -0.9925284,
-187.2699, -213.9585, 399.7688, 407.75
],
"projection": [ //Projection
0, -1.811002, 0, 0,
2.407058, 0, 0, 0,
0.02137727, 0.0334729, -1.005013, -1,
0, 0, -10.02506, 0
],
"modelmatrix": [ //Model
0.02752107, 0.9937948, 0.1077713, 0,
-0.9981321, 0.02143729, 0.05720999, 0,
0.05454468, -0.1091445, 0.9925284, 0,
110.6072, -74.17903, -407.75, 1
]
}
]}
注意，若使用webgl渲染时，需要在页面隐藏时停止webgl渲染，不然会引起客户端crash。相关方法见页面激活状态
结束Marker识别
Tida.AR.stopMarkerTrack();
AR多Marker场景
当一个活动，需要用到多个识别物图片的时候，这个时候可以需要区分具体是哪个识别物图片。处理方式如下：
手机淘宝：通过onMatrixUpdateCallback方法里的回调结果来区分。"resourceId":"s0.bin"，"resourceId":"s1.bin"分别代表第一个识别物、第二个识别物，如此递增。
手机天猫：多张图同时生成一份marker
