如何使用HTML5和AR在视频/图像上实时生成3d标记？

Question

I am still wondering how can I generate 3d markers using HTML5 and AR it on a video / image in real time?

My requirement is -

I want to develop AR eg: I get an image or live video stream on desktop and I should be able to mark some points/annotate something on it and mirror it on to iPad remotely. How can I achieve this in HTML5 app

I came across wonderful tutorial here on JSARToolKit - http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/ , which I felt would be most suitable one for my use case. But, I am not sure how do I start with it? I found the source code in github but I am not very sure about how do i debug or understand it and twist as per my use case? or at least how can I get my hands dirty to start with it?

Answer 1

I would recommend trying "Metaio" or "Wikitude" SDK they both support HTML. Here is a sample for Marker based Tracker using "Metaio" SDK & Unity3D http://bit.ly/ARTrkingSample

Regarding your idea you have to display the video or image base on the marker then 4 ex: on touch add your annotation manually store the location of them (in Metaio you will need their location compared to the Camera location because Metaio SDK will keep change the Markers location base on the camera moves so you can see it stable when you move your physical camera) and display them in the same location on your other device.