Skip to content

Commit 19610b2

Browse files
TeruyaHaroldoTeruyaHaroldo
committed
npm publish
0 parents  commit 19610b2

19 files changed

+1863
-0
lines changed

‎.npmignore

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
demo/
2+
.idea/
3+
support/
4+
*.tar
5+
*.tgz
6+
.npmignore
7+
*.map
8+
*.ts
9+
!*.d.ts
10+
tsconfig.json
11+
scripts
12+
.DS_Store
13+
*.aar
14+
node_modules

‎README.md

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<img src="https://raw.githubusercontent.com/Yoonit-Labs/nativescript-yoonit-camera/development/logo_cyberlabs.png" width="300">
2+
3+
# NativeScript Yoonit Camera
4+
5+
![Generic badge](https://img.shields.io/badge/version-v1.2.0-<COLOR>.svg) ![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)
6+
7+
A NativeScript plugin to provide:
8+
- Modern Android Camera API (Camera X)
9+
- MLKit integration
10+
- Camera preview (Front & Back)
11+
- Face detection (With Min & Max size (Soon))
12+
- Landmark detection (Soon)
13+
- Face crop
14+
- Face capture
15+
- Frame capture
16+
- Face ROI (Soon)
17+
- QR Code scanning
18+
- Better props to setup the initialization your component
19+
20+
## Installation
21+
22+
```javascript
23+
npm i -s @yoonit/nativescript-camera
24+
```
25+
26+
## Usage
27+
28+
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).
29+
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+
@faceDetected="doFaceDetected"
50+
@faceImage="doImageCreated"
51+
@frameImage="doImageCreated"
52+
@endCapture="doEndCapture"
53+
@qrCodeContent="doQRCodeContent"
54+
@status="doStatus"
55+
@permissionDenied="doPermissionDenied"
56+
/>
57+
</Page>
58+
</template>
59+
60+
<script>
61+
export default {
62+
data: () => ({}),
63+
64+
methods: {
65+
async onLoaded(args) {
66+
console.log('[YooCamera] Getting Camera view')
67+
this.$yoo.camera.registerElement(this.$refs.yooCamera)
68+
69+
console.log('[YooCamera] Getting permission')
70+
if (await this.$yoo.camera.requestPermission()) {
71+
console.log('[YooCamera] Permission granted, start preview')
72+
73+
this.$yoo.camera.preview()
74+
}
75+
},
76+
77+
doFaceDetected({ faceDetected }) {
78+
console.log('[YooCamera] faceDetected', faceDetected)
79+
},
80+
81+
doImageCreated({
82+
count,
83+
total,
84+
image: {
85+
path,
86+
source
87+
}
88+
}) {
89+
if (total === 0) {
90+
console.log('[YooCamera] doFaceImage', `[${count}] ${path}`)
91+
} else {
92+
console.log('[YooCamera] doFaceImage', `[${count}] of [${total}] - ${path}`)
93+
}
94+
95+
console.log('[YooCamera] doFaceImage', path, source)
96+
},
97+
98+
doEndCapture() {
99+
console.log('[YooCamera] doEndCapture')
100+
},
101+
102+
doQRCodeContent({ content }) {
103+
console.log('[YooCamera] doQRCodeContent', content)
104+
},
105+
106+
doStatus({ status }) {
107+
console.log('[YooCamera] doStatus', JSON.parse(status))
108+
},
109+
110+
doToggleLens() {
111+
const currentCameraLens = this.$yoo.camera.getLens()
112+
113+
console.log('[YooCamera] doToggleLens', currentCameraLens)
114+
115+
this.$yoo.camera.toggleLens()
116+
},
117+
118+
doStartCapture(captureType) {
119+
console.log('[YooCamera] doStartCapture', captureType)
120+
121+
this.$yoo.camera.startCapture(captureType)
122+
},
123+
124+
doFaceDetectionBox(status) {
125+
console.log('[YooCamera] doFaceDetectionBox', status)
126+
127+
this.$yoo.camera.setFaceDetectionBox(status)
128+
},
129+
130+
doPermissionDenied() {
131+
console.log('[YooCamera] doPermissionDenied')
132+
}
133+
}
134+
}
135+
</script>
136+
```
137+
138+
## API
139+
140+
#### Methods
141+
142+
| Function | Parameters | Valid values | Return Type | Description
143+
| - | - | - | - | -
144+
| **`requestPermission`** | - | - | promise | Ask to user to give the permission to access camera.
145+
| **`hasPermission`** | - | - | boolean | Return if application has camera permission.
146+
| **`preview`** | - | - | void | Start camera preview if has permission.
147+
| **`startCapture`** | `captureType: string` | <ul><li>`"none"`</li><li>`"face"`</li><li>`"barcode"`</li><li>`"frame"`</li></ul> | void | Set capture type none, face, barcode or frame.
148+
| **`stopCapture`** | - | - | void | Stop any type of capture.
149+
| **`toggleLens`** | - | - | void | Set camera lens facing front or back.
150+
| **`getLens`** | - | - | number | Return `number` that represents lens face state: 0 for front 1 for back camera.
151+
| **`setFaceNumberOfImages`** | `faceNumberOfImages: number` | Any positive `number` value | void | Default value is 0. For value 0 is saved infinity images. When saved images reached the "face number os images", the `onEndCapture` is triggered.
152+
| **`setFaceDetectionBox`** | `faceDetectionBox: boolean` | `true` or `false` | void | Set to show face detection box when face detected.
153+
| **`setFaceTimeBetweenImages`** | `faceTimeBetweenImages: number` | Any positive `number` that represent time in milli seconds | void | Set saving face images time interval in milli seconds.
154+
| **`setFacePaddingPercent`** | `facePaddingPercent: number` | Any positive `number` value | void | Set face image and bounding box padding in percent.
155+
| **`setFaceImageSize`** | `faceImageSize: number` | Any positive `number` value | void | Set face image size to be saved.
156+
| **`setFrameNumberOfImages`** | `frameNumberOfImages: number` | Any positive `number` value | void | Default value is 0. For value 0 is saved infinity images. When saved images reached the "frame number os images", the `onEndCapture` is triggered.
157+
| **`setFrameTimeBetweenImages`** | `frameTimeBetweenImages: number` | Any positive `number` that represent time in milli seconds | void | Set saving frame images time interval in milli seconds.
158+
159+
160+
#### Events
161+
162+
| Event | Parameters | Description
163+
| - | - | -
164+
| faceImage | `{ count: number, total: number, image: object = { path: string, source: blob } }` | Must have started capture type of face. Emitted when the face image file is created: <ul><li>count: current index</li><li>total: total to create</li><li>image.path: the face image path</li><li>image.source: the blob file</li><ul>
165+
| frameImage | `{ count: number, total: number, image: object = { path: string, source: blob } }` | Must have started capture type of frame. Emitted when the frame image file is created: <ul><li>count: current index</li><li>total: total to create</li><li>image.path: the frame image path</li><li>image.source: the blob file</li><ul>
166+
| 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.
167+
| endCapture | - | Must have started capture type of face or frame. Emitted when the number of face or frame image files created is equal of the number of images set (see the method `setFaceNumberOfImages` for face and `setFrameNumberOfImages`for frame).
168+
| qrCodeContent | `{ content: string }` | Must have started capture type of barcode (see `startCapture`). Emitted when the camera scan a QR Code.
169+
| status | `{ type: 'error'/'message', status: string }` | Emit message error from native. Used more often for debug purpose.
170+
| permissionDenied | - | Emit when try to `preview` but there is not camera permission.
171+
172+
173+
## To contribute and make it better
174+
175+
Clone the repo, change what you want and send PR.
176+
177+
Contributions are always welcome!
178+
179+
---
180+
181+
Code with ❤ by the [**Cyberlabs AI**](https://cyberlabs.ai/) Front-End Team

0 commit comments

Comments
 (0)