core: fix svg ocverlay on video only devices

plugins/core/package-lock.json

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

plugins/core/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.151",
+   "version": "0.0.152",
    "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

@@ -31,10 +31,12 @@ export default {
   mixins: [RPCInterface],
   data() {
     return {
-      lastDetection: null,
+      lastDetection: {},
       objectListener: this.device.listen(
         ScryptedInterface.ObjectDetector,
-        (s, d, e) => (this.lastDetection = e)
+        (s, d, e) => {
+          this.lastDetection = e || {};
+        }
       ),
       pc: undefined,
       src: "images/cameraloading.jpg",
@@ -63,10 +65,11 @@ export default {
         const h = detection.boundingBox[3];
         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>`;
+        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;
       }
 
@@ -79,10 +82,11 @@ export default {
         const h = detection.boundingBox[3];
         const t = detection.label;
         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>`;
+        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;
       }
 

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

@@ -1,65 +1,10 @@
-<template>
-  <v-dialog v-model="dialog" width="1024">
-    <template v-slot:activator="{ on }">
-      <a v-on="on"
-        ><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>
-  </v-dialog>
-</template>
-
 <script>
-import RPCInterface from "./RPCInterface.vue";
-import { streamCamera } from "../common/camera";
-
-const scryptedServerVariables = {};
-scryptedServerVariables.registrationId = "web:/web/message";
-scryptedServerVariables.senderId = null;
-scryptedServerVariables.apiKey = "AIzaSyCBbKhH_IM1oIZMOO65xOnzgDDrmC2lAoc";
+import Camera from "./Camera.vue";
 
 export default {
-  mixins: [RPCInterface],
-  data() {
-    return {
-      pc: undefined,
-      src: "images/cameraloading.jpg",
-      dialog: false,
-    };
-  },
-  destroyed() {
-    this.cleanupConnection();
-  },
+  mixins: [Camera],
   methods: {
-    cleanupConnection() {
-      if (this.pc) {
-        this.pc.close();
-        this.pc = undefined;
-      }
-    },
-  },
-  watch: {
-    async dialog(val) {
-      this.cleanupConnection();
-      if (!val) {
-        return;
-      }
-      await streamCamera(
-        this.$scrypted.mediaManager,
-        this.device,
-        () => this.$refs.video,
-        (configuration) => (this.pc = new RTCPeerConnection(configuration))
-      );
-    },
-  },
-  mounted() {
-    (async () => {
+    async refresh() {
       const videoStream = await this.device.getVideoStream();
       this.$scrypted.mediaManager
         .convertMediaObjectToLocalUrl(videoStream, "image/jpeg")
@@ -68,7 +13,7 @@ export default {
           const url = new URL(result);
           this.src = url.pathname;
         });
-    })();
+    },
   },
 };
 </script>