Adding Augmented Reality to Oracle JET Mobile using Wikitude SDK

This blog is designed to help you to build your first Augmented Reality mobile app using Oracle JET and Wikitude SDK’s cordova plugin

Using Wikitude cordova plugin, we can embed augmented reality view into the JET hybrid mobile app to develop fully featured augmented reality apps including image recognition and tracking.

In this blog, I will incorporate image recognition sample provided by Wikitude into our JET mobile application to showcase image tracking AR feature. Using this application, we will be able to recognize a image from a collection of images and show an overlay image.

Image recognition

Project Setup
Yeoman generator for Oracle JET lets you quickly set up a project for use as a Web application or mobile-hybrid application for Android and iOS. Use following command to generate hybrid application for Android:

yo oraclejet:hybrid ARdemo --template=navbar --platforms=android

The navbar template based native hybrid application code will be placed in “ARdemo” folder. For more scaffolding options, refer here

Add Wikitude Cordova Plugin

Once above command is successful, this signifies that your app is ready. Change to your new app directory app, go to hybrid folder and add Wikitude cordova plugin:

Download the Wikitude cordova plugin, and register for the activation of Wikitude SDK (trial license)

Extract the .zip file and add cordova plugin:

cordova plugin add your_path:\wikitude-cordova-plugin-7.0.0–3.5.2

Setup Configuration

Download your license key from Wikitude license page

Wikitude license page

Make sure they correct key (this._sdkKey) is set within the platforms/android/platform_www/plugins/com.wikitude.phonegap.WikitudePlugin/www/WikitudePlugin.js file when building Android. Refer this page for more details

Update Key value

Update uses-sdk android:minSdkVersion to 19 in hybrid\platforms\android\AndroidManifest.xml , as declared in Wikitude library

AndroidManifest.xml in wikitude library

Next, download the wikitude sample , and copy

i) 01_ImageRecognition_1_ImageOnTarget sample in src\wikitude directory ii) copy ade.js from samples folder and paste in src\wikitude folder

Folder heirarchy

Implementation Steps

We will be adding our code in appcontroller.js file, below are the implementation steps

i) Create an instance of the Wikitude Plugin

ii) After the Plugin is created, the first thing to do is to check if your device is capable of running the augmented reality experience

iii) For this application , we require image recognition only experience, so add self.requiredFeatures = [“image_tracking”]

iv) In the success callback, we then loaded the augmented reality experience.

We will be invoking AR functionality on click of button in dashboard.js, as shown below

Build and Run the application on Android device
In your command prompt, please change directory to project folder

Build the application using following command:
grunt build — platform=android

Once build is success, then run the application using following command:
grunt serve — platform=android — disableLiveReload=true

Demo Output:

To test this demo, please download the image set provided here. Scan the target image

Oracle JET Image Recognition app built using Wikitude Cordova Plugin

The views expressed in this post are my own and do not necessarily reflect the views of Oracle.