Failed to create AR session

[delanick]

Hey @EddyVerbruggen ,

Finally got some time to try this plugin in my kitchen sink app. At first it crashed a few times as I'm using JS, not TS (I know, I need to switch over at some point) but now I'm getting the page to display, the AR component looks like it's loading but it stays dark with a hand holding a phone (which moves around a bit) and a toast message saying "Failed to create AR session". Have you seen this anywhere? Console doesn't say anything weird or specific and I've used this on two Android devices.

[EddyVerbruggen]

Hi! Did the phone ever prompt for permission to use the camera?

Just remove the app and reinstall. That should show the permission dialog. If not then that’s a bug (which I may have already fixed but not yet released to npm).

[delanick]

@EddyVerbruggen nah, I doubt it's a bug, it's something in my code that isn't working. I reinstalled, added permissions but arLoaded doesn't even execute - so I must be making a mistake, but I don't know where. I put the code in my ar-page.js file, the code-behind for the ar-page.xml file where the AR component is. I do think though that because it's an ES6 piece of code that you created, that JS isn't liking it for some reason. Will keep playing, but may need your help at some point :)

[delanick]

@EddyVerbruggen Ok I've tried a gazillion different combinations and am sure it's a me not understanding TS and ES6 properly issue. Do you have a JS example of this laying around anywhere?

[EddyVerbruggen]

Not really, but I'd be happy to try and find some time to look at yours.

[nickolanack]

Here is something similar to what I have used

function onNavigatingTo(args) {

   var page = args.object;
   var AR = require("nativescript-ar").AR;
   var supported = AR.isSupported();
   if (!supported) {
     // handle not supported
      return;
   }

   var ar = new AR({
      //ar options
   });
   ar.on('arLoaded', function(args) {
      // add AR objects
   });

  ar.on('planeTapped', function(args) {
     // add AR object
  });

   page.getViewById('<some id>').addChild(ar);

}

[delanick]

@EddyVerbruggen Thanks a ton, gonna try your first. Will send mine if this doesn't work :)

@nickolanack - tired your code, didn't work :( Do you have a repo I can check out?

[delanick]

@EddyVerbruggen Yeah so I tried that code, didn't work... So here's my attempt at it. Don't laugh too hard now, this is a tad embarrassing :)

ar-page.js: `const ArViewModel = require("./ar-view-model");

/* ***

• Use the "onNavigatingTo" handler to initialize the page binding context. *****/ function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ArViewModel(); console.log("ar page onNavigatingTo called");

}

exports.onNavigatingTo = onNavigatingTo;

import { AR, ARLoadedEventData, ARNodeInteraction, ARPlaneTappedEventData } from 'nativescript-ar'; //var AR = require('nativescript-ar').AR; //var ar = new AR();

export function arLoaded(args) { console.log("AR loaded"); const ar = args.object; // interact with the 'ar' object here if you like //console.log(ar); } export function planeTapped(args) { console.log("Plane tapped @ x coordinate: " + args.position.x); args.object.addBox({ position: { x: args.position.x, y: args.position.y + 1, z: args.position.z }, scale: 0.15, material: "tnsgranite", mass: 0.0000001, onTap: (interaction) => { console.log("box tapped: " + interaction.node.id + " at " + interaction.touchPosition); // let's rotate the box 5 degrees to the right interaction.node.rotateBy({ x: 0, y: 0, z: -5 }); }, onLongPress: (interaction) => { console.log("box longpressed: " + interaction.node.id + " at " + interaction.touchPosition); // let's rotate the box 5 degrees to the left interaction.node.rotateBy({ x: 0, y: 0, z: 5 }); // and move it a little interaction.node.moveBy({ x: 0, y: 0, z: 0.02 }); } }).then(node => console.log("box added: " + node.id)); }`

ar-page.xml `

`

[nickolanack]

Hi. I put my example into a demo: demo-plainjs and PR'd here... I changed it so that it was loading the AR element from xml like normal

[Felix212]

Hello there. I am also trying to get the plugin running, but i also have "Failed to create AR session" when i am booting up my app. I am using nativescript + angular. I followed the basic instructions. camera.component.html

<GridLayout rows="auto, *" class="page">
  <Label row="0" text="Scan a surface.." class="p-20" horizontalAlignment="center"></Label>
  <AR
    row="1"
    detectPlanes="true"
    showStatistics="true"
    [planeMaterial]="planeMaterial"
    (planeTapped)="planeTapped($event)">
    <!-- you can add layouts here if you like to overlay the AR view (see the demos in this repo) -->
  </AR>
</GridLayout>

camera.component.ts

import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { registerElement } from "nativescript-angular/element-registry";
import { AR, ARMaterial,ARPlaneTappedEventData } from "nativescript-ar";
import { Color } from 'tns-core-modules/color/color';
registerElement("AR", () => require("nativescript-ar").AR);

@Component({
  selector: 'ns-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.css'],
  moduleId: module.id
})
export class CameraComponent {
    public planeMaterial = <ARMaterial>{
      diffuse: new Color("white"),
      transparency: 0.2
    };

    constructor() {
      console.log("AR supported? " + AR.isSupported());
    }

    planeTapped(args: ARPlaneTappedEventData): void {
      console.log(`Plane tapped at ${args.position.x} y ${args.position.y} z ${args.position.z}`);
      const ar: AR = args.object;
      // interact with the 'ar' object here if you like
    }
  }

[EddyVerbruggen]

@Felix212 That doesn't look wrong, but did you try a few of the demos first? Instructions @ https://github.com/EddyVerbruggen/nativescript-ar#running-the-demos

[Felix212]

I updated my plugin from 1.0.1 to 1.0.2. Everything works now.

[delanick]

Hi. I put my example into a demo: demo-plainjs and PR'd here... I changed it so that it was loading the AR element from xml like normal

@nickolanack You didn't link to your repo, please provide link :)

[nickolanack]

its part of this repo now

git clone https://github.com/EddyVerbruggen/nativescript-ar
cd nativescript-ar/src
npm run demo.plainjs.ios
npm run demo.plainjs.android

[delanick]

@nickolanack cool, IU got it to load the AR and use the camera, but it's not detecting planes, at all. Any advice?

[nickolanack]

yes: make sure your xml contains this: https://github.com/EddyVerbruggen/nativescript-ar/blob/6834cf25095f218fa98e57ae38b83c7f2b538cd7/demo-plainjs/app/main-page.xml#L31