NativeScript Yoonit Camera

A NativeScript plugin to provide:

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

Table Of Contents

• Installation
• Usage
  • VueJS Plugin
  • Vue Component
• API
  • Props
  • Methods
  • Events
  • Messages
• Contribute

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"
      initialLens="front"
      captureType="face"
      numberOfImages=10
      timeBetweenImages=500
      saveImageCaptured=true
      faceDetectionBox=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 }) {
        console.log('[YooCamera] doFaceDetected', `{x: ${x}, y: ${y}, width: ${width}, height: ${height}}`)
        if (!x || !y || !width || !height) {
          this.imagePath = null
        }
      },

      doImageCaptured({
        type,
        count,
        total,
        image: {
          path,
          source
        }
      }) {
        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}`
        }

        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

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.

Contributions are always welcome, some people that already contributed!

Code with ❤ by the Cyberlabs AI Front-End Team