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.
|
1
|
[crayon-618c1194acb0f343443544 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);
|
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.
|
1
|
[crayon-618c1194acb14978552526 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();
}
|
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.
|
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);
});
}
|