Samsung Internet AR

Overview

Samsung Internet for Android is a simple yet fast and reliable web browser for your mobile devices. It is the default browser for Samsung Galaxy devices and provides a highly optimized experience for its users. Samsung Internet is continuously evolving to provide you with the best browsing experience.

In this tutorial, we will tackle how to create an Augmented Reality environment to make browsing the web more immersive and engaging using your mobile device.

Objective

Create an AR environment using A-Frame as a foundation and experience it on your Samsung Note 9.

Setup

Application Development

1. Remix this project by pushing the Remix button. This will copy everything into your own project.

Figure 1 Remixing a project

Figure 1 Remixing a project

2. The code to edit is in index.html. You will notice that the code is the same as from Part 1, except most of the scene has been removed.

3. We will start by adding a new JavaScript library, A-Frame AR, which will provide our Augmented Reality abilities. Add this <script> tag underneath the A-Frame one:

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

4. Next we need to set up our A-Frame AR scene. Add these attributes to the <a-scene> element:

embedded arjs="sourceType: webcam;"

So the element will look like this: <a-scene embedded arjs="sourceType: webcam;">

5. Now we need to tell A-Frame AR what marker we want to detect in the real world and augment. Add this underneath the <a-assets>:

<a-marker preset="pattern" type="pattern" url="https://cdn.glitch.com/548c358d-9b53-4e28-9ca1-c119ef2bfe7f%2Fpattern-marker.patt?1536834951374">

</a-marker>

This points towards a pattern file made from our "Samsung Internet" marker image - the one that we have print-outs of on the desks. (The pattern file was made using this Generator tool).

6. Now we can define what virtual object(s) we want to appear on top of the marker when it is detected through the camera. Add the following inside the <a-marker ...> </a-marker> section:

<a-entity obj-model="obj:#lighthouse-obj;mtl:#lighthouse-mtl" scale="2 2 2"></a-entity>

You may notice this is essentially the same Lighthouse element from Part 1. (We have just altered the scale and removed the shadow).

7. Finally we need to add one more thing inside our <a-scene> - a camera element:

<a-entity camera></a-entity>

8. Your code should now be ready! Try holding up one of the "Samsung Internet" marker print-outs up to the laptop camera, when you are viewing the webpage (the tab that opened up when you pressed 'Show Live'). You should see the Lighthouse appear above it!

9. You can also try it out in the Samsung Internet browser on the phones provided (or on your own device, if you have it). Just visit the same URL, accept the camera permission prompt and point your mobile phone camera at the marker.

(If you don't have one of the print-outs to hand, you can point it at this image on your screen.)