plugins
plugins copied to clipboard
[@nativescript/camera] cannot read property 'camera' of undefined
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>
Sounds like it's failing at this line.
Is it possible that this file isn't being included in your Android build?
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"
}
}
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 ...