https://github.com/ryaa/camera-preview-capacitor-2
https://github.com/ryaa/camera-preview-capacitor-2
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ryaa/camera-preview-capacitor-2
- Owner: ryaa
- License: mit
- Created: 2022-05-25T14:30:33.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T14:33:28.000Z (about 4 years ago)
- Last Synced: 2025-01-03T08:47:34.209Z (over 1 year ago)
- Language: Java
- Size: 1.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Capacitor Camera Preview
Capacitor plugin that allows camera interaction from Javascript and HTML (based on cordova-plugin-camera-preview)
**Releases are being kept up to date when appropriate. However, this plugin is under constant development. As such it is recommended to use master to always have the latest fixes & features.**
**PR's are greatly appreciated. Maintainer(s) wanted.**
# Installation
```
yarn add @capacitor-community/camera-preview
or
npm install @capacitor-community/camera-preview
```
Then run
```
npx cap sync
```
#### Android Quirks
On Android remember to add the plugin to `MainActivity`
```java
import com.ahm.capacitor.camera.preview.CameraPreview;
this.init(savedInstanceState, new ArrayList>() {{
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(CameraPreview.class);
}});
```
#### Web Quirks
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) |
| disableAudio | boolean | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web only) |
| lockAndroidOrientation | boolean | (optional) Locks device orientation when camer is showing, default false. (applicable to Android only) |
```javascript
import { Plugins } from "@capacitor/core"
const { CameraPreview } = Plugins;
import { 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;
}
```
### stop()
Stops the camera preview instance.
```javascript
CameraPreview.stop();
```
### flip()
Switch between rear and front camera only for android and ios, web is not supported
```javascript
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) |
```javascript
import { CameraPreviewFlashMode } 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`.
```javascript
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](#camera_Settings.FlashMode) for possible values that can be returned
```javascript
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](#camera_Settings.FlashMode) for details about the possible values for flashMode.
```javascript
const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';
CameraPreview.setFlashMode(cameraPreviewFlashMode);
```
### startRecordVideo(options) ---- ANDROID only
Start capturing video
```javascript
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'front',
width: window.screen.width,
height: window.screen.height,
};
CameraPreview.startRecordVideo(cameraPreviewOptions);
```
### stopCaptureVideo() ---- ANDROID only
Finish capturing a video. The captured video will be returned as a file path and the video format is .mp4
```javascript
const resultRecordVideo = await CameraPreview.stopRecordVideo();
this.stopCamera();
```
# 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](https://github.com/capacitor-community/camera-preview/tree/master/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.