Skip to content

Commit a7a1465

Browse files
TeruyaHaroldoTeruyaHaroldo
committed
npm publish
0 parents  commit a7a1465

19 files changed

+1778
-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: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
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.1.2-<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 (Soon)
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="doFaceImage"
51+
@endCapture="doEndCapture"
52+
@qrCodeContent="doQRCodeContent"
53+
@status="doStatus"
54+
@permissionDenied="doPermissionDenied"
55+
/>
56+
</Page>
57+
</template>
58+
59+
<script>
60+
export default {
61+
data: () => ({}),
62+
63+
methods: {
64+
async onLoaded(args) {
65+
console.log('[YooCamera] Getting Camera view')
66+
this.$yoo.camera.registerElement(this.$refs.yooCamera)
67+
68+
console.log('[YooCamera] Getting permission')
69+
if (await this.$yoo.camera.requestPermission()) {
70+
console.log('[YooCamera] Permission granted, start preview')
71+
72+
this.$yoo.camera.preview()
73+
}
74+
},
75+
76+
doFaceDetected({ faceDetected }) {
77+
console.log('[YooCamera] faceDetected', faceDetected)
78+
},
79+
80+
doFaceImage({
81+
count,
82+
total,
83+
image: {
84+
path,
85+
source
86+
}
87+
}) {
88+
if (total !== 0) {
89+
console.log('[YooCamera] doFaceImage', `[${count}] of [${total}] - ${path}`)
90+
} else {
91+
console.log('[YooCamera] doFaceImage', `[${count}] ${path}`)
92+
}
93+
94+
console.log('[YooCamera] doFaceImage', path, source)
95+
},
96+
97+
doEndCapture() {
98+
console.log('[YooCamera] doEndCapture')
99+
},
100+
101+
doQRCodeContent({ content }) {
102+
console.log('[YooCamera] doQRCodeContent', content)
103+
},
104+
105+
doStatus({ status }) {
106+
console.log('[YooCamera] doStatus', JSON.parse(status))
107+
},
108+
109+
doToggleLens() {
110+
const currentCameraLens = this.$yoo.camera.getLens()
111+
112+
console.log('[YooCamera] doToggleLens', currentCameraLens)
113+
114+
this.$yoo.camera.toggleLens()
115+
},
116+
117+
doStartCapture(captureType) {
118+
console.log('[YooCamera] doStartCapture', captureType)
119+
120+
this.$yoo.camera.startCapture(captureType)
121+
},
122+
123+
doFaceDetectionBox(status) {
124+
console.log('[YooCamera] doFaceDetectionBox', status)
125+
126+
this.$yoo.camera.setFaceDetectionBox(status)
127+
},
128+
129+
doPermissionDenied() {
130+
console.log('[YooCamera] doPermissionDenied')
131+
}
132+
}
133+
}
134+
</script>
135+
```
136+
137+
## API
138+
139+
#### Methods
140+
141+
| Function | Parameters | Valid values | Return Type | Description
142+
|- | - | - | - | -
143+
| **`requestPermission`** | - | - | promise | Ask to user to give the permission to access camera.
144+
| **`hasPermission`** | - | - | boolean | Return if application has camera permission.
145+
| **`preview`** | - | - | void | Start camera preview if has permission.
146+
| **`startCapture`** | `captureType: string` | <ul><li>`"none"`</li><li>`"face"`</li><li>`"barcode"`</li></ul> | void | Set capture type none, face or barcode.
147+
| **`stopCapture`** | - | - | void | Stop any type of capture.
148+
| **`toggleLens`** | - | - | void | Set camera lens facing front or back.
149+
| **`getLens`** | - | - | number | Return `number` that represents lens face state: 0 for front 1 for back camera.
150+
| **`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.
151+
| **`setFaceDetectionBox`** |`faceDetectionBox: boolean` | `true` or `false` | void | Set to show face detection box when face detected.
152+
| **`setFaceTimeBetweenImages`** | `faceTimeBetweenImages: number` | Any positive `number` that represent time in milli seconds | void | Set saving face images time interval in milli seconds.
153+
| **`setFacePaddingPercent`** | `facePaddingPercent: number` | Any positive `number` value | void | Set face image and bounding box padding in percent.
154+
| **`setFaceImageSize`** | `faceImageSize: number` | Any positive `number` value | void | Set face image size to be saved.
155+
156+
157+
#### Events
158+
159+
| Event | Parameters | Description
160+
| - | - | -
161+
| 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>
162+
| 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.
163+
| endCapture | - | Must have started capture type of face. Emitted when the number of face image files created is equal of the number of images set (see the method `setFaceNumberOfImages`).
164+
| qrCodeContent | `{ content: string }` | Must have started capture type of barcode (see `startCapture`). Emitted when the camera scan a QR Code.
165+
| status | `{ type: 'error'/'message', status: string }` | Emit message error from native. Used more often for debug purpose.
166+
| permissionDenied | - | Emit when try to `preview` but there is not camera permission.
167+
168+
169+
## To contribute and make it better
170+
171+
Clone the repo, change what you want and send PR.
172+
173+
Contributions are always welcome!
174+
175+
---
176+
177+
Code with ❤ by the [**Cyberlabs AI**](https://cyberlabs.ai/) Front-End Team

0 commit comments

Comments
 (0)