Developer Guide

Tutorial: Use Cloud Image Recognition on Cordova

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.

An Image Recognition app using the Cordova Plugin can be implemented in two steps. First, you need to set up a view with the camera capture and then you can run image recognition and parse the results for each item that is recognized.

Set up the SDK in your project

Once you have set up the CraftAR Cloud Image Recognition Plugin in your project, it’s time to implement the views for the experience.

The following is an example for an app that uses CraftAR’s Cloud Image Recognition.

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.

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.

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

The SDK manages the Single shot and Finder Mode searches with the frames and pictures from the camera.

When video capture is started, the function passed to  onStartCapture will be called. At this moment, it is also worth setting the token of the collection that you want to search through when performing Cloud Image Recognition. Once the collection is ready, you will be able to set callbacks to handle the search results and errors. On the other hand, you will have to set the search controller, which is in charge of performing searches using images coming from the camera (either from the Finder Mode or the Single shot search). Set this to the  CraftARCloudRecognition.searchController to use the Cloud Image recognition.

3. Implementing the Image Recognition request and parsing the results
Option A. Use Single Shot Mode to take a single picture

You can call  singleShotSearch to perform a search with a single image. This method takes a photo with the camera, sends query to CraftAR’s Cloud Image Recognition and leaves the camera capture frozen

When the search is done, the callback set through the  onSearchResults method will be called with the list of results passed. The link will be empty if anything was found.

Option B. Use Finder Mode for continuous scanning

You can call  startFinder to start searching continuously without user intervention. This method sends queries at a controllable rate to CraftAR’s Cloud Image Recognition. For every query, the response triggers the callback set through the  onSearchResults method. You could for instance call the following function once the Collection token has been set:

and then the implementation of  didGetSearchResults should process the results.

Related Posts in Developer Guide