Dec 22, 2020
Catchoom Team
Cordova, cordova cloud image recognition, cordova Image Recognition
This section applies to the following Plugins:
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.
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.
First of all, make sure the cordova.js script is included in your index.html start page.
1 |
[crayon-607b4a512a0b6930829358 inline="true" ]<script src="cordova.js"></script> |
[/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.
1 2 3 |
document.addEventListener("deviceready", function () { CraftARSDK.startView(null, null, {"loadUrl" : "your_search_view.html"}); }, false); |
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.
1 |
[crayon-607b4a512a0bd448219756 inline="true" ]<script src="cordova.js"></script> |
[/crayon]
Once the device is ready, you will have to start the capture using CraftAR SDK:
1 2 3 4 5 6 7 8 |
document.addEventListener("deviceready", function () { startCraftAR(); }, false); function startCraftAR() { CraftARSDK.onStartCapture(didStartCapture); CraftARSDK.startCapture(); } |
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.
1 2 3 4 5 6 7 8 9 |
function didStartCapture() { CraftARCloudRecognition.setCollectionWithToken(“your_collection_token", function () { CraftARSDK.searchController = CraftARCloudRecognition.searchController; CraftARCloudRecognition.onSearchResults(getResults); CraftARCloudRecognition.onSearchError(onError); }, function (error) { alert("Error:" + error.errorMessage); }); } |
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
1 2 3 |
function singleShotSearch() { CraftARSDK.singleShotSearch(); } |
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.
1 2 3 4 5 6 7 8 9 10 11 |
function getResults(results) { if (results.length > 0) { // Each result has one item var item = results[0].item; } else { alert("Nothing found!"); } // Unfreeze the video capture that the single shot search freezes by restarting the capture CraftARSDK.camera.restartCapture(); } |
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:
1 2 3 |
function finderModeSearch() { CraftARSDK.startFinder(); } |
and then the implementation of didGetSearchResults should process the results.
1 2 3 4 5 6 7 8 9 |
function getResults(results) { if (results.length > 0) { CraftARSDK.stopFinder(); // Each result has one item var item = results[0].item; } else { alert("Nothing found!"); } } |