NativeScript Augmented Reality

Tip: give this article by TJ a read if you want a nice introduction to AR in NativeScript. It uses an older version of the plugin, but it's still quite relevant.

Supported platforms

• iPhone SE, 6s, iPad Pro, iPad 2017, or newer support ARKit. Running iOS 11 or newer.
• Many Android devices support ARCore nowadays. Obviously the faster the device, the better the experience.

Installation

From the command prompt go to your app's root folder and execute:

tns plugin add nativescript-ar

Embedding an AR view

• I'm Using NativeScript with Angular
• I'm Using NativeScript with Vue
• I'm Using NativeScript with XML

Types of AR experiences

• World tracking: augment the world around you
• Face tracking: augment a face
• Image tracking: augment 2D images your camera finds

Using the AR API

• AR API

Running the demos

To dive in quickly, install NativeScript if you don't have it yet: npm i -g nativescript, then clone this repo:

git clone https://github.com/EddyVerbruggen/nativescript-ar
cd nativescript-ar/src

In the src folder you'll find a package.json which has the commands to build and run these demos:

Solar System (Vue)

npm run demo.solarsystem.ios 
npm run demo.solarsystem.android 

Pokémon (Angular)

npm run demo.pokemon.ios
npm run demo.pokemon.android

Glasses (Angular)

npm run demo.glasses.ios
npm run demo.glasses.android

TypeScript demo

This is just a kitchen sink demo with a lot of random stuff.

npm run demo.ios
npm run demo.android

JavaScript demo

This is a super simple demo which show how to integrate this plugin with plain JavaScript NativeScript apps.

npm run demo.plainjs.ios
npm run demo.plainjs.android