|
| 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 | +   |
| 6 | + |
| 7 | +   |
| 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 |
0 commit comments