Developer Guide

Tutorial: Use Tracking on Cordova with CraftAR Augmented Reality

icon Date Developer Guide

icon Date Dec 22, 2020

icon author Catchoom Team

icon folder , , ,

This section applies to the following Plugins:

  • Augmented Reality Cordova Plugin v2.4+
  • Cloud Image Recognition Cordova Plugin v2.4+
  • On-device Image Recognition Cordova Plugin v2.4+
  • CraftAR Pro Cordova Plugin v2.4+

Are you still using an older version? Previous versions of the SDKs will not receive updates anymore. If you need help transitioning to the newer versions, you can get support through our support channel.

The CraftAR Augmented Reality Plugin for Cordova and Craftar Pro Plugin for Cordova allow you to create AR apps that render the experiences created with the CraftAR service. If you’re not yet familiar with the general steps, read How to add augmented reality into your app.

An Augmented Reality app using the Cordova Plugins can be implemented in two steps. First, you need to setup a view with the camera capture and then you can run image recognition and parse the results for each item that is recognized.

If you want to see an example that combines Cloud Image Recognition with tracking (see Tutorial: Use Cloud Image Recognition on Cordova), take a look at the examples we provide with the SDK.

Set up the SDK in your project

Once you have set up the CraftAR Cordova Plugin into your Cordova project, it’s time to implement the views for the experience.

1. Start the camera capture in a new view

First of all, make sure the cordova.js script is included in your index.html start page.

[/crayon]
After that, We need to start a new view. This view will allow the Plugin to open the camera in the background and display our UI as a transparent overlay.

2. Start the video capture

To be able to access the Plugin JS interface, the capture page needs to import the cordova.js script. Then you can listen for the deviceReady event and use the SDK to start the camera capture.

[/crayon]
Once the device is ready, you will have to start capture using CraftAR SDK:

3. Rendering Augmented Reality

In most cases, you’ll use the Cloud Image Recognition service from CraftAR or On Device Image Recognition to recognize the object and obtain the necessary AR item in return.

Related Posts in Developer Guide