danielsogl / awesome-cordova-plugins

Native features for mobile apps built with Cordova/PhoneGap and open web technologies. Complete with TypeScript support.
https://danielsogl.gitbook.io/awesome-cordova-plugins/
Other
2.41k stars 2.42k forks source link

Camera does not appear when using Capacitor and Android API 30 #3707

Closed lydongray closed 3 years ago

lydongray commented 3 years ago

I'm submitting a bug report [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:

I'm not sure exactly where to post this as I can't determine the source of the issue so I'll drop a line here and see if I get a bite. When using Capacitor and calling @ionic-native/camera/ngx getPicture(), the devices asked for permission and when pressing Accept, the camera does not appear. You don't even get an error. Nothing happens. I have tested this on API 28, 29 and 30 and the problem seems to only exist on API 30.

Expected behavior: The camera should appear so a photo can be taken.

Steps to reproduce:

init project (there seems to be an issue with adding Capacitor at this stage so I add this manually later) $ ionic start test-camera-cap blank --type=angular $ cd test-camera-cap

install dependencies $ npm install cordova-plugin-camera @ionic-native/camera @ionic-native/core @capacitor/core @capacitor/cli @capacitor/android

init Capacitor $ npx cap init

ionic.config.json

{
  "name": "test-camera-cap",
  "integrations": {
    "capacitor": {}
  },
  "type": "angular"
}

src/app/home/home.page.html

<ion-content><ion-button (click)="takePhoto()">Take Photo</ion-button></ion-content>

src/app/home/home.page.ts

import { Component } from '@angular/core';
import { Camera } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private camera: Camera) { }
  takePhoto() {
    this.camera.getPicture({}).then((imageData) => { alert('success'); }, (err) => { alert(err); });
  }
}

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { Camera } from '@ionic-native/camera/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [Camera, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

$ ionic build $ ionic cap add android $ npm install jetify $ npx jetifier $ npx cap sync android $ ionic cap copy android

$ ionic cap open android

emulate in API 30 device and test camera functionality

Related code:

Other information:

Adding Capacitor while initializing the project causes errors when trying to add the Android platform. Because of this, I configure Capacitor once the project has been created. I also tested this with Cordova and couldn't replicate the issue. Is this an issue with Capacitor or something else?

Cordova test: $ ionic start test-camera-cordova blank --type=angular don't enable capacitor $ cd test-camera-cordova $ ionic cordova plugin add cordova-plugin-camera $ npm install @ionic-native/camera @ionic-native/core add source code $ ionic build $ ionic cordova platform add android $ ionic cordova emulate android --target Nexus 5 API 30

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   Ionic CLI                     : 6.13.0 (C:\Users\lgray\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.12
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI   : 3.1.2
   @capacitor/core : 3.1.2

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v16.2.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10
jcesarmobile commented 3 years ago

cordova-plugin-camera is not compatible with SDK 30 yet, specifically with the package visibility feature, next release will

You can install the plugin from github or add a queries entry in your AndroidManifest.xml like what this PR added https://github.com/apache/cordova-plugin-camera/commit/abfbbd35d570f8bf60c3bcaa5a930cb74fdb5eac