8.7 发布—WinterCG 兼容性第一部分
了解更多

在 GitHub 上查看

@nativescript/mlkit-core

提供一个 UI 组件以访问 Google ML Kit SDK 的各种功能的插件。

内容

安装

cli
npm install @nativescript/mlkit-core

使用 @nativescript/mlkit-core

@nativescript/mlkit-core 的使用具有以下流程

  1. 在您的标记中注册并添加 MLKitView

  2. 设置 detectionType 并监听 detection 事件。

要一次性访问所有视觉 API,请将 detectionType 属性设置为 'all',并在 detection 事件的处理程序中识别它们。

要访问特定 API(例如条形码扫描),请将 detectionType 属性设置为 API 名称('barcode' 用于条形码扫描),并导入该 API 的 NativeScript 插件(@nativescript/mlkit-barcode-scanning)。

  1. 检查 ML Kit 是否受支持 要验证设备是否支持 ML Kit,请在 MLKitView 类 上调用静态 isAvailable() 方法。
ts
if (MLKitView.isAvailable()) {
}
  1. 通过调用 requestCameraPermission() 请求访问设备相机的权限
ts
mlKitView.requestCameraPermission().then(() => {})

以下是注册和使用 MLKitView 的不同 JS 语言示例。

核心

  1. 通过将 xmlns:ui="@nativescript/mlkit-core" 添加到 Page 元素来注册 MLKitView

  2. 使用 ui 前缀从插件访问 MLKitView

xml
<ui:MLKitView
  cameraPosition="back"
   detectionType="all"
   detection="onDetection"
/>

Angular

  1. 在 Angular 中,通过将 MLKitModule 添加到您要使用 MLKitView 的组件的 NgModule 来注册 MLKitView
ts
import { MLKitModule } from '@nativescript/mlkit-core/angular';

@NgModule({
    imports: [
    MLKitModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
  1. 在标记中使用 MLKitView
html
<MLKitView
  cameraPosition="back"
  detectionType="all"
  (detection)="onDetection($event)"
></MLKitView>

Vue

  1. 要使用 MLKitView,请通过将其传递给应用程序实例的 use 方法,在 app.ts 中注册它。
ts
import { createApp } from 'nativescript-vue'

import MLKit from '@nativescript/mlkit-core/vue'
import Home from './components/Home.vue'

const app = createApp(Home)

app.use(MLKit)
  1. 在标记中使用 MLKitView
html
<MLKitView cameraPosition="back" detectionType="all" @detection="onDetection" />

视觉 API 可选模块

重要

检测仅适用于已安装的可选模块

条形码扫描

cli
npm i @nativescript/mlkit-barcode-scanning
ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { BarcodeResult } from '@nativescript/mlkit-barcode-scanning';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Barcode){
        const barcode: BarcodeResult[] = event.data;
    }
}

有关更多详细信息,请参阅 @nativescript/mlkit-barcode-scanning

人脸检测

cli
npm install @nativescript/mlkit-face-detection
ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { FaceResult } from '@nativescript/mlkit-face-detection';

onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Face){
        const faces: FaceResult[] = event.data;
    }
}

有关更多详细信息,请参阅 @nativescript/mlkit-face-detection

图像标注

cli
npm install @nativescript/mlkit-image-labeling
ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { ImageLabelingResult } from '@nativescript/mlkit-image-labeling';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Image){
        const labels: ImageLabelingResult[] = event.data;
    }
}

有关更多详细信息,请参阅 nativescript/mlkit-image-labeling

物体检测

cli
npm install @nativescript/mlkit-object-detection
ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { ObjectResult } from '@nativescript/mlkit-object-detection'
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Object){
        const objects: ObjectResult[] = event.data;
    }
}

有关更多详细信息,请参阅 @nativescript/mlkit-object-detection

姿势检测

cli
npm install @nativescript/mlkit-pose-detection
ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { PoseResult } from '@nativescript/mlkit-pose-detection';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Pose){
        const poses: PoseResult = event.data;
    }
}

有关更多详细信息,请参阅 @nativescript/mlkit-pose-detection

文本识别

cli
npm install @nativescript/mlkit-text-recognition
ts
import { DetectionType, DetectionEvent } from '@nativescript/mlkit-core';
import { TextResult } from '@nativescript/mlkit-text-recognition';
onDetection(event: DetectionEvent){
    if(event.type === DetectionType.Text){
        const text: TextResult = event.data;
    }
}

有关更多详细信息,请参阅 @nativescript/mlkit-text-recognition

API

detectWithStillImage()

ts
import { DetectionType, detectWithStillImage } from "@nativescript/mlkit-core";

async processStill(args) {
        try {

            result: { [key: string]: any } = await detectWithStillImage(image: ImageSource, options)
        } catch (e) {
            console.log(e);
        }
    }

从静止图像(而不是使用相机)检测条形码、姿势等。

MLKitView 类

MLKitView 类提供用于检测的相机视图。

它具有以下成员。

属性

属性类型
detectionEventstring
cameraPositionCameraPosition
detectionTypeDetectionType
barcodeFormatsBarcodeFormats
faceDetectionPerformanceModeFaceDetectionPerformanceMode
faceDetectionTrackingEnabledboolean
faceDetectionMinFaceSizenumber
imageLabelerConfidenceThresholdnumber
objectDetectionMultipleboolean
objectDetectionClassifyboolean
torchOnboolean
pauseboolean
processEveryNthFramenumber
readonly latestImage?ImageSource
retrieveLatestImageboolean

方法

方法返回值描述
isAvailable()boolean一个用于检查设备是否支持 ML Kit 的静态方法。
stopPreview()void
startPreview()void
toggleCamera()void
requestCameraPermission()Promise<void>
hasCameraPermission()boolean
on()void

StillImageDetectionOptions 接口

ts
interface StillImageDetectionOptions {
  detectorType: DetectionType

  barcodeScanning?: {
    barcodeFormat?: [BarcodeFormats]
  }
  faceDetection?: {
    faceTracking?: boolean
    minimumFaceSize: ?number
    detectionMode?: 'fast' | 'accurate'
    landmarkMode?: 'all' | 'none'
    contourMode?: 'all' | 'none'
    classificationMode?: 'all' | 'none'
  }
  imageLabeling?: {
    confidenceThreshold?: number
  }
  objectDetection?: {
    multiple: boolean
    classification: boolean
  }
  selfieSegmentation?: {
    enableRawSizeMask?: boolean
    smoothingRatio?: number
  }
}

枚举

DetectionType

ts
export enum DetectionType {
  Barcode = 'barcode',
  DigitalInk = 'digitalInk',
  Face = 'face',
  Image = 'image',
  Object = 'object',
  Pose = 'pose',
  Text = 'text',
  All = 'all',
  Selfie = 'selfie',
  None = 'none',
}

CameraPosition

ts
export enum CameraPosition {
  FRONT = 'front',
  BACK = 'back',
}

BarcodeFormats

ts
export enum BarcodeFormats {
  ALL = 'all',
  CODE_128 = 'code_128',
  CODE_39 = 'code_39',
  CODE_93 = 'code_93',
  CODABAR = 'codabar',
  DATA_MATRIX = 'data_matrix',
  EAN_13 = 'ean_13',
  EAN_8 = 'ean_8',
  ITF = 'itf',
  QR_CODE = 'qr_code',
  UPC_A = 'upc_a',
  UPC_E = 'upc_e',
  PDF417 = 'pdf417',
  AZTEC = 'aztec',
  UNKOWN = 'unknown',
}

FaceDetectionPerformanceMode

ts
export enum FaceDetectionPerformanceMode {
  Fast = 'fast',
  Accurate = 'accurate',
}

许可

Apache 许可证版本 2.0