core: rebuild with support for DeviceCreator

plugins/core/package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.139",
+   "version": "0.0.148",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.0.139",
+         "version": "0.0.148",
          "license": "Apache-2.0",
          "dependencies": {
             "@koush/wrtc": "^0.5.0",

plugins/core/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.147",
+   "version": "0.0.148",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",

plugins/core/ui/src/interfaces/Camera.vue

@@ -5,13 +5,20 @@
         ><v-img contain :src="src" lazy-src="images/cameraloading.jpg"></v-img
       ></a>
     </template>
-    <video
-      ref="video"
-      width="100%"
-      style="background-color: black"
-      playsinline
-      autoplay
-    ></video>
+    <div style="position: relative">
+      <video
+        ref="video"
+        style="background-color: black; width: 100%; height: 100%"
+        playsinline
+        autoplay
+      ></video>
+      <svg
+        :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
+        ref="svg"
+        style="top: 0; left: 0; position: absolute; width: 100%; height: 100%"
+        v-html="svgContents"
+      ></svg>
+    </div>
   </v-dialog>
 </template>
 
@@ -24,14 +31,50 @@ export default {
   mixins: [RPCInterface],
   data() {
     return {
+      lastDetection: null,
+      objectListener: this.device.listen(
+        ScryptedInterface.ObjectDetector,
+        (s, d, e) => (this.lastDetection = e)
+      ),
       pc: undefined,
       src: "images/cameraloading.jpg",
       dialog: false,
       disabled: !this.device.interfaces.includes(ScryptedInterface.VideoCamera),
     };
   },
+  computed: {
+    svgWidth() {
+      return this.lastDetection?.inputDimensions?.[0] || 1920;
+    },
+    svgHeight() {
+      return this.lastDetection?.inputDimensions?.[1] || 1080;
+    },
+    svgContents() {
+      if (!this.lastDetection) return "";
+
+      let contents = "";
+      for (const detection of this.lastDetection.detections) {
+        const sw = 2;
+        const s = "red";
+        const x = detection.boundingBox[0];
+        const y = detection.boundingBox[1];
+        const w = detection.boundingBox[2] - x;
+        const h = detection.boundingBox[3] - y;
+        const t = detection.className;
+        const fs = 20;
+        const box =
+        `<rect x="${x}" y="${y}" width="${w}" height="${h}" stroke="${s}" stroke-width="${sw}" fill="none" />
+        <text x="${x}" y="${y-5}" font-size="${fs}" dx="0.05em" dy="0.05em" fill="black">${t}</text>
+        <text x="${x}" y="${y-5}" font-size="${fs}" fill="white">${t}</text>`;
+        contents += box;
+      }
+
+      return contents;
+    },
+  },
   destroyed() {
     this.cleanupConnection();
+    this.objectListener.removeListener();
   },
   methods: {
     cleanupConnection() {

plugins/core/ui/src/interfaces/DeviceProvider.vue

@@ -6,11 +6,7 @@
       max-width="600px"
       persistent
     >
-      <Settings
-        v-model="createDeviceSettings"
-        :noTitle="true"
-        class="pa-2"
-      >
+      <Settings v-model="createDeviceSettings" :noTitle="true" class="pa-2">
         <template v-slot:append>
           <v-card-actions>
             <v-spacer></v-spacer>
@@ -32,12 +28,12 @@
         @click="openDeviceCreationDialog"
         >Add Device</v-btn
       >
-      <v-btn
+      <!-- <v-btn
         v-if="device.interfaces.includes('DeviceDiscovery')"
         text
         color="primary"
         >Discover Devices</v-btn
-      >
+      > -->
     </v-card-actions>
     <v-card-text>These things were created by {{ device.name }}.</v-card-text>
     <DeviceGroup :deviceGroup="managedDevices"></DeviceGroup>