Using Wikitude’s Image Recognition in an Ionic application

First of all I’d like to thank the Wikitude company for the license key they provided to me. I’ll soon update the previous demo gifs to remove the trial watermarks!

In this tutorial we will use Wikitude’s image recognition feature to display a new image in our Ionic AR application.
It’s been a while since the last Wikitude tutorial so don’t hesitate to start from the beginning (here and there) if you didn’t follow the first tutorials.

Augmented Reality’s image recognition started with a very simple marker:

Ionic Wikitude image recognition marker

Nowadays we can use more complex images like the one we are going to use in this tutorial:

Ionic Wikitude image recognition wcdonald marker

Wikitude Target Manager

Wikitude’s AR image recognition requires a target collection (.wtc file).

This file can be created using Wikitude’s target manager.

All we need is a new project:

Ionic Wikitude image recognition targetmanager add project

Uploading the image:
Ionic Wikitude image recognition targetmanager upload imagesAnd downloading the wtc file:

Ionic Wikitude image recognition targetmanager download wtc

More images can be present in a target collection, for simplicity will only use one.

Ionic Setup

Our goal for the Ionic assets folder is to achieve the following architecture:

Ionic Wikitude image recognition architectureThe images folder contains the images that will appear in our AR world. Wikitude’s image recognition only handles JPG and non transparent PNG files.
Unlike the previous Wikitude tutorials, we are going to work with TypeScript files.

Wikitude’s philosophy is all about placing the AR world’s files in the assets folder. This is great, however, Ionic will only directly copy those files without modifying them.

A new script named will be created to do the job:

All it does is calling the TypeScript compiler to transform the files to JavaScript.

This call will be done before Cordova runs the application. The config.xml file needs one new line:

A new Hook will automatically launch the script before running the application.

Wikitude AR World

We can now move on to the wc-image-recognition.ts file:

This is where our AR world starts. This file will create a new World instance and call its init method which starts as follow:

A new TargetCollectionResource object is created by using the wtc file we generated using Wikitude’s target manager.
When the camera will display the video stream, an ImageTracker will look for images present in this target collection.
The ImageResource is then created by using one JPG image, this image will be displayed in our world if the tracker finds a target.

Here are the last lines of our file:

The ImageDrawable helps us dictate how our image will be displayed relatively to the target. In our case we move it a bit and rotate it on the X axis, so it will be perpendicular to the target.

The ImageTrackable is finally created by associating the imageTracker with the drawable.

And Voila!
The image is displayed when the target is detected:

Ionic Wikitude image recognition result

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


Wikitude’s Image Recognition is quite simple, we only need 30 lines of code. Before diving into it, a target collection is required.
At the moment Wikitude can only handle non transparent images. This tutorial is the first one to use TypeScript instead of Javascript by compiling the scripts before Cordova’s run, so adapt it to your own needs.
We didn’t make many manipulations, however, the ImageDrawable Class offers more flexibility (z-index, opacity, etc.), don’t hesitate to read the official documentation, it’s full of content.


  1. Malek Malek
    October 24, 2017    

    Hi ,
    I don’t understand how i can build this application
    i did with success build of “Augmented Reality in Ionic 3 using Wikitude”
    could you please explain to me.
    Thank you.

    • Matthieu Drula Matthieu Drula
      October 24, 2017    

      Where are you stuck?

  2. roman roman
    October 30, 2017    

    hi, thanks for your tutorial!
    i followed it and have this error:
    Error: Hook failed with error code 3221225477: D:\

    any ideas?

    • Matthieu Drula Matthieu Drula
      October 30, 2017    

      Seems like it’s trying to get the script at D:\
      wikitude\ but it’s not there.

Leave a Reply

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