Dec 22, 2020
Catchoom Team
Cordova, cordova augmented reality, cordova pro, cordova tracking
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.
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.
Once you have set up the CraftAR Cordova Plugin into your Cordova project, it’s time to implement the views for the experience.
First of all, make sure the cordova.js script is included in your index.html start page.
|
1 |
[crayon-616a4ae98096a249676123 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_ar_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-616a4ae980973660959081 inline="true" ]<script src="cordova.js"></script> |
[/crayon]
Once the device is ready, you will have to start 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(); } |
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.
|
1 2 3 4 5 6 7 |
function startAugmentedReality(item) { CraftARTracking.addItem(item, function(){ CraftARTracking.startTracking(); },function(err) { alert("Error adding AR item: " + err.errorMessage); }); } |
