Skip to main content

Augmented Reality with Ionic

In it's simplest explanation, augmented reality (AR) is when the real-world environment around you is enhanced to include computer generated objects. In doing so, the existing space around has been added too, rather than with virtual reality where one is thrown into an entirely artifical world.

There are plenty of use cases for augmented reality in an enterprise application. For example, you might want to have your user "try before they buy". Let's dive in to how Ionic can help you create an experience just like this!

Building an AR Poster#

When it comes to employee advocacy, company "swag" can be an effective marketing tool. This may come in the form of shirts, pens, stickers, and the like. Another way you can continue to keep your company top of mind could be to have a company logo poster hung behind your salespeople while they are on their sales calls. Before your employee orders the poster, they might want to check out what it will look like in their space. Ionic, combined with ThreeJs and A-Frame, is just what you need to do this.

In our employee application, we'll start out by creating an AR modal page using the following command:

ionic generate page ar-launcher

This newly created AR Launcher page will house the 3D scene the user is presented to see what their space will look like with the newly added poster. They layout of the modal is quite simple. We'll have a simple iframe HTML object inside the content of our page. This will look as follows:

// ar-launcher.page.html
<ion-header>  <ion-toolbar>    <ion-title>AR Launcher</ion-title>    <ion-buttons slot="end">      <ion-button (click)="close()">        <ion-icon name="close" slot="icon-only"></ion-icon>      </ion-button>    </ion-buttons>  </ion-toolbar></ion-header>
<ion-content>  <iframe src="./assets/aframe-ar.html"></iframe></ion-content>

You'll notice a few things about the above page. First, we have an ion-button within the page header to close the modal when the user is satisfied. Second, and most important, we have the iframe holding our A-Frame scene. The above scene will use the user's webcam to find a "marker" where we want to display the poster. Once the marker is found, the object will be portrayed as if it's in the user's environment.

One quick note about the iframe is that we'll want it to take up the entire modal. To ensure this occurs, we can add the following style to our ar-launcher.page.scss file:

iframe {  position: absolute;  width: 100%;  height: 100%;  border: none;}

Before creating the scene, we'll quickly implement the close functionality inside the modal. This is a function called close which itself runs the dismiss function from the ModalController. Your modal implementation should look as follows:

// ar-launcher.page.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';import { ModalController } from '@ionic/angular';
@Component({  selector: 'app-ar-launcher',  templateUrl: './ar-launcher.page.html',  styleUrls: ['./ar-launcher.page.scss'],  encapsulation: ViewEncapsulation.None,})export class ARLauncherPage implements OnInit {  constructor(private modalCtrl: ModalController) {}
  ngOnInit() {}
  close() {    this.modalCtrl.dismiss();  }}

Creating the scene#

Now that we have the ability to display the poster to our user in their space, we can create the actual scene to be shown by the marker. First we'll create an HTML file name aframe-ar.html inside our assets folder. In the newly create file, we'll add the following:

<!DOCTYPE html><html>  <!-- include A-Frame -->  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>  <!-- include ar.js for A-Frame -->  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>  <body style="margin: 0px; overflow: hidden;">    <a-scene embedded arjs>      <a-marker preset="hiro">        <a-image src="poster.jpg" rotation="-90 0 0" width="3" height="4"></a-image>      </a-marker>      <a-entity camera></a-entity>    </a-scene>  </body></html>

The above HTML shows how by using a package called AR.js, created by Jerome Etienne, combined with A-Frame, we can get an experience up and running with just a small amount of code! In this specific example, we're using a poster image, but this could be replaced by an image of your choosing. More examples of exactly what can be placed in a scene can be found on A-Frame's site, including a post on their blog.

Launch the scene#

With our AR scene created and a page to house it, let's allow the user to open it from the app's store page. Inside the store page code, we'll add a floating action button (FAB) that when clicked, open's our AR Launcher page.

<!-- company-store.page.html -->
<ion-fab horizontal="end" vertical="bottom" slot="fixed" (click)="openAR()">  <ion-fab-button color="primary">    <ion-icon name="scan"></ion-icon>  </ion-fab-button></ion-fab>

With the FAB in place, we'll build out our function to open the modal:

// company-store.page.ts
async openAR() {  const modal: HTMLIonModalElement = await this.modalController.create({    component: ARLauncherPage,    swipeToClose: true,    presentingElement: this.routerOutlet.nativeEl  });
  return await modal.present();}

With all these pieces in place, we now have an AR experience for our users!

Give it a try!#

First, lets pin up a print-off your marker to your wall! Then, we'll open the page in our app to see what our post looks like on our wall. All said an done, you'll have your very own AR poster "try on"!

Example#

Explore the Ionic Multi-experience Demo for an example AR experience.