Augmented Reality (AR) got my attention after I have seen few interesting projects on my twitter feed and I wanted to do small AR demo with using basic web development skills, just to experiment AR stuff.
Here is the result:
Doing some AR experiment 🕺 I will publish details on my blog later #AugmentedReality #groot pic.twitter.com/WPTALpZGj9
— Sezgin Ege (@sezginege ) 27 Nisan 2019
I have only used a-frame framework and AR.js during development.
- a-frame: is a web framework for building virtual reality experiences.
- AR.js: is a javascript framework that enabling AR features directly on web browsers without sacrificing performance. It works on any phone that supports webgl and webrtc.
Let`s see the code
I have added comments to the code. It is pretty straightforward. Basically, we define our scene, initialize arjs, add camera and marker for origin point. Also we define the entity that we would like to show on origin point. I have used 3D groot model but you may want to show static image/box etc. In that case, you need to use a-box or a-image components.
How we can test this?
If you open index.html file directly on your browser and check developer console, you may see CORS issue:
Access to XMLHttpRequest at 'file:///<workplace>/AR/test/scene.gltf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
Please have a look CORS wiki page to understand what CORS means: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
In order to get rid of this issue, we need to run http-server. Node.js has a simple HTTP server package. To install, you need to run:
npm install http-server -g
After successfully command executed, we need to go to the folder that index.html exists and then start http server;
http-server
We should see an output like this on our terminal:
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.1.36:8080
So, server is up and running. We can click any of those addresses and open in our browser. However we will face with two issues.
- Testing AR with our browser´s webcam is not comfortable at all.
- We need to create SSL certificate for our server. Otherwise, we will see “Webcam Error NotSupportedError Only secure origins are allowed” error: https://github.com/jeromeetienne/AR.js/issues/399
To simplify this process, we can use ngrok which is reverse proxy software that establishes secure tunnels from a public endpoint such as internet to a locally running network service. We need to download and run ngrok.
./ngrok http <port that your local server listening>
We should see an output like this on our terminal:
Forwarding http://e2db416e.ngrok.io -> localhost:8080
Forwarding https://e2db416e.ngrok.io -> localhost:808
Now, We should be able to reach our demo with using https endpoint with any device that has internet connection.
To see our entity on screen, we should show the hiro marker to the camera. Marker can be found here: https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg
Conclusion
The demo is pretty simple. However if we consider that we did this demo with few lines of html code and few JS libraries, there is a huge potential here to build greater things.
I am finishing the article with one of my favorite AR application. Enjoy!
Top comments (0)