Stop barcode scanner after first set of scanned images received #828

Author: EddyVerbruggen

CHANGELOG.md

@@ -3,6 +3,10 @@
 [Firebase iOS SDK Changelog](https://firebase.google.com/support/release-notes/ios)
 [Firebase Android SDK Changelog](https://firebase.google.com/support/release-notes/android)
 
+## 7.2.0 (2018, October 19)
+[Fixes & Enhancements](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/milestone/79?closed=1)
+
+
 ## 7.1.6 (2018, October 12)
 [Fixes & Enhancements](https://github.com/EddyVerbruggen/nativescript-plugin-firebase/milestone/78?closed=1)
 

demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.html

@@ -10,6 +10,7 @@
       android:processEveryNthFrame="5"
       ios:processEveryNthFrame="10"
       [torchOn]="torchOn"
+      [pause]="pause"
       (scanResult)="onBarcodeScanResult($event)">
   </MLKitBarcodeScanner>
 
@@ -36,7 +37,7 @@
         <Label height="1" marginBottom="1" borderBottomWidth="1" borderColor="rgba(81, 184, 237, 1)"></Label>
       </StackLayout>
     </GridLayout>
-    <Label row="0" col="1" class="text-center c-white" textWrap="true" verticalAlignment="center" text="The scanner has been configured to detect QR codes, EAN 8 and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin."></Label>
+    <Label row="0" col="1" class="text-center c-white" textWrap="true" verticalAlignment="center" text="The scanner has been configured to detect QR codes, EAN 8 and EAN 13. It processes every 5th frame (default 10). These settings can be tweaked in your usage of the plugin. Oh, and we briefly pause the scanner after every scan, just for show."></Label>
     <ListView row="2" col="0" colSpan="3" [items]="barcodes" class="m-t-20" backgroundColor="transparent">
       <ng-template let-item="item">
         <GridLayout columns="2*, 3*">

demo-ng/app/tabs/mlkit/barcodescanning/barcodescanning.component.ts

@@ -13,9 +13,18 @@ export class BarcodeScanningComponent extends AbstractMLKitViewComponent {
     format: string;
   }>;
 
+  pause: boolean = false;
+
   onBarcodeScanResult(event: any): void {
     const result: MLKitScanBarcodesOnDeviceResult = event.value;
     this.barcodes = result.barcodes;
+
     console.log("this.barcodes: " + JSON.stringify(this.barcodes));
+
+    if (this.barcodes.length > 0) {
+      console.log("pausing the scanner for 3 seconds (to test the 'pause' feature)");
+      this.pause = true;
+      setTimeout(() => this.pause = false, 3000)
+    }
   }
 }

demo-ng/package.json

@@ -25,6 +25,7 @@
     "nativescript-angular": "^6.1.0",
     "nativescript-camera": "^4.0.2",
     "nativescript-imagepicker": "~6.0.4",
+    "nativescript-plugin-firebase": "file:../publish/package/nativescript-plugin-firebase-7.2.0.tgz",
     "nativescript-theme-core": "~1.0.4",
     "reflect-metadata": "~0.1.10",
     "rxjs": "~6.0.0 || >=6.1.0",
@@ -42,4 +43,4 @@
     "nativescript-dev-webpack": "^0.15.1",
     "typescript": "~2.7.2"
   }
-}
+}

docs/ML_KIT.md

