Camera Previewβ

Improve this doc

This plugin is still in beta stage and may not work as expected. Please submit any issues to the plugin repo.

Showing camera preview in HTML

Requires Cordova plugin: https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git. For more info, please see the Cordova Camera Preview docs.

Repo: https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview

Installation

1. Install the Cordova and Ionic Native plugins:
   

   $ ionic cordova plugin add cordova-plugin-camera-preview
   $ npm install --save @ionic-native/camera-preview@4
   

2. Add this plugin to your app's module

Supported platforms

• Android
• iOS

Usage

import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview';

constructor(private cameraPreview: CameraPreview) { }

...

// camera options (Size and location). In the following example, the preview uses the rear camera and display the preview in the back of the webview
const cameraPreviewOpts: CameraPreviewOptions = {
  x: 0,
  y: 0,
  width: window.screen.width,
  height: window.screen.height,
  camera: 'rear',
  tapPhoto: true,
  previewDrag: true,
  toBack: true,
  alpha: 1
};

// start camera
this.cameraPreview.startCamera(cameraPreviewOpts).then(
  (res) => {
    console.log(res)
  },
  (err) => {
    console.log(err)
  });

// Set the handler to run every time we take a picture
this.cameraPreview.setOnPictureTakenHandler().subscribe((result) => {
  console.log(result);
  // do something with the result
});


// picture options
const pictureOpts: CameraPreviewPictureOptions = {
  width: 1280,
  height: 1280,
  quality: 85
}

// take a picture
this.cameraPreview.takePicture(this.pictureOpts).then((imageData) => {
  this.picture = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  console.log(err);
  this.picture = 'assets/img/test.jpg';
});


// Switch camera
this.cameraPreview.switchCamera();

// set color effect to negative
this.cameraPreview.setColorEffect('negative');

// Stop the camera preview
this.cameraPreview.stopCamera();

Instance Members

FOCUS_MODE

EXPOSURE_MODE

FLASH_MODE

COLOR_EFFECT

CAMERA_DIRECTION

startCamera(options)

Starts the camera preview instance.

stopCamera()

Stops the camera preview instance. (iOS & Android)

switchCamera()

Switch from the rear camera and front camera, if available.

hide()

Hide the camera preview box.

show()

Show the camera preview box.

takePicture(options)

Take the picture (base64)

setColorEffect(effect)

Set camera color effect.

setZoom(zoom)

Set the zoom (Android)

getMaxZoom()

Get the maximum zoom (Android)

getZoom()

Get current zoom (Android)

setPreviewSize(dimensions)

Set the preview Size

getFocusMode()

Get focus mode

setFocusMode(focusMode)

Set the focus mode

getSupportedFocusModes()

Get supported focus modes

getFlashMode()

Get the current flash mode

setFlashMode(flashMode)

Set the flash mode

getSupportedFlashModes()

Get supported flash modes

getSupportedPictureSizes()

Get supported picture sizes

getExposureMode()

Get exposure mode

getExposureModes()

Get exposure modes

setExposureMode(lock)

Set exposure mode

getExposureCompensation()

Get exposure compensation (Android)

setExposureCompensation(exposureCompensation)

Set exposure compensation (Android)

getExposureCompensationRange()

Get exposure compensation range (Android)

tapToFocus(xPoint, yPoint)

Set specific focus point. Note, this assumes the camera is full-screen.

onBackButton()

Add a listener for the back event for the preview

CameraPreviewOptions

CameraPreviewPictureOptions

CameraPreviewDimensions