Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xulihang/capacitor-plugin-camera
Capacitor camera plugin
https://github.com/xulihang/capacitor-plugin-camera
Last synced: 2 months ago
JSON representation
Capacitor camera plugin
- Host: GitHub
- URL: https://github.com/xulihang/capacitor-plugin-camera
- Owner: xulihang
- License: mit
- Created: 2022-11-17T07:13:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-21T06:57:09.000Z (5 months ago)
- Last Synced: 2024-10-30T12:23:33.298Z (2 months ago)
- Language: Java
- Size: 1.62 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-capacitor - capacitor-plugin-camera - A camera plugin that is designed to make it easy to perform image processing tasks like barcode reading and OCR. We can use reflection to get the camera frames in another plugin so that it can enjoy native performance. (Other plugins)
README
# capacitor-plugin-camera
A capacitor camera plugin.
[Online demo](https://dazzling-cactus-692f14.netlify.app/)
## Supported Platforms
* Android (based on CameraX)
* iOS (based on AVCaptureSession)
* Web (based on getUserMedia with Dynamsoft Camera Enhancer)
## Versions
For Capacitor 5, use versions 1.x.
For Capacitor 6, use versions 2.x.
## Install
```bash
npm install capacitor-plugin-camera
npx cap sync
```
## Get Bitmap/UIImage via Reflection
If you are developing a plugin, you can use reflection to get the camera frames as Bitmap or UIImage on the native side.
Java:
```java
Class cls = Class.forName("com.tonyxlh.capacitor.camera.CameraPreviewPlugin");
Method m = cls.getMethod("getBitmap",null);
Bitmap bitmap = (Bitmap) m.invoke(null, null);
```
Objective-C:
```obj-c
- (UIImage*)getUIImage{
UIImage *image = ((UIImage* (*)(id, SEL))objc_msgSend)(objc_getClass("CameraPreviewPlugin"), sel_registerName("getBitmap"));
return image;
}
```
You have to call `saveFrame` beforehand.
## Declare Permissions
To use camera and microphone, we need to declare permissions.
Add the following to Android's `AndroidManifest.xml`:
```xml
```
Add the following to iOS's `Info.plist`:
```xml
NSCameraUsageDescription
For camera usage
NSMicrophoneUsageDescription
For video recording
```
## FAQ
Why I cannot see the camera?
For native platforms, the plugin puts the native camera view behind the webview and sets the webview as transparent so that we can display HTML elements above the camera.
You may need to add the style below on your app's HTML or body element to avoid blocking the camera view:
```css
ion-content {
--background: transparent;
}
```
In dark mode, it is neccessary to set the `--ion-blackground-color` property. You can do this with the following code:
```js
document.documentElement.style.setProperty('--ion-background-color', 'transparent');
```
## API
* [`initialize()`](#initialize)
* [`getResolution()`](#getresolution)
* [`setResolution(...)`](#setresolution)
* [`getAllCameras()`](#getallcameras)
* [`getSelectedCamera()`](#getselectedcamera)
* [`selectCamera(...)`](#selectcamera)
* [`setScanRegion(...)`](#setscanregion)
* [`setZoom(...)`](#setzoom)
* [`setFocus(...)`](#setfocus)
* [`setDefaultUIElementURL(...)`](#setdefaultuielementurl)
* [`setElement(...)`](#setelement)
* [`startCamera()`](#startcamera)
* [`stopCamera()`](#stopcamera)
* [`takeSnapshot(...)`](#takesnapshot)
* [`saveFrame()`](#saveframe)
* [`takeSnapshot2(...)`](#takesnapshot2)
* [`takePhoto(...)`](#takephoto)
* [`toggleTorch(...)`](#toggletorch)
* [`getOrientation()`](#getorientation)
* [`startRecording()`](#startrecording)
* [`stopRecording(...)`](#stoprecording)
* [`setLayout(...)`](#setlayout)
* [`requestCameraPermission()`](#requestcamerapermission)
* [`requestMicroPhonePermission()`](#requestmicrophonepermission)
* [`isOpen()`](#isopen)
* [`addListener('onPlayed', ...)`](#addlisteneronplayed)
* [`addListener('onOrientationChanged', ...)`](#addlisteneronorientationchanged)
* [`removeAllListeners()`](#removealllisteners)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)
### initialize()
```typescript
initialize() => Promise
```
--------------------
### getResolution()
```typescript
getResolution() => Promise<{ resolution: string; }>
```
**Returns:** Promise<{ resolution: string; }>
--------------------
### setResolution(...)
```typescript
setResolution(options: { resolution: number; }) => Promise
```
| Param | Type |
| ------------- | ------------------------------------ |
| **`options`** | { resolution: number; } |
--------------------
### getAllCameras()
```typescript
getAllCameras() => Promise<{ cameras: string[]; }>
```
**Returns:** Promise<{ cameras: string[]; }>
--------------------
### getSelectedCamera()
```typescript
getSelectedCamera() => Promise<{ selectedCamera: string; }>
```
**Returns:** Promise<{ selectedCamera: string; }>
--------------------
### selectCamera(...)
```typescript
selectCamera(options: { cameraID: string; }) => Promise
```
| Param | Type |
| ------------- | ---------------------------------- |
| **`options`** | { cameraID: string; } |
--------------------
### setScanRegion(...)
```typescript
setScanRegion(options: { region: ScanRegion; }) => Promise
```
| Param | Type |
| ------------- | -------------------------------------------------------------- |
| **`options`** | { region: ScanRegion; } |
--------------------
### setZoom(...)
```typescript
setZoom(options: { factor: number; }) => Promise
```
| Param | Type |
| ------------- | -------------------------------- |
| **`options`** | { factor: number; } |
--------------------
### setFocus(...)
```typescript
setFocus(options: { x: number; y: number; }) => Promise
```
| Param | Type |
| ------------- | -------------------------------------- |
| **`options`** | { x: number; y: number; } |
--------------------
### setDefaultUIElementURL(...)
```typescript
setDefaultUIElementURL(url: string) => Promise
```
Web Only
| Param | Type |
| --------- | ------------------- |
| **`url`** | string |
--------------------
### setElement(...)
```typescript
setElement(ele: any) => Promise
```
Web Only
| Param | Type |
| --------- | ---------------- |
| **`ele`** | any |
--------------------
### startCamera()
```typescript
startCamera() => Promise
```
--------------------
### stopCamera()
```typescript
stopCamera() => Promise
```
--------------------
### takeSnapshot(...)
```typescript
takeSnapshot(options: { quality?: number; }) => Promise<{ base64: string; }>
```
take a snapshot as base64.
| Param | Type |
| ------------- | ---------------------------------- |
| **`options`** | { quality?: number; } |
**Returns:** Promise<{ base64: string; }>
--------------------
### saveFrame()
```typescript
saveFrame() => Promise<{ success: boolean; }>
```
save a frame internally. Android and iOS only.
**Returns:** Promise<{ success: boolean; }>
--------------------
### takeSnapshot2(...)
```typescript
takeSnapshot2(options: { canvas: HTMLCanvasElement; maxLength?: number; }) => Promise<{ scaleRatio?: number; }>
```
take a snapshot on to a canvas. Web Only
| Param | Type |
| ------------- | ------------------------------------------------- |
| **`options`** | { canvas: any; maxLength?: number; } |
**Returns:** Promise<{ scaleRatio?: number; }>
--------------------
### takePhoto(...)
```typescript
takePhoto(options: { pathToSave?: string; includeBase64?: boolean; }) => Promise<{ path?: string; base64?: string; blob?: Blob; }>
```
| Param | Type |
| ------------- | -------------------------------------------------------------- |
| **`options`** | { pathToSave?: string; includeBase64?: boolean; } |
**Returns:** Promise<{ path?: string; base64?: string; blob?: any; }>
--------------------
### toggleTorch(...)
```typescript
toggleTorch(options: { on: boolean; }) => Promise
```
| Param | Type |
| ------------- | ----------------------------- |
| **`options`** | { on: boolean; } |
--------------------
### getOrientation()
```typescript
getOrientation() => Promise<{ "orientation": "PORTRAIT" | "LANDSCAPE"; }>
```
get the orientation of the device.
**Returns:** Promise<{ orientation: 'PORTRAIT' | 'LANDSCAPE'; }>
--------------------
### startRecording()
```typescript
startRecording() => Promise
```
--------------------
### stopRecording(...)
```typescript
stopRecording(options: { includeBase64?: boolean; }) => Promise<{ path?: string; base64?: string; blob?: Blob; }>
```
| Param | Type |
| ------------- | ----------------------------------------- |
| **`options`** | { includeBase64?: boolean; } |
**Returns:** Promise<{ path?: string; base64?: string; blob?: any; }>
--------------------
### setLayout(...)
```typescript
setLayout(options: { top: string; left: string; width: string; height: string; }) => Promise
```
| Param | Type |
| ------------- | -------------------------------------------------------------------------- |
| **`options`** | { top: string; left: string; width: string; height: string; } |
--------------------
### requestCameraPermission()
```typescript
requestCameraPermission() => Promise
```
--------------------
### requestMicroPhonePermission()
```typescript
requestMicroPhonePermission() => Promise
```
--------------------
### isOpen()
```typescript
isOpen() => Promise<{ isOpen: boolean; }>
```
**Returns:** Promise<{ isOpen: boolean; }>
--------------------
### addListener('onPlayed', ...)
```typescript
addListener(eventName: 'onPlayed', listenerFunc: onPlayedListener) => Promise
```
| Param | Type |
| ------------------ | ------------------------------------------------------------- |
| **`eventName`** | 'onPlayed' |
| **`listenerFunc`** | onPlayedListener |
**Returns:** Promise<PluginListenerHandle>
--------------------
### addListener('onOrientationChanged', ...)
```typescript
addListener(eventName: 'onOrientationChanged', listenerFunc: onOrientationChangedListener) => Promise
```
| Param | Type |
| ------------------ | ------------------------------------------------------------------------------------- |
| **`eventName`** | 'onOrientationChanged' |
| **`listenerFunc`** | onOrientationChangedListener |
**Returns:** Promise<PluginListenerHandle>
--------------------
### removeAllListeners()
```typescript
removeAllListeners() => Promise
```
--------------------
### Interfaces
#### ScanRegion
measuredByPercentage: 0 in pixel, 1 in percent
| Prop | Type |
| -------------------------- | ------------------- |
| **`left`** | number |
| **`top`** | number |
| **`right`** | number |
| **`bottom`** | number |
| **`measuredByPercentage`** | number |
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| **`remove`** | () => Promise<void> |
### Type Aliases
#### onPlayedListener
(result: { resolution: string; }): void
#### onOrientationChangedListener
(): void