Augmented Reality in 10 Lines of HTML
Tags: arjs, webgl, ar, vr
Published: 2017-04-10 18:53:20

---
title: Augmented Reality in 10 Lines of HTML
published: true
description: Learn how to do AR on the web in just 10 lines of HTML with AR.js and a-frame
cover_image: https://cdn-images-1.medium.com/max/2000/1*3_KRoxGrxyVyByUuNi3DNQ.jpeg
tags: ARjs, WebGL, AR, VR, Virtual-Reality
---

## 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](https://github.com/jeromeetienne/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](https://aframe.io/). You can see it live on [codepen](https://codepen.io/jeromeetienne/pen/mRqqzb):

```html
<!-- 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 

```html
<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](https://aframe.io/), an effort started by [MozillaVR](https://mozvr.com/) to build VR experiences. A-frame contains [three.js](https://threejs.org/). 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 

```html
<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  

```html
    <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](https://artoolkit.org/) is an open-source library that we use to localize it through the phone camera.

# Adding Simple Content 

```html
        <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

```html
       <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](https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg)). 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:

{% youtube v_Uj0C8sMi4 %}


***

Thanks for reading, and if you like this post, donâ€™t forget to share ðŸ˜‰
Also, please feel free to contact me anytime [@AndraConnect](https://twitter.com/AndraConnect)