Augmented Reality in Ionic 3 using Wikitude

Augmented Reality will be a turning point in the coming years. Trends are making economy and new trends means new opportunities. Nobody knew a decade ago that millions of people would use a phone to get an Uber or swipe right to meet someone.
There are even rumors about the iPhone 8 Augmented Reality features.
Today’s tuts is an introduction to Wikitude, an Augmented Reality plugin that we will use with Ionic.

Our goal is to arrive there:

Ionic 3 mobile app development augmented reality wikitude planets

Wikitude

The last time I had this feeling about a library was seven years ago when I used my first AR (Augmented Reality) plugin for a university project.

Wikitude is a very sexy technology. They have around 40 great demonstrations backed up by a well designed documentation: they know how to attract people.

My thought process when looking for a plugin is as follow:

  1. Does it do what I want? Check
  2. Is there a good documentation? Check
  3. Is it free? Not Really …

For the modest sum of 2 739$/year you can use it. It’s a liiiiittle bit expensive, but it’s impressive.

Another free AR plugin is used in my book there:

The first thing that comes to my mind would be to code a demonstration and find some investors for the financial side (3k dollars for a license is hard to tank).

However, free trial licenses are available!
Create an account here:

http://www.wikitude.com/developer/sign-in

Then grab your license there:

http://www.wikitude.com/developer/licenses

Ok, less talking and more coding!

Getting our hands dirty

The plugin installation part is available in my previous tutorial.

So we pick up where we left off, the home.ts file:

Some new properties were added there.
The arExperienceUrl is very important. It’s a path to the world that will be used (more about that later).
The startupConfiguration is just a simple config option.

Finally, in the constructor we need to add our trial key.

The last code modification:

The onDeviceSupported method changed.
If we keep the old declaration, we end up with the following error:

Cannot read property ‘wikitudePlugin’ of null.

In order to keep the this object, now we use a TypeScript Arrow Function.

The loadARchitectWorld method will use the URL of our world, the features to use, the configurations and some callbacks.

The callbacks are very important because they give us information about the application flow and they are very simple:

Finally, if you have an old Android phone like mine, you might encounter some timeout and fix it by adding the following option in the config.xml file:

Ok the coding part is done!
Let’s have a look at the required files from Wikitude.

Architecture

First, download and unzip the sample files:

https://github.com/Wikitude/wikitude-phonegap-samples/archive/master.zip

Ionic 3 Wikitude Augmented Reality moving assets

Create a new experience folder in your application’s src/assets folder.
This experience folder will contain the css, jquery, js, index.html and world folders from the sample folder.
The most interesting part here is the world folder.

There are a lot of worlds to play with:

Ionic 3 Wikitude Augmented Reality worlds

Some of them require the following file:

http://www.wikitude.com/external/doc/documentation/5.0/android/images/target_images_examples.pdf

The world that we use contains:

  • The planets images
  • An index.html file that will load some required JavaScript
  • A js folder with the scripts that will add actions specific to this world

With all of this done, we can launch our application and enjoy the cool Augmented Reality!

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Unless you want your app to work on iOS 10

iOS 10 permissions

The following message will appear and block the app.

This app has crashed because it attempted to access privacy-sensitive data without a usage description.  The app’s Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.

We need to add some information in xCode:

xCode custom iOS

Add the following Privacy requests, first the camera:

iOS camera usage

Then the location (I added the three permissions just in case):

iOS location usage iOS location usage iOS location usage

Now everything is finally ready!

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Let’s get this out of the way, Wikitude is expensive.
However, when we have a look at videos like this one, we understand that Augmented Reality is going to be the next revolution. Thanks to quality plugins like Wikitude, it’s not very hard to create JavaScript applications.
With the arrival of new AR equipped smartphones and tablets, we can expect new usages and most importantly the rise of new million dollars startups very soon.
So stay tuned for more AR tutorials!

2 Comments

  1. Rallado Rallado
    May 28, 2017    

    In these examples just have a lot of sample javascript codes. Would you have some complete code using just a typescript ?

Leave a Reply

Your email address will not be published. Required fields are marked *

5 Shares