文档中心 > JSSDK文档
AR跟踪

注意

1、关于AR方面可以支持的技术能力,以该文档为准。

2、如您有疑问,官方可以支持技术答疑,提问时请带上具体问题、详细代码及使用场景。

3、对于AR开放能力,我们会不定期在钉钉群【互动联盟入驻&技术答疑】进行技术培训,欢迎关注!

4、如果您有更多对于AR能力的需求,可以联系 @无疆 @悠歌 反馈。

版本信息

Tida版本:3.2.137

支持版本:手机淘宝6.8.0以上,手机天猫6.1.0以上

打开摄像头

Tida.AR.scanOpenCamera

入参:
在猫客下入参只需一个空对象{}
在手淘下需要传入
{
   "isModelTracking":true
}
example:

let configObject = {};
if(appName === 'taobao'){
    configObject = {
        "isModelTracking":true
    }
}
Tida.AR.scanOpenCamera(configObject, function() {
  //todo
})
    

初始化MarkerTracker

Tida.AR.initMarkerTracker

入参

tbMarkerRes(这个入参是手淘用的,使用请联系子泰,汀澜)

url:类型string,生成的zip包,@子泰,手动生成
md5:string,@子泰,手动生成
markers:array,@子泰,手动生成
markers(这个入参是猫客用的)

markerIconUrl:识别图片,jpg格式,长边尽量不超过1280。
id:识别成功之后返回的数据里面会带有这个 id,表明当前识别到的是哪一个,这个值自己填,返回的时候自己能看明白就行。
filter:暂时没有用到
返回success

错误码:

-1 : id为空,或者手淘tbMarkerRes空

example:

Tida.AR.initMarkerTracker({
    tbMarkerRes: {
      'url':'https://gw.alicdn.com/bao/uploaded/TB1nRh2bBUSMeJjSszbXXberFXa.zip',
    'md5':'73013c46df25def9051cf8c1c6774613'},
    'markers':[{'id':'20'},{'id':'50'},{'id':'100'}]
    },
    markers: [
      {
          id: "logo1",
          markerIconUrl: "http://ossgw.alicdn.com/biu/1493099388627-bcpJDdEllhmAoskR.jpg",
          filter: ""
        },
        {
          id: "logo2",
          markerIconUrl: "https://gw.alicdn.com/tfs/TB1lHGbPVXXXXXUXFXXXXXXXXXX-640-312.jpg",
          filter: ""
        },
        {
            id: "logo3",
            markerIconUrl: "https://ossgw.alicdn.com/biu/1501224753602-H146AOBtUsyYDBMP.png",
            filter: ""
        }
    ]
  }, function(result) {
      //todo something
  })
  				

开始MarkerTracking

Tida.AR.startMarkerTracking

入参:{}
example:
	Tida.AR.startMarkerTracking({}, function(result) {
        console.log("AR.startMarkerTracking success: " , result);
    })

停止MarkerTracking

Tida.AR.stopMarkerTracking

入参:{}
example:
Tida.AR.stopMarkerTracking({}, function(result) {
      console.log("AR.stopMarkerTracking success: " , result);
  })

销毁MarkerTracking

Tida.AR.destroyMarkerTracker

入参:{}
example:
Tida.AR.destroyMarkerTracker({}, function(result) {
      console.log("AR.destroyMarkerTracker success: " , result);
  })

监听Marker跟踪结果

AR.updateMarkerTrackingState

这是一个监听事件,前端可以从这个监听事件中获取渲染需要用的数据

参数返回介绍:
state: 追踪状态,int 类型。
0代表未开始track;
1代表未track到目标;
2代表track到目标。
viewport: 3D视窗,JsonArray(float[4])类型,分别为left、top、right、bottom。
projectionMatrix: 投影矩阵,JsonArray(float[16])类型,列矩阵顺序。
viewMatrix: 观察矩阵,JsonArray(float[16])类型,列矩阵顺序。
id:tracking到的id(参考initMarkerTracker方法)
example:
document.addEventListener('AR.updateMarkerTrackingState', function(result){
  //此处处理result中返回的数据
})

通知客户端当前相机帧渲染结束

Tida.AR.afterWebMarkerDrawn

客户端在对相机帧识别计算的过程中,如果跟踪成功,那么会在将结果广播给web端后,渲染当前相机帧,同时停止后续相机的渲染,等待web端消费完结果通知。Web端在收到跟踪结果事件后,如果方向跟踪成功,那么Web端需要在消费完本次跟踪结果后调用AR.afterWebMarkerDrawn,通知客户端可以发送最新一帧的跟踪结果了,同时也可以渲染最新帧相机图像。

这个方法请结合AR.updateMarkerTrackingState的监听一起使用,在AR.updateMarkerTrackingState事件被监听到后,处理完返回的数据,请调用Tida.AR.afterWebMarkerDrawn()。这时客户端接受到afterWebMarkerDrawn事件,会触发AR.updateMarkerTrackingState然后下发下一帧数据。

example:
document.addEventListener('AR.updateMarkerTrackingState', function(result){
  //此处处理result中返回的数据
  Tida.AR.afterWebMarkerDrawn();
})

总结

AR跟踪的实现流程

1、打开摄像头,Tida.AR.scanOpenCamera()
2、初始化Marker,Tida.AR.initMarkerTracker()
3、开始Marker跟踪,Tida.AR.startMarkerTracking()(在此方法成功调用后,客户端会开始触发updateMarkerTrackingState事件)
4、添加AR.updateMarkerTrackingState的事件监听,监听Marker跟踪结果。若事件被触发,则返回矩阵信息,进行渲染。渲染成功后,前端触发afterWebMarkerDrawn事件,通知客户端下发下一帧数据。
5、关闭Marker跟踪,Tida.AR.stopMarkerTracking(),Tida.AR.destroyMarkerTracker()

FAQ

关于此文档暂时还没有FAQ
返回
顶部