Marker Based AR

Video showing an quick experiment with marker based augmented reality using browser only technologies.

In the video, I am using a webcam located on top of the main screen. Anytime the webcam sees the marker, a 3d cube is drawn in the camera space and rendered in the camera video feed on the main screen.

Everything in this demo is being done in browser using the AR.js library and newer HTML5 camera APIs. I am using an iPad at the beginning of the video to show the marker image, but then towards the end I switched to a print out of the marker to make clear there is no technology component from the ipad. The demo would be more compelling if shown using a phone/mobile device (which would use the camera as a pass-through to the display containing the 3D image), but my android device camera is dying.

The demo does not work with current iOS browsers, but it might be able to work in iOS 11. UPDATE:[2017-10-21] Confirmed this does now work with iOS 11 Safari browser.

This video was done as a live youtube stream from a foscam pan/tilt webcam, streamed using VLC.

<< back to project list