NativeScript / nativescript-camera

NativeScript plugin to empower using device camera.
Apache License 2.0
93 stars 47 forks source link

Upgrade to @nativescript/core 7 #248

Open limux82 opened 4 years ago

limux82 commented 4 years ago

Trying with @nativescript/core 7 (7.0.0-rc.57), version of this plugin 4.5.0 I see this error in compilation due to changes in namespace in @nativescript/core

ERROR in ../node_modules/nativescript-camera/camera.js Module not found: Error: Can't resolve 'tns-core-modules/image-asset/image-asset' in '/node_modules/nativescript-camera' @ ../node_modules/nativescript-camera/camera.js 4:23-74 @ ./app/core/services/camera.service.ts @ ./app/shared/components/navigation-menu/navigation-menu.component.ts @ ./app/shared/shared.module.ts @ ./app/app.module.ts @ ./main.ts

ERROR in ../node_modules/nativescript-camera/camera.js Module not found: Error: Can't resolve 'tns-core-modules/trace/trace' in '/node_modules/nativescript-camera' @ ../node_modules/nativescript-camera/camera.js 5:12-51 @ ./app/core/services/camera.service.ts @ ./app/shared/components/navigation-menu/navigation-menu.component.ts @ ./app/shared/shared.module.ts @ ./app/app.module.ts @ ./main.ts

martijnvanschie commented 4 years ago

After some digging i found that you need to use another package.

Marketplace NPM

I used the command npm i --save @nativescript/camera to get the right package and after some small refactoring it now works again.

Changed import * as camera from "nativescript-camera";

To import { isAvailable, requestCameraPermissions, takePicture } from '@nativescript/camera';

And updated some method calls in the code.

It's a bit unclear even from this page but it seams like there are a few different versions of this plugin around and you need to get the right one.

limux82 commented 4 years ago

Thanks I found it

oneWaveAdrian commented 4 years ago

@martijnvanschie How did you use the function call? My app won't work anymore even with the @nativescript/camera package after upgrading.

I get this error message back when firing the takePicture() method JS: error: Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.XmlResourceParser android.content.pm.ProviderInfo.loadXmlMetaData(android.content.pm.PackageManager, java.lang.String)' on a null object reference

This is the function I'm using up until now:

[...]
import * as camera from "@nativescript/camera";
[...]
camera
        .requestPermissions()
        .then(() => {
          camera
            .takePicture({
              keepAspectRatio: true,
              saveToGallery: false,
              height: 140,
            })
            .then((imageAsset) => {
              this.imgData.pictureFromCamera = imageAsset;
              ImageSource.fromAsset(imageAsset).then((source) => {
                this.imgData.base64image = source.toBase64String(
                  "jpeg",
                  80
                );
              });
            })
            .catch((e) => {
              console.log("error:", e);
            });
        })
        .catch((e) => {
[...]

Apparently the error is thrown in line 47 of camera.android.js

tempPictureUri = FileProviderPackageName.FileProvider.getUriForFile(core_1.Application.android.context, core_1.Application.android.nativeApp.getPackageName() + ".provider", nativeFile);
martijnvanschie commented 4 years ago

Have not seen that issue. I do import the camera different and perform the premissions and actual capture seperate.

Import

import { isAvailable, requestCameraPermissions, takePicture } from '@nativescript/camera';

Permissions

  ngOnInit(): void {
    if (isAvailable()) {
      requestCameraPermissions()
        .then(
          fulfilled => {
            console.log('requestCameraPermissions fulfilled.');
          },
          rejected => {
            this.showWarningMessage('No camera permissions set.');
          }
        )
    } else {
      this.showWarningMessage('No camera detected of available.');
    }
  }

Capture

  capture(): void {
    const image = this.faceImage.nativeElement as Image;
    var options = { width: 300, height: 300, keepAspectRatio: true, saveToGallery: false };

    takePicture(options)
      .then(imageAsset => {
        image.src = imageAsset;
        this.capturedImage = imageAsset;
        this.isCaptured = true;
      }).catch(function (err) {
        console.log("Error -> " + err.message);
      });
  }

Hope this helps a bit.

oneWaveAdrian commented 4 years ago

Well except for the altered import statement this is not new code, it worked before untouched. So it has to correlate to NS7.. thanks @martijnvanschie I'll fiddle round with it a bit more, hopefully will find a solution to this...

oneWaveAdrian commented 4 years ago

Nobody knows why this happens? This seems to be a problem that happened in prior versions?

AlexBuitrago commented 3 years ago

Must follow these instructions to use the camera:

@nativescript/camera