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 :smile:

[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.