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:
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:
- Does it do what I want? Check
- Is there a good documentation? Check
- 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:
Then grab your license there:
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.
First, download and unzip the sample files:
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:
Some of them require the following file:
The world that we use contains:
- The planets images
- 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!
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:
Add the following Privacy requests, first the camera:
Then the location (I added the three permissions just in case):
Now everything is finally ready!
Let’s get this out of the way, Wikitude is expensive.
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!