@@ -118,11 +118,14 @@ 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 properties `processEveryNthFrame`, `preferFrontCamera` (default `false`), and `torchOn`, and the optional `scanResult` event.
+Plugin-specific are the optional properties `processEveryNthFrame`, `preferFrontCamera` (default `false`), `torchOn`, and `pause`, as well as the optional `scanResult` event.
 
 You can set `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.
 
+If you don't destroy the scanner page/modal but instead briefly want to hide it (but keep it alive),
+you can pause the scanner with the `pause` property.
+
 > 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
@@ -142,6 +145,7 @@ Now you're able to use the registered element in the view:
     height="380"
     processEveryNthFrame="10"
     preferFrontCamera="false"
+    [pause]="pause"
     [torchOn]="torchOn"
     (scanResult)="onTextRecognitionResult($event)">
 </MLKitTextRecognition>
@@ -161,6 +165,7 @@ Declare a namespace at the top of the embedding page, and use it anywhere on the
       height="380"
       processEveryNthFrame="3"
       preferFrontCamera="false"
+      pause="{{ pause }}"
       scanResult="onTextRecognitionResult" />
 
 </Page>

src/mlkit/mlkit-cameraview-common.ts

@@ -19,6 +19,12 @@ export const torchOnProperty = new Property<MLKitCameraView, boolean>({
   valueConverter: booleanConverter
 });
 
+export const pauseProperty = new Property<MLKitCameraView, boolean>({
+  name: "pause",
+  defaultValue: false,
+  valueConverter: booleanConverter
+});
+
 export abstract class MLKitCameraView extends ContentView {
   static scanResultEvent: string = "scanResult";
 
@@ -27,6 +33,7 @@ export abstract class MLKitCameraView extends ContentView {
   protected processEveryNthFrame: number;
   protected preferFrontCamera: boolean;
   protected torchOn: boolean;
+  protected pause: boolean;
 
   [processEveryNthFrameProperty.setNative](value: number) {
     this.processEveryNthFrame = value;
@@ -41,11 +48,25 @@ export abstract class MLKitCameraView extends ContentView {
     this.updateTorch();
   }
 
+  [pauseProperty.setNative](value: boolean) {
+    this.pause = value;
+    this.pause ? this.pauseScanning() : this.resumeScanning();
+  }
+
   protected updateTorch(): void {
     // implemented in concrete classes
   };
+
+  protected pauseScanning(): void {
+    // implemented in concrete classes
+  };
+
+  protected resumeScanning(): void {
+    // implemented in concrete classes
+  }
 }
 
 processEveryNthFrameProperty.register(MLKitCameraView);
 preferFrontCameraProperty.register(MLKitCameraView);
 torchOnProperty.register(MLKitCameraView);
+pauseProperty.register(MLKitCameraView);

src/mlkit/mlkit-cameraview.android.ts

@@ -219,7 +219,10 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
       this.camera.addCallbackBuffer(this.createPreviewBuffer(previewSize));
 
       this.camera.setPreviewDisplay(surfaceHolder);
-      this.camera.startPreview();
+
+      if (!this.pause) {
+        this.camera.startPreview();
+      }
 
     }, 500);
   }
@@ -232,6 +235,16 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
     }
   }
 
+  protected pauseScanning(): void {
+    if (this.camera != null) {
+      this.camera.stopPreview();
+    }
+  };
+
+  protected resumeScanning(): void {
+    this.runCamera();
+  }
+
   protected abstract createDetector(): any;
 
   protected abstract createSuccessListener(): any;

src/mlkit/mlkit-cameraview.ios.ts

@@ -78,7 +78,9 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
       this.ios.layer.addSublayer(this.previewLayer);
     }
 
-    this.captureSession.startRunning();
+    if (!this.pause) {
+      this.captureSession.startRunning();
+    }
 
     this.cameraView = TNSMLKitCameraView.alloc().initWithCaptureSession(this.captureSession);
     this.cameraView.processEveryXFrames = this.processEveryNthFrame;
@@ -150,6 +152,18 @@ export abstract class MLKitCameraView extends MLKitCameraViewBase {
     }
   }
 
+  protected pauseScanning(): void {
+    if (this.captureSession && this.captureSession.running) {
+      this.captureSession.stopRunning();
+    }
+  };
+
+  protected resumeScanning(): void {
+    if (this.captureSession && !this.captureSession.running) {
+      this.captureSession.startRunning();
+    }
+  }
+
   abstract createDetector(): any;
 
   abstract createSuccessListener(): any;