NativeScript / plugins

@nativescript plugins to help with your developments.
https://docs.nativescript.org/plugins/index.html
Apache License 2.0
190 stars 109 forks source link

[@nativescript/camera] cannot read property 'camera' of undefined #485

Open map7 opened 1 year ago

map7 commented 1 year ago

I'm using @nativescript/camera 5.0.15 in a nativescript + angular app and I'm getting the following error just after taking a picture within my app;

cannot read property 'camera' of undefined

At the top of my service;

import { requestPermissions } from '@nativescript/camera';
import * as camera from "@nativescript/camera";

The method I use to take a picture;

    takePictureTap(args) {
        this.readyImage = "false";
        let that = this;
        requestPermissions().then(
            () => {
                let width = 2560;
                let adjusted_width = layout.toDeviceIndependentPixels(width)
                console.log("Width = " + adjusted_width);

                let height = 1920;
                let adjusted_height = layout.toDeviceIndependentPixels(height)
                console.log("Height = " + adjusted_height);

                camera.takePicture()
                    .then((imageAsset) => {
                        console.log("Taken picture: " + that.imageAssetURL(imageAsset))

                        console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
                        console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
                        console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");

                        //this.saveAndSendPicture(imageAsset); // Doesn't work on OnePlus5 phone
                        this.sendPicture(this.imageAssetURL(imageAsset));
                    }, (error) => {
                        alert({title: "Image",
                               message: "Error taking picture, please try again. CODE: " + error,
                               okButtonText: "OK"});

                        console.log("Error image upload: " + error);
                    });
            },
            () => alert('permissions rejected')
        );
    }

The error happens just after takePicture is called and I take a picture using the emulator.

It was working, but then I've had to upgrade to SDK 31 so I could upload to Google playstore and this means I've had to upgrade a heap of nativescript packages.

I've added the following to my AndroidManifest.xml

    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.asset.management.provider"
        android:exported="false"
        android:grantUriPermissions="true">
      <meta-data
          android:name="android.support.FILE_PROVIDER_PATHS"
          android:resource="@xml/provider_paths" />
    </provider>

And created a provider_paths.xml file

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
  <root-path
    name="root"
    path="." />
  <external-path
    name="external"
    path="."/>
  <external-files-path
    name="external_files"
    path="." />
  <cache-path
    name="cache"
    path="." />
  <external-cache-path
    name="external_cache"
    path="." />
  <files-path
    name="files"
    path="." />
</paths>
facetious commented 1 year ago

Sounds like it's failing at this line.

Is it possible that this file isn't being included in your Android build?

map7 commented 1 year ago

I've got that file in my node_modules directory of my app located here: /node_modules/@nativescript/camera/platforms/android/java/org/nativescript/plugins/camera/Utils.java and I'm loading @nativescript/camera in my package.json.

Here is my package.json;

{
  "nativescript": {
    "id": "com.asset.management",
    "tns-android": {
      "version": "7.0.1"
    },
    "tns-ios": {
      "version": "6.5.3"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@nativescript/background-http": "^6.0.0",
    "@nativescript/camera": "~5.0.0",
    "nativescript-akylas-share-file": "^1.1.4",
    "nativescript-angular": "^8.21.0",
    "nativescript-datetimepicker": "^1.2.3",
    "nativescript-pdf-view": "^2.4.3",
    "nativescript-printer": "^3.0.0",
    "nativescript-theme-core": "~2.0.0",
    "nativescript-ui-listview": "^8.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.7",
    "tns-core-modules": "^6.5.27",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^8.2.14",
    "@nativescript/android": "7.0.1",
    "@ngtools/webpack": "~8.2.0",
    "@types/chai": "~4.1.7",
    "@types/mocha": "~5.2.5",
    "@types/node": "~10.12.18",
    "chai": "~4.1.2",
    "mocha-junit-reporter": "~2.2.0",
    "mocha-multi": "~1.1.7",
    "mochawesome": "~7.1.3",
    "nativescript-dev-appium": "^6.1.3",
    "nativescript-dev-webpack": "~1.5.1",
    "tns-android": "7.0.1",
    "tns-ios": "6.5.6",
    "typescript": "~3.5.3"
  },
  "gitHead": "e9af7b54b243e55ef28e4610c4ef8c83837d86c0",
  "readme": "NativeScript Application",
  "scripts": {
    "e2e": "node ./node_modules/nativescript-dev-appium/check-dev-deps.js &&  tsc -p e2e  &&  mocha --opts ./e2e/config/mocha.opts ",
    "e2e-watch": "tsc -p e2e --watch"
  }
}
uderline commented 1 year ago

I think the question was: is it actually included in the android build ? You may see the different plugins added during build in the console.

It should look like this:

Building project...
Gradle build...
         + setting applicationId
         + applying user-defined configuration from <path to project>/App_Resources/Android/app.gradle
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: <path to project>/node_modules/@nativescript/core/platforms/android/core.aar
         + adding aar plugin dependency: <path to project>/node_modules/@nativescript/core/platforms/android/widgets-release.aar
         + adding aar plugin dependency: <path to project>/node_modules/@nativescript/camera/platforms/android/camera.aar

FYI, it works for me but I have with NS8 + Angular 15 ...