Tutorial: Using on-device Augmented Reality on iOS with CraftAR

Dec 22, 2020

Catchoom Team

Augmented Reality, iOS, SDK, Tracking, XCode

This section applies only to the Augmented Reality SDK v4 +.

The CraftAR iOS Augmented Reality SDK allows 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.

If you want to see an example that combines on-device collections with Tracking, take a look at the open-source samples available in our Github repository: https://github.com/Catchoom/craftar-example-ios (on-device AR example).

In this article we explain how to create Augmented Reality apps using on-device collections. This allows to embed the AR items and their contents into the app and start Tracking without the need to load the items and the contents from the network.

An on-device Augmented Reality app using the iOS native SDK can be implemented following three steps.

Add the on-device collection to the device;
set up the SDK in your UIVIewController;
trigger Augmented Reality experience.

This tutorial covers the second and third steps. For the first step, have a look at the tutorial on Managing on-device collections for the iOS SDKs

Setting up the SDK in your UIViewController

Once you have set up the CraftARSDK into your Xcode project, it’s time to implement the UIViewController that will show the experience.

1. Adopt CraftARSDKProtocol in your UIViewController

Adopt the <code>CraftARSDKProtocol</code> and add <code>CraftARTracking</code> interface to your UIViewController.

#import "MyViewController.h"

@interface MyViewController () {
  // CraftAR SDK reference
  CraftARSDK *_sdk;
  CraftARTracking *_tracking;
}
@end

#import "MyViewController.h"

@interface MyViewController () {

// CraftAR SDK reference

CraftARSDK *_sdk;

CraftARTracking *_tracking;

}

@end

2. Get the instance of the CraftARSDK

Once the view is loaded, you can get an instance of the CraftARSDK.

- (void)viewDidLoad {
  [super viewDidLoad];

  // setup the CraftARSDK
  _sdk = [CraftARSDK sharedCraftARSDK];

  // Implement the CraftARSDKProtocol to know when the previewView is ready
  [_sdk setDelegate:self];
}

- (void)viewDidLoad {

[super viewDidLoad];

// setup the CraftARSDK

_sdk = [CraftARSDK sharedCraftARSDK];

// Implement the CraftARSDKProtocol to know when the previewView is ready

[_sdk setDelegate:self];

}

3. Start the VideoCapture module

Once the view is loaded and will appear, you can initialize the VideoCapture module of the CraftARSDK with a specific UIView.

- (void) viewWillAppear:(BOOL) animated {
  [super viewWillAppear:animated];

  // Start Video Preview for search and tracking
  [_sdk startCaptureWithView: self.videoPreviewView];
}

- (void) viewWillAppear:(BOOL) animated {

[super viewWillAppear:animated];

// Start Video Preview for search and tracking

[_sdk startCaptureWithView: self.videoPreviewView];

}

Note: the ‘videoPreviewView’ you provide will be loaded with a rendering view and no other subviews will be displayed for it. If you need to display other UIViews as part of MyViewController, add them to self.view of MyViewController (i.e. at the same level as ‘videoPreviewView’).

4. Get the instance of Tracking

Once the VideoCapture module is ready, it performs a callback to didStartCapture. Here you can setup the Tracking interface.

- (void) didStartCapture {
  // Get the Tracking instance
  _tracking = [CraftARTracking sharedTracking];;
}

- (void) didStartCapture {

// Get the Tracking instance

_tracking = [CraftARTracking sharedTracking];;

}

Triggering Augmented Reality experience

Once your ViewController has the necessary protocols and instance of Tracking, it’s time to add code to start using the iOS Augmented Reality SDK for a mobile app.

In this case, we will load the items from an on-device collection we have previously added to the device. The following snippet shows how to traverse a collection’s items and add them for Tracking.

- (void) loadAndRenderARExperiences:(CraftAROnDeviceCollection *)collection {
  // Add the items from a background queue to avoid blocking the UI
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

    // listItems returns an array with the UUIDs of all the items in the collection
    [[mARCollection listItems] enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
      NSError* error;
      // Obtain each AR item from the collection
      CraftARItem* arItem = (CraftARItemAR*)[mARCollection getItem:(NSString*)obj andError:&amp;error];

      // Add the item for Tracking
      if (arItem != nil &amp;&amp; [arItem isKindOfClass:CraftARItemAR.class]) {
        [mTracking addARItem: (CraftARItemAR*)arItem];
      }
    }];
  });

  // Start Tracking
  [mTracking startTracking];
}

- (void) loadAndRenderARExperiences:(CraftAROnDeviceCollection *)collection {

// Add the items from a background queue to avoid blocking the UI

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

// listItems returns an array with the UUIDs of all the items in the collection

[[mARCollection listItems] enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

NSError* error;

// Obtain each AR item from the collection

CraftARItem* arItem = (CraftARItemAR*)[mARCollection getItem:(NSString*)obj andError:&error];

// Add the item for Tracking

if (arItem != nil && [arItem isKindOfClass:CraftARItemAR.class]) {

[mTracking addARItem: (CraftARItemAR*)arItem];

}

}];

});

// Start Tracking

[mTracking startTracking];

}

Developer Guide