Capacitor Camera Preview
@capacitor-community/camera-preview
CAPACITOR 3
Capacitor plugin that allows camera interaction from Javascript and HTML
(based on cordova-plugin-camera-preview).
Version 2+ of this plugin is compatible with Ionic 5+ and Capacitor 3. If your project uses Capacitor 2, please make sure you install [version 1](https://github.com/capacitor-community/camera-preview/releases/tag/v1.2.1) of this plugin.
**PR's are greatly appreciated.**
-- [@arielhernandezmusa](https://github.com/arielhernandezmusa) and [@pbowyer](https://github.com/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](https://github.com/capacitor-community/camera-preview/tree/v2.1.0) of this plugin.
Open `android/app/src/main/AndroidManifest.xml` and above the closing `` tag add this line to request the CAMERA permission:
```xml
```
For more help consult the [Capacitor docs](https://capacitorjs.com/docs/android/configuration#configuring-androidmanifestxml).
## Extra iOS installation steps
You will need to add two permissions to `Info.plist`. Follow the [Capacitor docs](https://capacitorjs.com/docs/ios/configuration#configuring-infoplist) and add permissions with the raw keys `NSCameraUsageDescription` and `NSMicrophoneUsageDescription`.
## Extra Web installation steps
Add `import '@capacitor-community/camera-preview'` to you entry script in ionic on `app.module.ts`, so capacitor can register the web platform from the plugin
# 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 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)
```javascript
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:
```css
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:
```css
.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
```html