Augmented Reality in 10 Lines of HTML

Alexandra Etienne Apr 10, 2017

vr ar webgl arjs

AR.js with A-Frame Magic

Do you want to do Augmented Reality on the web ? You can now do it in 10 lines of HTML! Seriously! Let me walk you through the code, it's crazy simple.
We released AR.js recently. You can experience efficient augmented reality for the web directly on your phone without installing any applications. But let’s go further and see how to produce your own augmented reality experience. The shortest example of AR.js is only 10lines of HTML thanks to the magic of a-frame. You can see it live on codepen:

<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js --> 
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded artoolkit='sourceType: webcam;'>
        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
</body>

Let’s break it down line by line.

Including the Libraries

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>

First, you include a-frame, an effort started by MozillaVR to build VR experiences. A-frame contains three.js. Then you simply include AR.js for a-frame. AR.js will make the 3d displayed in AR run very fast on your phone, even if it’s a 2–3 year old phone!

Defining the Body

<body style='margin : 0px; overflow: hidden;'>
    <!-- ... -->
</body>

In this step, it’s all business as usual. You define the body, like you would in all HTML pages.

Creating a 3d Scene

    <a-scene embedded artoolkit='sourceType: webcam;'>
        <!-- put your 3d content here -->
    </a-scene>

Next, we are going to create our a-frame scene. We also need to add the ARToolkit component. ARToolKit is an open-source library that we use to localize it through the phone camera.

Adding Simple Content

        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>

Once we have created the 3d scene, we can start adding objects to it. In this line, we add a simple box. We then modify its material to make it transparent. We also change its position so it displays on top of the AR marker.

Adding the AR Camera

       <a-marker-camera preset='hiro'></a-marker-camera>

In this last step, we are going to add a camera. We include the preset ‘hiro’ (as in Hiro marker). Finally, we make it move as if it were your phone. Easy right?

Congratulations! You are done. You now have augmented reality, in only 10 lines of HTML, running fast on your phone and free of charge.

Check out this video version I made of the tutorial:

Thanks for reading, and if you like this post, don’t forget to share 😉
Also, please feel free to contact me anytime @AndraConnect

Alexandra Etienne

henriquemota99

Is it possible to use my own image instead of Hiro? Like a face with a black border or something?

Hi! Thanks for your interest...this might be able to help artoolkit.org/documentation/doku.p...

Also - if you're running into any difficulties please report them on the github issue and we'll be happy to help github.com/jeromeetienne/AR.js/issues

Cindy Dochstader

I would like to know this too, please!

Juanjo Salvador

Wow, that's awesome!

Brian New

This was really helpful, thank you.

P.s. Could anyone help? I've tried loading a different texture, but all I'm getting is a white material (if url is wrong/file not found, then A-frame seems to apply a black material) -- so it looks like the texture file is being found OK, but not being applied.

codepen.io/RedHenDev/pen/MogOXb

I've tried deployment from both Glitch and CodePen, without success.

Any idea how to solve this?

Thanks again!

Marco Ibarra

This is the kind of project that really brings together Imagination and Engineering at their best ✨

Awesome demo, great execution, good quality 👌

I am really looking forward to play around with these demos 😃

Congratulations!

Gautam krishna.R

Liked it...

Matt Weingaertner

Amazing 😱

Thanks so much for all the kind words and the support guys! We wanted to make AR seem easy-to-learn for everyone 👍

waihow

This is awesome! But I meet an error with message "WebRTC issue! navigator.getUserMedia not present in your browser", how should I solve it?

Hey waihow...make sure that you are not using iOS....also, please report your bug on the github issue and we'll be happy to help github.com/jeromeetienne/AR.js/issues 😀

reda

Excellent demo. Thanks

Edwin Ramirez

That was really cool. Congrats.

Halton Huo

Really cool stuff

Burgess

Looks pretty easy.I wanna try it

Risyandi

Awesome, thanks for share alexandra

Justin Dorfman

This is remarkable. Amazing demo.

Casey Reed

Awesome project! Thanks for sharing

Mark Roland

I just tried this in Chrome 58 with the hiro.jpg marker printed out on an 8.5 x 11 and nothing happened. I've never worked AR before... am I missing something? Thanks!