@capacitor-community/camera-preview
v6.0.0
Published
Camera preview
Downloads
26,955
Maintainers
Readme
If you are using Capacitor 5, use version 5
If you are using Capacitor 4, use version 4
If you are using Capacitor 3, use version 3
If you are using Capacitor 2, use version 1
PR's are greatly appreciated.
-- @arielhernandezmusa and @pbowyer, current maintainers
Installation
yarn add @capacitor-community/camera-preview
or
npm install @capacitor-community/camera-preview
Then run
npx cap sync
Extra Android installation steps
Important camera-preview
3+ requires Gradle 7. If you are using Gradle 4, please use version 2 of this plugin.
Open android/app/src/main/AndroidManifest.xml
and above the closing </manifest>
tag add this line to request the CAMERA permission:
<uses-permission android:name="android.permission.CAMERA" />
For more help consult the Capacitor docs.
Variables
This plugin will use the following project variables (defined in your app's variables.gradle
file):
androidxExifInterfaceVersion
: version ofandroidx.exifinterface:exifinterface
(default:1.3.6
)
Extra iOS installation steps
You will need to add two permissions to Info.plist
. Follow the Capacitor docs and add permissions with the raw keys NSCameraUsageDescription
and NSMicrophoneUsageDescription
. NSMicrophoneUsageDescription
is only required, if audio will be used. Otherwise set the disableAudio
option to true
, which also disables the microphone permission request.
Extra Web installation steps
Add import { CameraPreview } from '@capacitor-community/camera-preview';
in the file where you want to use the plugin.
then in html add <div id="cameraPreview"></div>
and CameraPreview.start({ parent: "cameraPreview"});
will work.
Methods
start(options)
Starts the camera preview instance.
| Option | values | descriptions | |----------|---------------|------------------------------------------------------------------------| | position | front | rear | Show front or rear camera when start the preview. Defaults to front | | width | number | (optional) The preview width in pixels, default window.screen.width (applicable to the android and ios platforms only) | | height | number | (optional) The preview height in pixels, default window.screen.height (applicable to the android and ios platforms only) | | x | number | (optional) The x origin, default 0 (applicable to the android and ios platforms only) | | y | number | (optional) The y origin, default 0 (applicable to the android and ios platforms only) | | toBack | boolean | (optional) Brings your html in front of your preview, default false (applicable to the android and ios platforms only) | | paddingBottom | number | (optional) The preview bottom padding in pixes. Useful to keep the appropriate preview sizes when orientation changes (applicable to the android and ios platforms only) | | rotateWhenOrientationChanged | boolean | (optional) Rotate preview when orientation changes (applicable to the ios platforms only; default value is true) | | storeToFile | boolean | (optional) Capture images to a file and return back the file path instead of returning base64 encoded data, default false. | | disableExifHeaderStripping | boolean | (optional) Disable automatic rotation of the image, and let the browser deal with it, default true (applicable to the android and ios platforms only) | | enableHighResolution | boolean | (optional) Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device | | disableAudio | boolean | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web and iOS only) | | lockAndroidOrientation | boolean | (optional) Locks device orientation when camera is showing, default false. (applicable to Android only) | | enableOpacity | boolean | (optional) Make the camera preview see-through. Ideal for augmented reality uses. Default false (applicable to Android and web only) | enableZoom | boolean | (optional) Set if you can pinch to zoom. Default false (applicable to the android and ios platforms only)
import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'rear',
height: 1920,
width: 1080
};
CameraPreview.start(cameraPreviewOptions);
Remember to add the style below on your app's HTML or body element:
ion-content {
--background: transparent;
}
Take into account that this will make transparent all ion-content on application, if you want to show camera preview only in one page, just add a custom class to your ion-content and make it transparent:
.my-custom-camera-preview-content {
--background: transparent;
}
If the camera preview is not displaying after applying the above styles, apply transparent background color to the root div element of the parent component Ex: VueJS >> App.vue component
<template>
<ion-app id="app">
<ion-router-outlet />
</ion-app>
</template>
<style>
#app {
background-color: transparent !important;
}
<style>
stop()
Stops the camera preview instance.
CameraPreview.stop();
flip()
Switch between rear and front camera only for android and ios, web is not supported
CameraPreview.flip()
capture(options)
| Option | values | descriptions | |----------|---------------|----------------------------------------------------------------------| | quality | number | (optional) The picture quality, 0 - 100, default 85 | | width | number | (optional) The picture width, default 0 (Device default) | | height | number | (optional) The picture height, default 0 (Device default) |
import { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
quality: 50
};
const result = await CameraPreview.capture(cameraPreviewPictureOptions);
const base64PictureData = result.value;
// do sometime with base64PictureData
captureSample(options)
| Option | values | descriptions | |----------|---------------|----------------------------------------------------------------------| | quality | number | (optional) The picture quality, 0 - 100, default 85 |
Captures a sample image from the video stream. Only for Android and iOS, web implementation falls back to capture
method. This can be used to perform real-time analysis on the current frame in the video. The argument quality
defaults to 85
and specifies the quality/compression value: 0=max compression
, 100=max quality
.
import { CameraSampleOptions } from '@capacitor-community/camera-preview';
const cameraSampleOptions: CameraSampleOptions = {
quality: 50
};
const result = await CameraPreview.captureSample(cameraSampleOptions);
const base64PictureData = result.value;
// do something with base64PictureData
getSupportedFlashModes()
Get the flash modes supported by the camera device currently started. Returns an array containing supported flash modes. See FLASH_MODE for possible values that can be returned
import { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';
const flashModes = await CameraPreview.getSupportedFlashModes();
const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
setFlashMode(options)
Set the flash mode. See FLASH_MODE for details about the possible values for flashMode.
const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';
CameraPreview.setFlashMode(cameraPreviewFlashMode);
startRecordVideo(options) ---- ANDROID and iOS only
Start capturing video
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'front',
width: window.screen.width,
height: window.screen.height,
};
CameraPreview.startRecordVideo(cameraPreviewOptions);
stopRecordVideo() ---- ANDROID and iOS only
Finish capturing a video. The captured video will be returned as a file path and the video format is .mp4
const resultRecordVideo = await CameraPreview.stopRecordVideo();
setOpacity(options: CameraOpacityOptions): Promise<{}>; ---- ANDROID only
Set the opacity for the camera preview
const myCamera = CameraPreview.start({enableOpacity: true});
myCamera.setOpacity({opacity: 0.4});
Settings
FLASH_MODE
Flash mode settings:
| Name | Type | Default | Note | | ------- | ------- | ------- | ------------- | | OFF | string | off | | | ON | string | on | | | AUTO | string | auto | | | RED_EYE | string | red-eye | Android Only | | TORCH | string | torch | |
Demo
A working example can be found at Demo
To run the demo on your local network and access media devices, a secure context is needed. Add an .env
file at the root of the demo folder with HTTPS=true
to start react with HTTPS.