How to get live camera feed with nativescript-vue? #887

Author: EddyVerbruggen

demo-ng/app/App_Resources/Android/AndroidManifest.xml

@@ -30,9 +30,9 @@
 		android:label="@string/app_name"
 		android:theme="@style/AppTheme">
 
-    <meta-data
-				android:name="com.facebook.sdk.ApplicationId"
-				android:value="@string/facebook_app_id"/>
+		<meta-data
+					android:name="com.facebook.sdk.ApplicationId"
+					android:value="@string/facebook_app_id"/>
 
 		<meta-data
 				android:name="com.google.firebase.ml.vision.DEPENDENCIES"

demo-vue/app/App_Resources/Android/src/main/AndroidManifest.xml

@@ -8,8 +8,19 @@
     <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+
+    <!-- for ML Kit -->
+    <uses-permission android:name="android.permission.CAMERA"/>
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
+    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
+
     <application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/icon"
                  android:label="@string/app_name" android:theme="@style/AppTheme">
+
+        <meta-data
+                android:name="com.google.firebase.ml.vision.DEPENDENCIES"
+                android:value="ocr" />
+
         <activity android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera"
                   android:configChanges="keyboardHidden|orientation|screenSize"
                   android:theme="@style/LaunchScreenTheme">

demo-vue/app/components/App.vue

@@ -7,31 +7,37 @@
       <!--<Button @tap="onTapScheduleNotification" class="btn" text="Schedule Notification"></Button>-->
       <!--<Button @tap="onTapCancelAll" class="btn" text="Cancel notifications"></Button>-->
       <Label class="message" :text="message" textWrap="true"></Label>
+      <MLKitTextRecognition width="260"
+                            height="340"
+                            processEveryNthFrame="5"
+                            @scanResult="onTextRecognitionResult">
+      </MLKitTextRecognition>
+
     </StackLayout>
   </Page>
 </template>
 
 <script>
-    const firebase = require("nativescript-plugin-firebase");
+  const firebase = require("nativescript-plugin-firebase");
 
-    firebase.init({
-      onDynamicLinkCallback: function (result) {
-        console.log("Dynamic Link received: " + result);
-        console.log("Dynamic Link received, url: " + result.url);
-        if (result.url.indexOf("/campaigns/shit") > -1) {
-          // note that you could deeplink/route the user now, but let's just show an alert
-          alert({
-            title: "Campaign button tapped!",
-            message: "You tapped the button in the 'Firebase is the 💩' campaign - well don!",
-            okButtonText: "Yep!"
-          })
-        }
+  firebase.init({
+    onDynamicLinkCallback: function (result) {
+      console.log("Dynamic Link received: " + result);
+      console.log("Dynamic Link received, url: " + result.url);
+      if (result.url.indexOf("/campaigns/shit") > -1) {
+        // note that you could deeplink/route the user now, but let's just show an alert
+        alert({
+          title: "Campaign button tapped!",
+          message: "You tapped the button in the 'Firebase is the 💩' campaign - well don!",
+          okButtonText: "Yep!"
+        })
       }
-    }).then(function () {
-      console.log("Firebase initialized");
-    }).catch(function (error) {
-      console.log("Error initializing Firebase: " + error);
-    });
+    }
+  }).then(function () {
+    console.log("Firebase initialized");
+  }).catch(function (error) {
+    console.log("Error initializing Firebase: " + error);
+  });
 
   export default {
     data() {
@@ -41,6 +47,9 @@
     },
 
     methods: {
+      onTextRecognitionResult() {
+        console.log("onTextRecognitionResult");
+      }
       /*
       onTapHasPermission() {
         LocalNotifications.hasPermission()

demo-vue/app/main.js

@@ -2,6 +2,7 @@ import Vue from "nativescript-vue";
 import App from "./components/App";
 
 require("nativescript-plugin-firebase");
+Vue.registerElement("MLKitTextRecognition", () => require("nativescript-plugin-firebase/mlkit/textrecognition").MLKitTextRecognition);
 
 // Prints Vue logs when --env.production is *NOT* set while building
 Vue.config.silent = (TNS_ENV === "production");

demo-vue/firebase.nativescript.json

@@ -18,5 +18,6 @@
     "admob": false,
     "invites": false,
     "dynamic_links": true,
-    "ml_kit": false
+    "ml_kit": true,
+    "ml_kit_text_recognition": true
 }

docs/ML_KIT.md

@@ -161,7 +161,7 @@ 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
+##### Angular
 Register a custom element like so in the component/module:
 
 ```typescript
@@ -184,6 +184,25 @@ Now you're able to use the registered element in the view:
 </MLKitTextRecognition>
 ```
 
+##### Vue
+Register a custom element like so in `main.js`:
+
+```typescript
+Vue.registerElement("MLKitTextRecognition", () => require("nativescript-plugin-firebase/mlkit/textrecognition").MLKitTextRecognition);
+```
+
+Now you're able to use the registered element in your `.Vue` file:
+
+```vue
+  <MLKitTextRecognition
+    width="260"
+    height="340"
+    processEveryNthFrame="5"
+    :torchOn="torchOn"
+    @scanResult="onTextRecognitionResult">
+  </MLKitTextRecognition>
+```
+
 ##### XML 
 Declare a namespace at the top of the embedding page, and use it anywhere on the page: