How to create an Augmented Reality Web App using AR.js - Lesson 1

Learn how to create a simple Augmented Reality Web App with only a few lines of HTML.

Step 1: Open the example Web AR app

To open the example point your phone's camera at the qr code below or click here to run it on your browser and webcam. When prompted, agree to use your phone's camera or computer's camera.

This AR example was built on examples created by Jerome Etienne.

Step 2 - Point camera at Hiro Marker below, click on the HTML button to collapse it.

Print this image out for higher response and accuracy.

How to create the augmented reality web app shown above

Step 1: Open an IDE like Microsoft Visual Studio Code. Click here to learn How to download Microsoft Visual Studio Code and create a simple website

If that sounded like a foreign language, no worries, my site is built around teaching people how to do anything without any experience.

Step 2: Seriously click on the link above and download visual studio code. Stop after Part 1.

Step 3: Create an HTML file

In VS Code click file in the top left corner and select new file, or press CTRL N. A new file window will appear and will be named something like Untitled-1 by default.

Step 4: Copy and Paste the HTML below into the new file or click here for my GitHub

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden;'>

<a-scene embedded arjs='sourceType: webcam;'>

<a-box color="tomato" position="0 0 -.25" rotation="0 0 0"></a-box>

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

</a-scene>

</body>

Once you save the file in the next step, you will see the colors change like the image above.

Step 5: Save as an html file

Click file in the top left corner, then click save, or press CTRL S.

A file window will open, change the file name to arexample.html and then save it to your desktop so you can find it in the next step. You do not have to set the file type in "Save as type" if you make sure to put .html after the name of the file.

You have now created a web ar app! Lets test it.


Step 6: Test it

Testing with a webcam

Go to your desktop and find the file you saved above.

Right click on the file and select open with... and select chrome or internet explorer if you do not have chrome. Your new web ar app should open in your browser! When prompted approve the use of your webcam.

Testing with your phone/ Hosting with Code Pen

If you don't have a webcam, want to test it on your phone, or share it with friends, your code will have to be hosted online.

Step 1: Setup a Codepen account. Its super quick and easy.

Click on the link above.

Step 2: Create a pen

From within your code pen account, click on "Pen" in the top left corner.

Step 3: Add your HTML

Copy and Paste your html from earlier into the html window on the far left.

I moved the CSS and JavaScript windows over so you could see the code better.


Step 4: Give it a name and Save it

Click the pencil icon in the top left corner, and give the pen a name. Then click save in the top right corner. You are finished! If you do not have a webcam, you will get a small error when this is opened up at first, just ignore it and click OK if necessary.


Step 5: Test with phone and Share with friends.

Click the Share button in the bottom right hand corner of the window. You have the option to send it straight to your phone via text, or post it to social media.

You can always copy the url for your pen and navigate to it from your phone.

Once you open the corresponding url on your phone, click ok when prompted to use the camera. Point the camera at the hiro marker and you should see a red cube render on top of the marker.

I highly suggest printing out the marker, it will work better.


What do you do now?

A red cube? That is kind of stupid to show someone.

Change & Test!

What is the point of following a guide if you don't branch out and try it for yourself.

Things to try

  1. Change the cube color to blue, <a-box color="blue" position="0 0 0" rotation="0 0 0"></a-box>

  2. Change the cube to a sphere, <a-sphere color="tomato" position="0 0 0" rotation="0 0 0"></a-sphere>

  3. Add more than one object, <a-box color="blue" position="1 1 0" rotation="0 0 0"></a-box> <a-sphere color="tomato" position="-1 -1 0" rotation="0 0 0"></a-sphere>

  4. Change their positions, <a-box color="blue" position="1 2 0" rotation="0 0 0"></a-box> Note: start with small changes.

  5. Rotate the objects, <a-box color="blue" position="0 0 0" rotation="10 45 20"></a-box> Note: do this with degrees.

  6. More advanced example to come like how to animate an object on click or how to add images.

Here are some of jeromeetienne's examples. They are amazing!! I am basing all of this off his work and just want more people to use his stuff.

Click on each one from your phone and test them out. Source code is available to the right of each example.


Please share this guide if you found it interesting or useful. All feedback is appreciated.

I have many more examples coming in the future like how to load gltf 3D objects in AR.js

0 comments