Ionic 4/5 Camera Preview | Floating Camera View In Page | Tutorial

Ionic’s Camera Preview Native plugin provides an awesome floating Camera view in application pages itself without even opening the Camera application.

The Camera Preview plugin provides native features of a camera that can be easily controlled using built-in class methods.

  • Switch FRONT / BACK camera
  • Turn On/Off/Auto flash
  • Camera Effects; none | aqua | blackboard | mono | negative | posterize | sepia | solarize | whiteboard
  • Control Zoom; From 1 to 100
  • Floating Camera of defined Height and Width
  • Background Camera on page view
  • Draggable Floating Camera

and many more …

Let’s start and create an awesome app

Version Check

@ionic/cli Version 6.1.0 Latest

Run following NPM command to check Ionic CLI version:

Update to the latest version:

 

Create an Ionic 5 Angular Application

To create a new Ionic 5 application, you can run $ ionic start which will as further configuration options.

Or run following command with name, template, and framework like Angular or React provided in --type  option:

After successfully creating, just move to the application’s root by running

To open the app in Visual Studio Code IDE, run . code  command

 

Install Camera Preview Plugin

To use Camera we need to install the Cordova plugin and Native wrapper for Ionic. Run following commands one by one at project’s root

Update App Module

Import the CameraPreview class to app.module.ts then add in the providers array:

Adding Camera Preview

In the component HTML template, we will add some buttons, slider, and select controls to use Camera features. Update the home.page.html file content with the following code:

The ion-content element is having ngClass directive to add the 'custom-ion-content' class when isToBack is true.

In the global.scss file at application root add the following style:

This will turn the home page background to transparent to view the Camera as a background.

Update Home Component Class

Let’s update the home.page.ts file with following code:

In the above code, there are methods to control Camera settings.

The startCameraAbove()  method is called with provided configuration define position and height, width of Camera Preview in page.

When toBack is false, floating Camera Preview is shown. The previewDrag enables draggable Preview in page. The tapPhoto option will capture photo on tap on preview.

The startCameraAbove and startCameraBelow can be called after calling stopCamera method.

The takePicture method takes the Picture event if Preview is background.

The switchCamera Swtches between rear and front camera.

That’s it now you can run your application in a real device by runnign folloiwng command for Android:

You need to connect your phone with USB debug mode.

 

Leave a Reply

avatar
  Subscribe  
Notify of