Ionic 4 native camera preview not showing up on my application

Ionic Native
1

I have followed the instructions at CameraPreview documentation but the camera preview didn’t showed up on my app even though I manualy set thewidth and height to 50. I always build my application with ionic cordova run android & ionic cordova run android -l -c command to test this native plugin on my physical android device. Hope you can help me with this.

I have a page named camera and set it as my default page on my routing module.

camera.page.ts

import { Component, OnInit } from '@angular/core';
import { CameraPreview, CameraPreviewOptions} from '@ionic-native/camera-preview/ngx';

@Component({

selector: ‘app-camera’,

templateUrl: ‘./camera.page.html’,

styleUrls: [’./camera.page.scss’],

})

export class CameraPage implements OnInit {


constructor(private cameraPrev: CameraPreview) {


const cameraPreviewOpts: CameraPreviewOptions = {
  x: 20,
  y: 20,
  width: 50,
  height: 50,
  camera: 'rear',
  tapPhoto: true,
  previewDrag: true,
  toBack: true,
  alpha: 1
}

this.cameraPrev.startCamera(cameraPreviewOpts).then((info) => {
  alert(info);
}).catch((err) => {
  alert(err);
});



}


ngOnInit() {}


launchCamera(){


}


}

camera.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from ‘@ionic/angular’;


import { CameraPage } from ‘./camera.page’;


const routes: Routes = [

{

path: ‘’,

component: CameraPage

}

];


@NgModule({

imports: [

CommonModule,

FormsModule,

IonicModule,

RouterModule.forChild(routes)

],

declarations: [CameraPage]

})

export class CameraPageModule {}

camera.page.html

<ion-header>

<ion-toolbar>


<ion-title>camera</ion-title>


</ion-toolbar>


</ion-header>


<ion-content padding>


<button (click) = “launchCamera()” ion-button>Start Camera</button>


</ion-content>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{ path: ‘’, redirectTo: ‘camera’, pathMatch: ‘full’ },

{ path: ‘home’, loadChildren: ‘./home/home.module#HomePageModule’ },

{ path: ‘camera’, loadChildren: ‘./camera/camera.module#CameraPageModule’ },

];


@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

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 { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

import { StatusBar } from ‘@ionic-native/status-bar/ngx’;


import { AppComponent } from ‘./app.component’;

import { AppRoutingModule } from ‘./app-routing.module’;

import { CameraPreview } from ‘@ionic-native/camera-preview/ngx’;


@NgModule({

declarations: [AppComponent],

entryComponents: ,

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

providers: [

StatusBar,

SplashScreen,

CameraPreview,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

],

bootstrap: [AppComponent]

})

export class AppModule {}

Here are some information that you might need to know. Please let me know if I missed something very important to identify the problem.

Cordova plugins - ionic cordova plugins ls 

cordova-plugin-camera-preview 0.10.0 "cordova-plugin-camera-preview"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.3.2 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

Ionic info - ionic info 

Ionic:

ionic (Ionic CLI)             : 4.8.0 (C:\Users\Johndel\AppData\Roaming\npm\node_modules\ionic)

Ionic Framework               : @ionic/angular 4.0.0-rc.1

@angular-devkit/build-angular : 0.11.4

@angular-devkit/schematics    : 7.1.4

@angular/cli                  : 7.1.4

@ionic/angular-toolkit        : 1.2.2


Cordova:


cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

Cordova Platforms     : android 7.1.4

Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 4 other plugins)


System:


NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)

npm    : 6.5.0

OS     : Windows 8.1

Android Version

Android 8.1.0

Hoping someone could help. Thank you!

2

I have fixed the issue knowing that my camera was rendering behind the viewport of my build. I have managed to render it on front by setting the CameraPreviewOptions toBack Boolean value to true.

3

can you show the code