Augmented Reality in 10 Lines of HTML
Alexandra Etienne
Apr 10 '17
γ»1 min read
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
AndraConnect
90
37
Trending on 
ππDevTo CLIππ: A Valentine's Day Gift To My Favorite People
How many ways iterate the objects and arrays in javascript?
The 14 habits of highly effective developers (Part 1)
Get Yourself Profiled
Is Giving Google All Your Data Worth The Convenience?
I need advice for UI improvement.
Advanced array manipulation in JavaScript π§
Auth With Twitter
Auth With GitHub
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!
Wow, that's awesome!
Is it possible to use my own image instead of Hiro? Like a face with a black border or something?
I would like to know this too, please!
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
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!
Liked it...
Excellent demo. Thanks
That was really cool. Congrats.
Thanks so much for all the kind words and the support guys! We wanted to make AR seem easy-to-learn for everyone π
Really cool stuff
Looks pretty easy.I wanna try it
Awesome, thanks for share alexandra
Amazing π±
This is remarkable. Amazing demo.
Awesome project! Thanks for sharing
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 πο»Ώ
Hi :) Were i dev the 3d to put on scene? Unity? Thankyou :)
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!