nativescript-wikitude-sdk

NativeScript Wikitude SDK

Provides NativeScript 8+ access to Wikitude Augmented Reality (9.1.0 on Android and 9.0.0 on iOS).

Prerequisites / Requirements

Permissions

Before you can use this plugin you should ensure your application has permissions for Camera and Location, for an easy way to do this on both android and ios, you can make use of this plugin @spartadigital/nativescript-permissions

Running the Demo

Basic Vue compatible dmeo is available.

If you want to check something a bit more advanced from wikitude examples and place them in demo/app/wikitude... Then update the URL Reference in either the items.component.ts for Nativescript-angular or the main-view-model.ts in Regular Nativescript.

Then go and grab a Trial License from Wikitude's Website and place it in demo/app/main-view-model.ts on line 13

Installation

to install for your project you can use:

tns plugin add nativescript-wikitude-sdk

for Nativescript Angular Projects you will need to import the Element in your app.component.ts

import { Wikitude } from "nativescript-wikitude-sdk";
// ...snip....
registerElement("Wikitude", () => Wikitude);

and then in your ar.component.html :

<Wikitude
  [url]="WikitudeURL"
  (WorldLoaded)="onWorldLoaded($event)"
  (JSONReceived)="onJSON($event)"
>
</Wikitude>

and in your ar.component.ts:

    import { Wikitude } from 'nativescript-wikitude-sdk';

    // ...snip...

    WikitudeInstance: Wikitude;
    WikitudeURL: string = "~/wikitude_world/index.html";

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
    }

    onJSON($event) {
        console.log(JSON.stringify($event.data));
    }

    // ...snip...

and somewhere in your application you will need to define the wikitude license, you can get one from wikitude (free trial license)

    (global as any).wikitudeLicense: string = "YOUR_LICENSE_KEY_HERE"

And Voila! you have Wikitude AR working in your Nativescript Application!

Usage

using your own location provider

by default this plugin has a basic Location Provider, if this does not suit your purpose, you can disable it once it is fully loaded, with the following code :

    onWorldLoaded($event) {
        this.WikitudeInstance = $event.owner; // or you can use Angular's ViewChild
        this.WikitudeInstance.disableLocationProvider();
    }

Once Disabled, Geo-location based AR will not work unless you provide your own location, this can be achieved with the following

this.WikitudeInstance.setLocation({ latitude, longitude, altitude, accuracy });

this is useful if you want a single location state.

once you have disabled it you can re-enable it with the following :

this.WikitudeInstance.enableLocationProvider();

TODO

• Update to Wikitude 9.5 for Android and iOS
• Plugins API Exposure. Wikitude allows Plugins, built in CPP to be used, and linked using their Plugin's API
• Detecting if Device needs Calibration: Currently being held back by Android causing a crash when i try to listen to this event.
• Camera Events: Could be useful for the Developer to check for the Camera Open, Closed, and any Crashes.
• a better way to set the Wikitude LicenseKey and Required Features.

API

Properties

Property	Default value	Description
url	""	the URL of the Wikitude "ARWorld"
features	`Features.ImageTracking	Features.InstantTracking

Functions

Function	Arguments	Description
setLocation()	{ latitude: number, longitude: number, altitude: number, accuracy: number }	sets the location in the ARWorld
hasFeature()	feature : number	checks if your device can support said features (or if your license supports it)
loadUrl()	url: string	loads the URL in the Wikitude WebView
reload()		reloads the current Wikitude WebView
clearCache()		clears the wikitude Cache
toggleFlash()		Toggles the Devices Flash-light
switchCamera()		switches the Camera that wikitude uses
captureScreen()	captureWebViewContent: boolean	captures the current view, can also capture the webview content
disableLocationProvider()		disables the location Provider (you will need to provide your own for GEO/POI's to work)
enableLocationProvider()		enables the location Provider

Events

Event	Description	Type
WorldLoadSuccess	Fires when the ARWorld Loads Successfully	WorldLoadSuccessEventData
WorldLoadFail	Fires if an Error Occurs while loading the AR World	WorldLoadFailedEventData
JSONReceived	Fires when the ARWorld sends a JSON Object	JSONReceivedEventData
ScreenCaptureSuccess	fires when the screen is captured	ScreenCaptureSuccessEventData
ScreenCaptureFail	fires when wikitude fails to capture the screen	ScreenCaptureFailedEventData

all can be imported from the index.d.ts.

Credits

There used to be a fork of @breningham/nativescript-wikitude who originally started the plugin. It has been unfortunately inactive, so another fork was created. Plugin has been since then revamped several times, and this new version came up with all the possible updates for NativeScript 7 compatibility.

License

Wikitude is (c) Wikitude GmbH Before using see their End-User License Agreement

Apache License Version 2.0, January 2004