@yoonit/nativescript-camera

v3.2.1

Published

3 years ago

Yoonit Camera have a custom view that shows a preview layer of the front/back camera and detects human faces in it and read qr code.

Downloads

NativeScript Yoonit Camera

A NativeScript plugin to provide:

Modern Android Camera API Camera X
Camera preview (Front & Back)
PyTorch integration (Android)
Computer vision pipeline
Face detection, capture and image crop
Understanding of the human face
Frame capture
Capture timed images
QR Code scanning

More about...
The plugin's core is the native layer. Every change in the native layer, reflects here. This plugin, the Yoonit Camera, we can say that is an aggregation of many Yoonit's native libs:
Android Yoonit Camera: Android core camera lib;
iOS Yoonit Camera: iOS core camera lib;
Android Yoonit Facefy: Android face detection and analysis;
iOS Yoonit Facefy: iOS face detection and analysis;
All this native libs can be used independently.

Installation

npm i -s @yoonit/nativescript-camera

Usage

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, Events or the Demo Vue.

VueJS Plugin

main.js

import Vue from 'nativescript-vue'  
import YoonitCamera from '@yoonit/nativescript-camera/vue'  
  
Vue.use(YoonitCamera)

After that, you can access the camera object in your entire project using this.$yoo.camera

Vue Component

App.vue

<template>
  <Page @loaded="onLoaded">
    <YoonitCamera
      ref="yooCamera"
      lens="front"
      captureType="face"
      imageCapture=true
      imageCaptureAmount=10
      imageCaptureInterval=500
      detectionBox=true
      @faceDetected="doFaceDetected"
      @imageCaptured="doImageCaptured"
      @endCapture="doEndCapture"
      @qrCodeContent="doQRCodeContent"
      @status="doStatus"
      @permissionDenied="doPermissionDenied"
    />
  </Page>
</template>

<script>
  export default {
    data: () => ({}),

    methods: {
      async onLoaded() {

        console.log('[YooCamera] Getting Camera view')
        this.$yoo.camera.registerElement(this.$refs.yooCamera)

        console.log('[YooCamera] Getting permission')
        if (await this.$yoo.camera.requestPermission()) {
          
          console.log('[YooCamera] Permission granted, start preview')
          this.$yoo.camera.preview()
        }
      },

      doFaceDetected({ 
        x, 
        y, 
        width, 
        height,
        leftEyeOpenProbability,
        rightEyeOpenProbability,
        smilingProbability,
        headEulerAngleX,
        headEulerAngleY,
        headEulerAngleZ
      }) {
        console.log(
          '[YooCamera] doFaceDetected',
          `
          x: ${x}
          y: ${y}
          width: ${width}
          height: ${height}
          leftEyeOpenProbability: ${leftEyeOpenProbability}
          rightEyeOpenProbability: ${rightEyeOpenProbability}
          smilingProbability: ${smilingProbability}
          headEulerAngleX: ${headEulerAngleX}
          headEulerAngleY: ${headEulerAngleY}
          headEulerAngleZ: ${headEulerAngleZ}
          `
        )
        if (!x || !y || !width || !height) {
          this.imagePath = null
        }
      },

      doImageCaptured({
        type,
        count,
        total,
        image: {
          path,
          source
        },
        inferences,
        darkness,
        lightness,
        sharpness
      }) {
        if (total === 0) {
          console.log('[YooCamera] doImageCreated', `${type}: [${count}] ${path}`)
          this.imageCreated = `${count}`
        } else {
          console.log('[YooCamera] doImageCreated', `${type}: [${count}] of [${total}] - ${path}`)
          this.imageCreated = `${count} de ${total}`
        }
        console.log('[YooCamera] Mask Pytorch', inferences)
        
        console.log('[YooCamera] Image Quality Darkness:', darkness)
        console.log('[YooCamera] Image Quality Lightness', lightness)
        console.log('[YooCamera] Image Quality Sharpness', sharpness)
        this.imagePath = source
      },

      doEndCapture() {
        console.log('[YooCamera] doEndCapture')
      },

      doQRCodeContent({ content }) {
        console.log('[YooCamera] doQRCodeContent', content)
      },

      doStatus({ status }) {
        console.log('[YooCamera] doStatus', status)
      },

      doPermissionDenied() {
        console.log('[YooCamera] doPermissionDenied')
      }
    }
  }
</script>

API

Props

Methods

Events

| Event | Parameters | Description
| - | - | -
| imageCaptured | { type: string, count: number, total: number, image: object = { path: string, source: any, binary: any }, inferences: [{ ['model name']: model output }], darkness: number, lightness: number, sharpness: number } | Must have started capture type of face/frame. Emitted when the face image file saved: type: "face" or "frame"count: current indextotal: total to createimage.path: the face/frame image pathimage.source: the blob fileimage.binary: the blob fileinferences: An Array with models outputdarkness: image darkness classification.lightness: image lightness classification.sharpness: image sharpness classification.
| faceDetected | { x: number, y: number, width: number, height: number, leftEyeOpenProbability: number, rightEyeOpenProbability: number, smilingProbability: number, headEulerAngleX: number, headEulerAngleY: number, headEulerAngleZ: number } | Must have started capture type of face. Emit the face analysis, all parameters are null if no more face detecting.
| 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 setImageCaptureAmount).
| qrCodeContent | { content: string } | Must have started capture type of qrcode (see startCapture). Emitted when the camera read a QR Code.
| status | { type: 'error'/'message', status: string } | Emit message error from native. Used more often for debug purpose.
| permissionDenied | - | Emit when try to preview but there is no camera permission.

Face Analysis

The face analysis is the response send by the onFaceDetected. Here we specify all the parameters.

Head Movements

Here we're explaining the above gif and how reached the "results". Each "movement" (vertical, horizontal and tilt) is a state, based in the angle in degrees that indicate head direction;

Image Quality

The image quality is the classification of the three attributes: darkness, lightness and sharpness. Result available in the imageCapture event. Let's see each parameter specifications:

Messages

Pre-define message constants used by the status event.

Contribute and make it better

Clone the repo, change what you want and send PR.

For commit messages we use Conventional Commits.

Contributions are always welcome, some people that already contributed!

Code with ❤ by the Cyberlabs AI Front-End Team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme