[Android] Flashlight doesn't work with Barcode scanner #852

EddyVerbruggen · EddyVerbruggen · commit b92431e6daf5 · 2018-08-16T14:42:25.000+02:00
diff --git a/demo-ng/app/tabs/mlkit/abstract.mlkitview.component.ts b/demo-ng/app/tabs/mlkit/abstract.mlkitview.component.ts
@@ -0,0 +1,11 @@
+import { PropertyChangeData } from "tns-core-modules/data/observable";
+
+export abstract class AbstractMLKitViewComponent {
+  torchOn: boolean = false;
+
+  toggleTorch(args: PropertyChangeData): void {
+    if (args.value !== null && args.value !== this.torchOn) {
+      this.torchOn = args.value;
+    }
+  }
+}
diff --git a/demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.html b/demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.html
@@ -9,6 +9,7 @@
       formats="QR_CODE, EAN_8, EAN_13"
       android:processEveryNthFrame="5"
       ios:processEveryNthFrame="10"
+      [torchOn]="torchOn"
       (scanResult)="onBarcodeScanResult($event)">
   </MLKitBarcodeScanner>
 
@@ -45,4 +46,10 @@
       </ng-template>
     </ListView>
   </GridLayout>
+
+  <GridLayout rows="auto" columns="auto, auto" horizontalAlignment="right" class="m-t-4 m-r-8">
+    <Label col="0" text="Torch" class="c-white" [class.disabled]="!torchOn"></Label>
+    <Switch col="1" [checked]="torchOn" (checkedChange)="toggleTorch($event)"></Switch>
+  </GridLayout>
+
 </GridLayout>
diff --git a/demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.ts b/demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.ts
@@ -1,17 +1,24 @@
 import { Component } from "@angular/core";
 import { MLKitScanBarcodesOnDeviceResult } from "nativescript-plugin-firebase/mlkit/barcodescanning";
+import { AbstractMLKitViewComponent } from "~/tabs/mlkit/abstract.mlkitview.component";
 
 @Component({
   selector: "mlkit-barcodescanning",
   moduleId: module.id,
   templateUrl: "./barcodescanning.component.html",
 })
-export class BarcodeScanningComponent {
+export class BarcodeScanningComponent extends AbstractMLKitViewComponent {
   barcodes: Array<{
     value: string;
     format: string;
   }>;
 
+  constructor() {
+    super();
+    // let's start with the torch on, just for show
+    this.torchOn = true;
+  }
+
   onBarcodeScanResult(event: any): void {
     const result: MLKitScanBarcodesOnDeviceResult = event.value;
     this.barcodes = result.barcodes;
diff --git a/demo-ng/app/tabs/mlkit/facedetection/facedetection.component.html b/demo-ng/app/tabs/mlkit/facedetection/facedetection.component.html
@@ -11,6 +11,7 @@
         enableFaceTracking="true"
         minimumFaceSize="0.2"
         modeType="accurate"
+        [torchOn]="torchOn"
         (scanResult)="onFaceDetectionResult($event)">
     </MLKitFaceDetection>
 
@@ -59,4 +60,10 @@
       </GridLayout>
     </ng-template>
   </ListView>
+
+  <GridLayout rows="auto" columns="auto, auto" horizontalAlignment="right" class="m-t-4 m-r-8">
+    <Label col="0" text="Torch" class="c-white" [class.disabled]="!torchOn"></Label>
+    <Switch col="1" [checked]="torchOn" (checkedChange)="toggleTorch($event)"></Switch>
+  </GridLayout>
+
 </GridLayout>
diff --git a/demo-ng/app/tabs/mlkit/facedetection/facedetection.component.ts b/demo-ng/app/tabs/mlkit/facedetection/facedetection.component.ts
@@ -1,12 +1,13 @@
 import { Component } from "@angular/core";
 import { MLKitDetectFacesOnDeviceResult, MLKitDetectFacesResultFace } from "nativescript-plugin-firebase/mlkit/facedetection";
+import { AbstractMLKitViewComponent } from "~/tabs/mlkit/abstract.mlkitview.component";
 
 @Component({
   selector: "mlkit-facedetection",
   moduleId: module.id,
   templateUrl: "./facedetection.component.html",
 })
-export class FaceDetectionComponent {
+export class FaceDetectionComponent extends AbstractMLKitViewComponent {
   faces: Array<MLKitDetectFacesResultFace>;
 
   mlKitAllOK: string;
diff --git a/demo-ng/app/tabs/mlkit/imagelabeling/imagelabeling.component.html b/demo-ng/app/tabs/mlkit/imagelabeling/imagelabeling.component.html
@@ -42,4 +42,10 @@
       </ng-template>
     </ListView>
   </GridLayout>
+
+  <GridLayout rows="auto" columns="auto, auto" horizontalAlignment="right" class="m-t-4 m-r-8">
+    <Label col="0" text="Torch" class="c-white" [class.disabled]="!torchOn"></Label>
+    <Switch col="1" [checked]="torchOn" (checkedChange)="toggleTorch($event)"></Switch>
+  </GridLayout>
+
 </GridLayout>
diff --git a/demo-ng/app/tabs/mlkit/imagelabeling/imagelabeling.component.ts b/demo-ng/app/tabs/mlkit/imagelabeling/imagelabeling.component.ts
@@ -1,12 +1,13 @@
 import { Component } from "@angular/core";
 import { MLKitImageLabelingOnDeviceResult } from "nativescript-plugin-firebase/mlkit/imagelabeling";
+import { AbstractMLKitViewComponent } from "~/tabs/mlkit/abstract.mlkitview.component";
 
 @Component({
   selector: "mlkit-imagelabeling",
   moduleId: module.id,
   templateUrl: "./imagelabeling.component.html",
 })
-export class ImageLabelingComponent {
+export class ImageLabelingComponent extends AbstractMLKitViewComponent {
   labels: Array<{
     text: string;
     confidence: number;
diff --git a/demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.html b/demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.html
@@ -6,6 +6,7 @@
   <MLKitTextRecognition
       width="100%"
       height="100%"
+      [torchOn]="torchOn"
       (scanResult)="onTextRecognitionResult($event)">
   </MLKitTextRecognition>
 
@@ -38,4 +39,10 @@
       </ng-template>
     </ListView>
   </GridLayout>
+
+  <GridLayout rows="auto" columns="auto, auto" horizontalAlignment="right" class="m-t-4 m-r-8">
+    <Label col="0" text="Torch" class="c-white" [class.disabled]="!torchOn"></Label>
+    <Switch col="1" [checked]="torchOn" (checkedChange)="toggleTorch($event)"></Switch>
+  </GridLayout>
+
 </GridLayout>
diff --git a/demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.ts b/demo-ng/app/tabs/mlkit/textrecognition/textrecognition.component.ts
@@ -3,13 +3,14 @@ import {
   MLKitRecognizeTextResult,
   MLKitRecognizeTextResultBlock
 } from "nativescript-plugin-firebase/mlkit/textrecognition";
+import { AbstractMLKitViewComponent } from "~/tabs/mlkit/abstract.mlkitview.component";
 
 @Component({
   selector: "mlkit-textrecognition",
   moduleId: module.id,
   templateUrl: "./textrecognition.component.html",
 })
-export class TextRecognitionComponent {
+export class TextRecognitionComponent extends AbstractMLKitViewComponent {
   blocks: Array<MLKitRecognizeTextResultBlock>;
 
   onTextRecognitionResult(scanResult: any): void {
diff --git a/docs/ML_KIT.md b/docs/ML_KIT.md
@@ -120,11 +120,11 @@ The exact details of using the live camera view depend on whether or not you're
 You can use any view-related property you like as we're extending `ContentView`.
 So things like `class`, `row`, `width`, `horizontalAlignment`, `style` are all valid properties.
 
-Plugin-specific are the optional property `processEveryNthFrame` and optional event `scanResult`.
+Plugin-specific are the optional properties `processEveryNthFrame` and `torchOn`, and optional event `scanResult`.
 You can `processEveryNthFrame` set to a lower value than the default (5) to put less strain on the device.
 Especially 'Face detection' seems a bit more CPU intensive, but for 'Text recognition' the default is fine.
 
-> Look at [the demo app](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/tree/master/demo-ng) to see how to wire up that `onTextRecognitionResult` function. 
+> Look at [the demo app](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/tree/master/demo-ng) to see how to wire up that `onTextRecognitionResult` function, and how to wire `torchOn` to a `Switch`. 
 
 ##### Angular / Vue
 Register a custom element like so in the component/module:
@@ -142,6 +142,7 @@ Now you're able to use the registered element in the view:
     width="260"
     height="380"
     processEveryNthFrame="10"
+    [torchOn]="torchOn"
     (scanResult)="onTextRecognitionResult($event)">
 </MLKitTextRecognition>
 ```
@@ -202,6 +203,7 @@ registerElement("MLKitFaceDetection", () => require("nativescript-plugin-firebas
     detectionMode="accurate"
     enableFaceTracking="true"
     minimumFaceSize="0.2"
+    [torchOn]="torchOn"
     (scanResult)="onFaceDetectionResult($event)">
 </MLKitFaceDetection>
 ```
@@ -238,6 +240,7 @@ registerElement("MLKitBarcodeScanner", () => require("nativescript-plugin-fireba
     width="260"
     height="380"
     formats="QR_CODE, EAN_8, EAN_13"
+    [torchOn]="torchOn"
     (scanResult)="onBarcodeScanningResult($event)">
 </MLKitBarcodeScanner>
 ```
@@ -289,6 +292,7 @@ registerElement("MLKitImageLabeling", () => require("nativescript-plugin-firebas
     width="260"
     height="380"
     confidenceThreshold="0.6"
+    [torchOn]="torchOn"
     (scanResult)="onImageLabelingResult($event)">
 </MLKitImageLabeling>
 ```
diff --git a/src/mlkit/mlkit-cameraview-common.ts b/src/mlkit/mlkit-cameraview-common.ts
@@ -13,13 +13,20 @@ export const preferFrontCameraProperty = new Property<MLKitCameraView, boolean>(
   valueConverter: booleanConverter
 });
 
+export const torchOnProperty = new Property<MLKitCameraView, boolean>({
+  name: "torchOn",
+  defaultValue: false,
+  valueConverter: booleanConverter
+});
+
 export abstract class MLKitCameraView extends ContentView {
   static scanResultEvent: string = "scanResult";
 
   protected lastVisionImage;
 
   protected processEveryNthFrame: number;
   protected preferFrontCamera: boolean;
+  protected torchOn: boolean;
 
   [processEveryNthFrameProperty.setNative](value: number) {
     this.processEveryNthFrame = value;
@@ -28,7 +35,17 @@ export abstract class MLKitCameraView extends ContentView {
   [preferFrontCameraProperty.setNative](value: boolean) {
     this.preferFrontCamera = value;
   }
+
+  [torchOnProperty.setNative](value: boolean) {
+    this.torchOn = value;
+    this.updateTorch();
+  }
+
+  protected updateTorch(): void {
+    // implemented in concrete classes
+  };
 }
 
 processEveryNthFrameProperty.register(MLKitCameraView);
 preferFrontCameraProperty.register(MLKitCameraView);
+torchOnProperty.register(MLKitCameraView);
diff --git a/src/mlkit/mlkit-cameraview.android.ts b/src/mlkit/mlkit-cameraview.android.ts
@@ -145,7 +145,10 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
         parameters.setFocusMode(android.hardware.Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO);
       }
 
-      // TODO this setter seems odd, but it's part of the example: https://github.com/firebase/quickstart-android/blob/0f4c86877fc5f771cac95797dffa8bd026dd9dc7/mlkit/app/src/main/java/com/google/firebase/samples/apps/mlkit/CameraSource.java#L312
+      if (this.torchOn) {
+        parameters.setFlashMode(android.hardware.Camera.Parameters.FLASH_MODE_TORCH);
+      }
+
       this.camera.setParameters(parameters);
 
       this.detector = this.createDetector();
@@ -210,6 +213,14 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
     }, 500); // TODO 500 works fine on my device, but would be wise to explore the boundaries
   }
 
+  protected updateTorch(): void {
+    if (this.camera) {
+      const parameters = this.camera.getParameters();
+      parameters.setFlashMode(this.torchOn ? android.hardware.Camera.Parameters.FLASH_MODE_TORCH : android.hardware.Camera.Parameters.FLASH_MODE_OFF);
+      this.camera.setParameters(parameters);
+    }
+  }
+
   protected abstract createDetector(): any;
 
   protected abstract createSuccessListener(): any;
diff --git a/src/mlkit/mlkit-cameraview.ios.ts b/src/mlkit/mlkit-cameraview.ios.ts
@@ -54,6 +54,10 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
         AVCaptureDevicePosition.Back
     ).devices.firstObject;
 
+    if (this.torchOn) {
+      this.updateTorch();
+    }
+
     // begin the session
     this.captureSession = AVCaptureSession.new();
     this.captureSession.sessionPreset = AVCaptureSessionPreset640x480;
@@ -137,6 +141,20 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
     }
   }
 
+  protected updateTorch(): void {
+    const device = this.captureDevice;
+    if (device && device.lockForConfiguration()) {
+      if (this.torchOn) {
+        device.torchMode = AVCaptureTorchMode.On;
+        device.flashMode = AVCaptureFlashMode.On;
+      } else {
+        device.torchMode = AVCaptureTorchMode.Off;
+        device.flashMode = AVCaptureFlashMode.Off;
+      }
+      device.unlockForConfiguration();
+    }
+  }
+
   abstract createDetector(): any;
 
   abstract createSuccessListener(): any;
