Skip to content

Commit 88e1962

Browse files
committed
npm publish
0 parents  commit 88e1962

32 files changed

+9146
-0
lines changed

Diff for: .npmignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
demo/
2+
.idea/
3+
support/
4+
*.tar
5+
*.tgz
6+
.npmignore
7+
*.map
8+
*.ts
9+
tsconfig.json
10+
scripts
11+
.DS_Store
12+
*.aar
13+
node_modules
14+
*.esm.json
15+
!extractTGZ.js
16+
*.js.map
17+
*.log
18+
19+
# Editor directories and files
20+
.idea
21+
.vscode

Diff for: README.md

+211
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
[<img src="https://raw.githubusercontent.com/Yoonit-Labs/nativescript-yoonit-camera/development/logo_cyberlabs.png" width="300">](https://cyberlabs.ai/)
2+
3+
# NativeScript Yoonit Camera
4+
5+
![NativeScript](https://img.shields.io/badge/NativeScript-7-lightgrey.svg?style=for-the-badge&logo=nativescript) ![Version](https://img.shields.io/npm/v/@yoonit/nativescript-camera?color=lightgrey&style=for-the-badge&logo=npm) ![Downloads](https://img.shields.io/npm/dm/@yoonit/nativescript-camera?color=lightgrey&logo=npm&style=for-the-badge)
6+
7+
![Android](https://img.shields.io/badge/Android-YES-lightgrey.svg?style=for-the-badge&logo=android) ![iOS](https://img.shields.io/badge/iOS-YES-lightgrey.svg?style=for-the-badge&logo=apple) ![MIT license](https://img.shields.io/npm/l/@yoonit/nativescript-camera?color=lightgrey&style=for-the-badge)
8+
9+
A NativeScript plugin to provide:
10+
- Modern Android Camera API (Camera X)
11+
- MLKit integration
12+
- Camera preview (Front & Back)
13+
- Face detection (With Min & Max size)
14+
- Landmark detection (Soon)
15+
- Face crop
16+
- Face capture
17+
- Frame capture
18+
- Face ROI
19+
- QR Code scanning
20+
21+
## Installation
22+
23+
```javascript
24+
npm i -s @yoonit/nativescript-camera
25+
```
26+
27+
## Usage
28+
29+
All the functionalities that the `@yoonit/nativescript-camera` provides is accessed through the `YoonitCamera` component, that includes the camera preview. Below we have the basic usage code, for more details, your can see the [**Methods**](#methods), [**Events**](#events) or the [**Demo Vue**](https://github.com/Yoonit-Labs/nativescript-yoonit-camera/tree/development/demo-vue).
30+
31+
#### VueJS Plugin
32+
`main.js`
33+
```javascript
34+
import Vue from 'nativescript-vue'
35+
import YoonitCamera from '@yoonit/nativescript-camera/vue'
36+
37+
Vue.use(YoonitCamera)
38+
```
39+
40+
After that, you can access the camera object in your entire project using `this.$yoo.camera`
41+
42+
#### Vue Component
43+
`App.vue`
44+
```vue
45+
<template>
46+
<Page @loaded="onLoaded">
47+
<YoonitCamera
48+
ref="yooCamera"
49+
initialLens="front"
50+
captureType="face"
51+
numberOfImages=10
52+
timeBetweenImages=500
53+
saveImageCaptured=true
54+
faceDetectionBox=true
55+
@faceDetected="doFaceDetected"
56+
@imageCaptured="doImageCaptured"
57+
@endCapture="doEndCapture"
58+
@qrCodeContent="doQRCodeContent"
59+
@status="doStatus"
60+
@permissionDenied="doPermissionDenied"
61+
/>
62+
</Page>
63+
</template>
64+
65+
<script>
66+
export default {
67+
data: () => ({}),
68+
69+
methods: {
70+
async onLoaded() {
71+
72+
console.log('[YooCamera] Getting Camera view')
73+
this.$yoo.camera.registerElement(this.$refs.yooCamera)
74+
75+
console.log('[YooCamera] Getting permission')
76+
if (await this.$yoo.camera.requestPermission()) {
77+
78+
console.log('[YooCamera] Permission granted, start preview')
79+
this.$yoo.camera.preview()
80+
}
81+
},
82+
83+
doFaceDetected({ x, y, width, height }) {
84+
console.log('[YooCamera] doFaceDetected', `{x: ${x}, y: ${y}, width: ${width}, height: ${height}}`)
85+
if (!x || !y || !width || !height) {
86+
this.imagePath = null
87+
}
88+
},
89+
90+
doImageCaptured({
91+
type,
92+
count,
93+
total,
94+
image: {
95+
path,
96+
source
97+
}
98+
}) {
99+
if (total === 0) {
100+
console.log('[YooCamera] doImageCreated', `${type}: [${count}] ${path}`)
101+
this.imageCreated = `${count}`
102+
} else {
103+
console.log('[YooCamera] doImageCreated', `${type}: [${count}] of [${total}] - ${path}`)
104+
this.imageCreated = `${count} de ${total}`
105+
}
106+
107+
this.imagePath = source
108+
},
109+
110+
doEndCapture() {
111+
console.log('[YooCamera] doEndCapture')
112+
},
113+
114+
doQRCodeContent({ content }) {
115+
console.log('[YooCamera] doQRCodeContent', content)
116+
},
117+
118+
doStatus({ status }) {
119+
console.log('[YooCamera] doStatus', status)
120+
},
121+
122+
doPermissionDenied() {
123+
console.log('[YooCamera] doPermissionDenied')
124+
}
125+
}
126+
}
127+
</script>
128+
```
129+
130+
## API
131+
132+
### Props
133+
134+
| Props | Input/Format | Default value | Description |
135+
| - | - | - | - |
136+
| initialLens | `"front"` or `"back"` | `"front"` | The camera lens when component initiated. |
137+
| captureType | `"none"`, `"front"`, `"frame"` or `"qrcode"` | `"none"` | The capture type of the camera. |
138+
| numberOfImages | number | `0` | The number of images to be captured. |
139+
| timeBetweenImages | number | `1000` | The time interval in milliseconds to capture between images. |
140+
| outputImageWidth | `"NNpx"` | `"200px"` | The output image width in pixels to be captured. |
141+
| outputImageHeight | `"NNpx"` | `"200px"` | The output image height in pixels to be captured. |
142+
| faceMinSize | `"NN%"` | `"0%"` | The face minimum size percentage to be captured. |
143+
| faceMaxSize | `"NN%"` | `"100%"` | The face maximum size percentage to be captured. |
144+
| faceDetectionBox | boolean | `false` | The indicator to show/hide the face detection box. |
145+
| saveImageCaptured | boolean | `false` | The indicator to enable/disabled when an image captured. |
146+
| faceROI | boolean | `false` | The indicator to enable.disable the region of interest. |
147+
| faceROITopOffset | `"NN%"` | `"0%"` | The "top" offset percentage region of interest. |
148+
| faceROIRightOffset | `"NN%"` | `"0%"` | The "right" offset percentage region of interest. |
149+
| faceROIBottomOffset | `"NN%"` | `"0%"` | The "bottom" offset percentage region of interest. |
150+
| faceROILeftOffset | `"NN%"` | `"0%"` | The "left" offset percentage region of interest. |
151+
| faceROIMinSize | `"NN%"` | `"0%"` | The minimum face related with the ROI. |
152+
153+
#### Methods
154+
155+
| Function | Parameters | Valid values | Return Type | Description
156+
| - | - | - | - | -
157+
| requestPermission | - | - | promise | Ask the user to give the permission to access camera.
158+
| hasPermission | - | - | boolean | Return if application has camera permission.
159+
| preview | - | - | void | Start camera preview if has permission.
160+
| startCapture | `type: string` | <ul><li>`"none"`</li><li>`"face"`</li><li>`"qrcode"`</li><li>`"frame"`</li></ul> | void | Set capture type none, face, qrcode or frame.
161+
| stopCapture | - | - | void | Stop any type of capture.
162+
| toggleLens | - | - | void | Toggle camera lens facing front/back.
163+
| setCameraLens | `lens: string` | `"front"` or `"back"` | void | Set camera to use "front" or "back" lens. Default value is "front".
164+
| getLens | - | - | string | Return "front" or "back".
165+
| setNumberOfImages | `numberOfImages: Int` | Any positive `Int` value | void | Default value is 0. For value 0 is saved infinity images. When saved images reached the "number os images", the `onEndCapture` is triggered.
166+
| setTimeBetweenImages | `milliseconds: number` | Any positive number that represent time in milli seconds | void | Set saving face/frame images time interval in milli seconds.
167+
| setOutputImageWidth | `width: string` | Value format must be in `NNpx` | void | Set face image width to be created in pixels.
168+
| setOutputImageHeight | `height: string` | Value format must be in `NNpx` | void | Set face image height to be created in pixels.
169+
| setSaveImageCaptured | `enable: boolean` | `true` or `false` | void | Set to enable/disable save image when capturing face and frame.
170+
| setFaceDetectionBox | `enable: boolean` | `true` or `false` | void | Set to show a detection box when face detected.
171+
| setFacePaddingPercent | `percentage: string` | Value format must be in `NN%` | void | Set face image and bounding box padding in percent.
172+
| setFaceCaptureMinSize | `percentage: string` | Value format must be in `NN%` | void | Set the minimum face capture based on the screen.
173+
| setFaceCaptureMaxSize | `percentage: string` | Value format must be in `NN%` | void | Set the maximum face capture based on the screen.
174+
| setFaceROIEnable | `enable: boolean` | `true` or `false` | void | Enable/disable face region of interest capture.
175+
| setFaceROITopOffset | `percentage: string` | Value format must be in `NN%` | void | Distance in percentage of the top face bounding box with the top of the camera preview.
176+
| setFaceROIRightOffset | `percentage: string` | Value format must be in `NN%` | void | Distance in percentage of the right face bounding box with the right of the camera preview.
177+
| setFaceROIBottomOffset | `percentage: string` | Value format must be in `NN%` | void | Distance in percentage of the bottom face bounding box with the bottom of the camera preview.
178+
| setFaceROILeftOffset | `percentage: string` | Value format must be in `NN%` | void | Distance in percentage of the left face bounding box with the left of the camera preview.
179+
| setFaceROIMinSize | `percentage: string` | Value format must be in `NN%` | void | Set the minimum face size related with the region of interest.
180+
181+
#### Events
182+
183+
| Event | Parameters | Description
184+
| - | - | -
185+
| imageCaptured | `{ type: string, count: number, total: number, image: object = { path: string, source: blob } }` | Must have started capture type of face/frame. Emitted when the face image file saved: <ul><li>type: "face" or "frame"</li>li>count: current index</li><li>total: total to create</li><li>image.path: the face/frame image path</li><li>image.source: the blob file</li><ul>
186+
| faceDetected | `{ x: number, y: number, width: number, height: number }` | Must have started capture type of face. Emit the detected face bounding box. Emit all parameters null if no more face detecting.
187+
| endCapture | - | Must have started capture type of face/frame. Emitted when the number of image files created is equal of the number of images set (see the method `setNumberOfImages`).
188+
| qrCodeContent | `{ content: string }` | Must have started capture type of qrcode (see `startCapture`). Emitted when the camera read a QR Code.
189+
| status | `{ type: 'error'/'message', status: string }` | Emit message error from native. Used more often for debug purpose.
190+
| permissionDenied | - | Emit when try to `preview` but there is not camera permission.
191+
192+
### Message
193+
194+
Pre-define message constants used by the `status` event.
195+
196+
| Message | Description
197+
| - | -
198+
| INVALID_CAPTURE_FACE_MIN_SIZE | Face width percentage in relation of the screen width is less than the set (`setFaceCaptureMinSize`).
199+
| INVALID_CAPTURE_FACE_MAX_SIZE | Face width percentage in relation of the screen width is more than the set (`setFaceCaptureMaxSize`).
200+
| INVALID_CAPTURE_FACE_OUT_OF_ROI | Face bounding box is out of the set region of interest (`setFaceROIOffset`).
201+
| INVALID_CAPTURE_FACE_ROI_MIN_SIZE | Face width percentage in relation of the screen width is less than the set (`setFaceROIMinSize`).
202+
203+
## To contribute and make it better
204+
205+
Clone the repo, change what you want and send PR.
206+
207+
Contributions are always welcome!
208+
209+
---
210+
211+
Code with ❤ by the [**Cyberlabs AI**](https://cyberlabs.ai/) Front-End Team

Diff for: Yoonit.Camera.android.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { CameraBase } from './Yoonit.Camera.common';
2+
export declare class YoonitCamera extends CameraBase {
3+
nativeView: ai.cyberlabs.yoonit.camera.CameraView;
4+
createNativeView(): Object;
5+
initNativeView(): void;
6+
disposeNativeView(): void;
7+
requestPermission(explanation?: string): Promise<boolean>;
8+
hasPermission(): boolean;
9+
}

0 commit comments

Comments
 (0)