AR crashes when trying to scan

[joselevelsup]

So I have been struggling with this for a good couple of days and I still can't get this to work. I can't even tell if my image is being detected. So I just created a new app, add the plugin, and use both example code that is provided in the docs AND my own. Everytime I get to the AR part and I scan the image, it crashes but leaves a message saying fromUrl() is deprecated. Use ImageSource.fromUrl() instead. I need some help figuring this out and willing to provide any other info if necessary. Thank you!

tns-version: 6.2.2
Android version: 9
iOS version: Don't know since I don't have one.

Code: (second TS file was when using class for observables and adding "{{}}" around arLoad in the xml file)

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoad"  xmlns:AR="nativescript-ar">
	<GridLayout rows="auto, *" columns="*" class="p-20">
    <Label text="AR FTW!" class="t-20 text-center" textWrap="true"/>
    <AR:AR
        row="1"
	trackingMode="IMAGE"
	arLoaded="arLoad"
   />
  </GridLayout>
</Page>

import { AR, ARTrackingImageDetectedEventData, ARNodeInteraction } from 'nativescript-ar';
export function pageLoad(): void {
	console.log(AR.isImageTrackingSupported()); //Prints true each time
}

//Most of this is example code
export function arLoad(args: any): void{
	const ar: AR = args.object;
	ar.trackImage({
		image: "https://github.githubassets.com/images/modules/open_graph/github-octocat.png",
		onDetectedImage: (args: ARTrackingImageDetectedEventData) => {
			args.imageTrackingActions.addBox({
				position: {
					x: 1,
					y: 1,
					z: 1
				},
				dimensions: {
					x: 0.25,
					y: 0.25,
					z: 0.25
				},
				chamferRadius: 0.01, // 'rounded corners', this is relative to the 'dimensions'.
				mass: 0.2,
				materials: ["Assets.scnassets/Materials/tnsgranite/tnsgranite-diffuse.png"], // must be in App_Resources
				onTap: (interaction: ARNodeInteraction) => {
					console.log("Box was tapped");
					// move the box a little
					interaction.node.moveBy({
						x: 0,
						y: 0.02,
						z: 0.02
					});
				},
				onLongPress: (interaction: ARNodeInteraction) => console.log("Box was longpressed")
			})
		}
	});
}

class ARWorld extends Observable {
	private ar: AR;

	public arLoad(args: ARLoadedEventData): void{
		this.ar = args.object;

		this.ar.trackImage({
			image: "https://github.githubassets.com/images/modules/open_graph/github-octocat.png",
			onDetectedImage: (args: ARTrackingImageDetectedEventData) => {
				args.imageTrackingActions.addBox({
					position: {
						x: 1,
						y: 1,
						z: 1
					},
					dimensions: {
						x: 0.25,
						y: 0.25,
						z: 0.25
					},
					chamferRadius: 0.01, // 'rounded corners', this is relative to the 'dimensions'.
					mass: 0.2,
					materials: ["Assets.scnassets/Materials/tnsgranite/tnsgranite-diffuse.png"], // must be in App_Resources
					onTap: (interaction: ARNodeInteraction) => {
						console.log("Box was tapped");
						// move the box a little
						interaction.node.moveBy({
							x: 0,
							y: 0.02,
							z: 0.02
						});
					},
					onLongPress: (interaction: ARNodeInteraction) => console.log("Box was longpressed")
				})
			}
		});

	}
}

export function pageLoad(args: any): void {
	console.log(AR.isImageTrackingSupported());
	const page = args.object;
	page.bindingContext = new ARWorld();
}

[nickolanack]

that Assets.scnassets/Materials/tnsgranite/tnsgranite-diffuse.png kind of looks like a IOS specific path
did you recreate that path inside /App_Resources/Android/src/main/assets/

[nickolanack]

also I think you want to define your material like

[{diffuse:"Assets.scnassets/Materials/tnsgranite/tnsgranite-diffuse.png"}]

or

 [{diffuse:"tnsgranite-diffuse.png"}]

depending on where that file actually is

[nickolanack]

I also want to mention that not all images are good tracking images. you can run the arcoreimg tool (included in the sceneform sdk repo https://github.com/google-ar/arcore-android-sdk/tree/master/tools/arcoreimg) and test the images you want to track

./arcoreimg eval-img --input_image_path ~/somedownloadpath/github-octocat.png 
#>> Failed to get enough keypoints from target image.

Crop all the whitespace out of that image...

./arcoreimg eval-img --input_image_path ~/somedownloadpath/github-octocat-cropped.png 
#>> 90

[joselevelsup]

Thanks @nickolanack I'll take a look at this when I can. Also about the materials, I actually forgot to adjust that and use like a random one that I do not need to provide (e.g. a local material from my file).

[joselevelsup]

I was just using the octocat as a test image. I'll try other images out...again when I can 😄

[joselevelsup]

So I changed up the material and even tried scanning like 3 different images but to no success. All crashed when scanning the image with the same log fromUrl() is deprecated. Use ImageSource.fromUrl() instead.