Skip to content

Latest commit

 

History

History
93 lines (72 loc) · 3.45 KB

tracking-images.md

File metadata and controls

93 lines (72 loc) · 3.45 KB
Raw

Image Tracking

🔙

Demo app

Check out the Pokémon demo app.

Check Image tracking support

To check whether or not the device is capable of tracking images, use the static AR.isImageTrackingSupported() function.

Note that on iOS this feature requires a "TrueDepth" camera (iPhone X and newer).

import { AR } from "nativescript-ar";

export class HelloWorldModel extends Observable {
  constructor() {
    super();
    console.log(`Image tracking supported? ${AR.isImageTrackingSupported()}`);
  }
}

Declaring the <AR> view

I'm going to assume you're working on a vanilla NativeScript app with XML, but if you're using Angular or Vue you'll have to register the AR element as explained in the respective docs.

So for XML, add the AR namespace to the view, then add use it like any other UI component:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:AR="nativescript-ar">
  <GridLayout rows="*" columns="*">
    <AR:AR
        trackingMode="IMAGE"
        trackingImagesBundle="PokemonResources"
        trackingImageDetected="{{ trackingImageDetected }}"/>
  </GridLayout>
</Page>

Open its component and, for instance, add:

import { ARTrackingImageDetectedEventData } from "nativescript-ar";
import { isIOS } from "tns-core-modules/platform";

export class HelloWorldModel extends Observable {

  public trackingImageDetected(args: ARTrackingImageDetectedEventData): void {
    console.log("Tracked image detected: " + args.imageName);

    // match the name the plugin returned to what you expect (the names in your images bundle)
    if (args.imageName === "my-image-name") {
      // for instancce, "replace" the image by a video
      const loop = true;
      args.imageTrackingActions.playVideo("http://techslides.com/demos/samples/sample.mov", loop);

    } else if (args.imageName === "my-other-image") {
      // etc
    }
  }
}

The trackingImageDetected event

See the example above. The properties of ARTrackingImageDetectedEventData are:

property description
object An AR object for you to call any API function upon.
position An ARPosition object with x, y, and z properties.
size An ARSize object, consisting of width and height properties.
imageName The name of the detected image.
imageTrackingActions See below for details.

The imageTrackingActions object is of type ARImageTrackingActions and has these functions:

function description
addModel See api/addModel
addBox See api/addBox
addImage See api/addImage
addUIView See api/addUIView
addNode See api/addNode
playVideo Overlays the image with a video. Pass in a URL to a video, and optionally a boolean telling the video to loop: imageTrackingActions.playVideo("https://mysite.com/myvideo.mov", true)
stopVideoLoop Stops the video

Continue reading