DEV Community

Cover image for How to use Camera Preview plugin in Ionic with Capacitor v3
Ridwan Kasim
Ridwan Kasim

Posted on

How to use Camera Preview plugin in Ionic with Capacitor v3

#ionic #angular #capacitor #hybrid

In this article, we will be looking at how to make use of the Camera Preview Plugin in our ionic apps. This plugin doesn't cause your app to restart whenever the camera is launched unlike the Camera Plugin. Research shows that the issue will occur when the device running the app is on low memory.

Before we get started, make sure you have your development environment set up for ionic else follow the official documentation
Let's start by creating a blank ionic project:

ionic start camera-preview blank
Enter fullscreen mode Exit fullscreen mode

Select Angular from the options and wait for some minutes while the project is created.

Navigate to the project directory by running the command below:

cd camera-preview
Enter fullscreen mode Exit fullscreen mode

We can now install our camera preview plugin with this command:

npm install @capacitor-community/camera-preview
Enter fullscreen mode Exit fullscreen mode

Then build the project and synchronise the changes by running the command below:

ionic build && npx cap sync
Enter fullscreen mode Exit fullscreen mode

Launch the app by running the command below. This will open the project in your browser.

ionic serve
Enter fullscreen mode Exit fullscreen mode

Open the newly created project in your favourite code editor. Also, we need to generate one more page component to render our camera.

ionic generate page preview
Enter fullscreen mode Exit fullscreen mode

In our project directory, we will now have a folder for home & another for preview. So let's open the home.page.html and add a button to launch the camera.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Camera Preview Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <div *ngIf="image">
        <img [src]="image" alt="" srcset="">
    </div>
    <ion-button (click)="openCamera()" color="primary" expand="block" fill="solid" size="default">
       Open Camera
    </ion-button>
</ion-content>
Enter fullscreen mode Exit fullscreen mode

The next thing to do is to register the preview module in our app.module.ts file. Your app.module.ts should look like below:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

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

Let's open the home.page.ts file and add the code for the openCamera() method.

Import the ionic modal and the preview page.

import { ModalController } from '@ionic/angular';
import { PreviewPage } from '../preview/preview.page';
Enter fullscreen mode Exit fullscreen mode

Then inject the modal into the constructor.

constructor(private modal: ModalController) {}
Enter fullscreen mode Exit fullscreen mode

All is set and we can now implement the function to launch our camera in the preview modal.

async openCamera() {
    const modal = await this.modal.create({
        component: PreviewPage,
        cssClass: '',
        animated: true
    });
    return await modal.present();
}
Enter fullscreen mode Exit fullscreen mode

Let's implement the look and feel of the camera by opening our preview.page.html and the code below:

<ion-content id="content" [fullscreen]="true">
  <div *ngIf="cameraActive">
      <ion-button (click)="stopCamera()" expand="block" id="close">
          <ion-icon slot="icon-only" name="close-circle"></ion-icon>
      </ion-button>

      <ion-button (click)="takePicture()" expand="block" id="capture">
          <ion-icon slot="icon-only" name="camera"></ion-icon>
      </ion-button>

      <ion-button (click)="flipCamera()" expand="block" id="flip">
          <ion-icon slot="icon-only" name="repeat"></ion-icon>
      </ion-button>
  </div>
</ion-content>
Enter fullscreen mode Exit fullscreen mode

The next thing is to add some styling to our buttons. Open preview.page.scss file and the code below:

ion-content {
  --background: transparent !important;
}

#capture {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  z-index: 99999;
}

#flip {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 125px);
  width: 50px;
  height: 50px;
  z-index: 99999;
}

#close {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 175px);
  width: 50px;
  height: 50px;
  z-index: 99999;
}

#capture::part(native) {
  border-radius: 30px;
}

#close::part(native) {
  border-radius: 30px;
}

#flip::part(native) {
  border-radius: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Let's open the preview.page.ts file and add it to our imports.

import { CameraPreview } from '@capacitor/core';
import { CameraPreviewOptions, CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
import '@capacitor-community/camera-preview';
import { ModalController } from '@ionic/angular';
Enter fullscreen mode Exit fullscreen mode

Then inject the modal into the constructor. Also, we will declare two variables.

image = null;
cameraActive = false;
constructor(private modal: ModalController) {}
Enter fullscreen mode Exit fullscreen mode

Since we are using a modal, we need to launch the camera on the device whenever the Open Camera button is clicked. Let's create a function called launchCamera() and call it inside ngOnInit()

ngOnInit() {
   this.launchCamera()
}

launchCamera() {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'front', // front or rear
      parent: 'content', // the id on the ion-content
      className: '',
      width: window.screen.width, //width of the camera display
      height: window.screen.height - 200, //height of the camera
      toBack: false,
    };
    CameraPreview.start(cameraPreviewOptions);
    this.cameraActive = true;
}
Enter fullscreen mode Exit fullscreen mode

Let's create a function to take our picture. Once the picture is taken, we need to stop the camera and close the modal. The result is a base64 string which we will pass back when the modal is dismissed.

async takePicture() {
    const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
      quality: 90
    };
    const result = await CameraPreview.capture(cameraPreviewPictureOptions);
    this.image = `data:image/jpeg;base64,${result.value}`;
    this.stopCamera();
}
Enter fullscreen mode Exit fullscreen mode

We need to add the function to stop the camera and close the modal.

async stopCamera() {
    await CameraPreview.stop();
    this.modal.dismiss(this.image);
}
Enter fullscreen mode Exit fullscreen mode

We also need to add the function to switch the camera from front to back and vice versa.

Note: this won't work if you test it in a browser.

async flipCamera() {
   await CameraPreview.flip();
}
Enter fullscreen mode Exit fullscreen mode

Let's open our home.page.ts file to listen to the modal close event. To do that we need to update the openCamera() function.

 modal.onDidDismiss().then((data) => {
     if (data !== null) {
        this.image = data.data;
     }
 });
Enter fullscreen mode Exit fullscreen mode

Voila!!! Let's test it in the browser. You can find the full code here:

Sample-one
sample-two

Top comments (3)

Collapse
 
dustinhahn profile image
dustinHahn •

Followed your example, step by step. When I run on Android device the content view is black even though --background: transparent !important

If I set toBack: false then the camera preview works.

Collapse
 
dotmarn profile image
Ridwan Kasim •

The article also sets toBack: false. You can check the repository for the code.

Collapse
 
dustinhahn profile image
dustinHahn •

ty.

Read next

muhammadawaisshaikh profile image

Streamlining API Calls in Angular v18 with TanStack Angular Query

Muhammad Awais -

dayanandaeswar profile image

data masking and disable cut copy paste in angular using directives

Dayananda -

railsstudent profile image

Update Map in a Signal, I wished someone told me before I made this mistake.

Connie Leung -

muhammadawaisshaikh profile image

Keep Hydrated with Angular Incremental Hydration 💦

Muhammad Awais -