Check out Ionic Enterprise

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
    
  2. Add this plugin to your app's module

Supported platforms

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.

Param Type Details
options CameraPreviewOptions

Returns: Promise<any>

stopCamera()

Stops the camera preview instance. (iOS & Android)

Returns: Promise<any>

switchCamera()

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

Returns: Promise<any>

hide()

Hide the camera preview box.

Returns: Promise<any>

show()

Show the camera preview box.

Returns: Promise<any>

takePicture(options)

Take the picture (base64)

Param Type Details
options CameraPreviewPictureOptions

size and quality of the picture to takeOptional

Returns: Promise<any>

setColorEffect(effect)

Set camera color effect.

Param Type Details
effect string

name : 'none' (iOS & Android), 'aqua' (Android), 'blackboard' (Android), 'mono' (iOS & Android), 'negative' (iOS & Android), 'posterize' (iOS & Android), 'sepia' (iOS & Android), 'solarize' (Android) or 'whiteboard' (Android)

Returns: Promise<any>

setZoom(zoom)

Set the zoom (Android)

Param Type Details
zoom number

Zoom valueOptional

Returns: Promise<any>

getMaxZoom()

Get the maximum zoom (Android)

Returns: Promise<any>

getZoom()

Get current zoom (Android)

Returns: Promise<any>

setPreviewSize(dimensions)

Set the preview Size

Param Type Details
dimensions CameraPreviewDimensions

Optional

Returns: Promise<any>

getFocusMode()

Get focus mode

Returns: Promise<any>

setFocusMode(focusMode)

Set the focus mode

Param Type Details
focusMode string

'fixed', 'auto', 'continuous-picture', 'continuous-video' (iOS & Android), 'edof', 'infinity', 'macro' (Android Only)Optional

Returns: Promise<any>

getSupportedFocusModes()

Get supported focus modes

Returns: Promise<any>

getFlashMode()

Get the current flash mode

Returns: Promise<any>

setFlashMode(flashMode)

Set the flashmode

Param Type Details
flashMode string

'off' (iOS & Android), 'on' (iOS & Android), 'auto' (iOS & Android), 'torch' (Android)Optional

Returns: Promise<any>

getSupportedFlashModes()

Get supported flash modes

Returns: Promise<any>

getSupportedPictureSizes()

Get supported picture sizes

Returns: Promise<any>

getExposureMode()

Get exposure mode

Returns: Promise<any>

getExposureModes()

Get exposure modes

Returns: Promise<any>

setExposureMode(lock)

Set exposure mode

Param Type Details
lock string

Optional

Returns: Promise<any>

getExposureCompensation()

Get exposure compensation (Android)

Returns: Promise<any>

setExposureCompensation(exposureCompensation)

Set exposure compensation (Android)

Param Type Details
exposureCompensation number

Optional

Returns: Promise<any>

getExposureCompensationRange()

Get exposure compensation range (Android)

Returns: Promise<any>

tapToFocus(xPoint, yPoint)

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

Param Type Details
xPoint number
yPoint number

Returns: Promise<any>

CameraPreviewOptions

Param Type Details
x number

The left edge in pixels, default 0

(optional)
y number

The top edge in pixels, default 0

(optional)
width number

The width in pixels, default window.screen.width

(optional)
height number

The height in pixels, default window.screen.height

(optional)
camera string

Choose the camera to use 'front' or 'rear', default 'front'

(optional)
tapPhoto boolean

Tap to take a photo, default true (picture quality by default : 85)

(optional)
previewDrag boolean

Preview box drag across the screen, default 'false'

(optional)
toBack boolean

Preview box to the back of the webview (true => back, false => front) , default false

(optional)
alpha number

Alpha channel of the preview box, float, [0,1], default 1

(optional)

CameraPreviewPictureOptions

Param Type Details
width number

The width in pixels, default 0

(optional)
height number

The height in pixels, default 0

(optional)
quality number

The picture quality, 0 - 100, default 85

(optional)

CameraPreviewDimensions

Param Type Details
width number

The width of the camera preview, default to window.screen.width

(optional)
height number

The height of the camera preview, default to window.screen.height

(optional)

API

Native

General