Marker Based AR in Browser

Video showing a quick experiment with marker image based augmented reality in standard web browsers. (Not WebXR ).

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.

category: projects
<< prev Photon Experiments
^ up ^
Blog Index
next >>
Web Audio Recording