Added object detection

static/app.js

@@ -71,3 +71,52 @@ peer.peer.on("call", (call) => {
     video.addEventListener("loadedmetadata", () => video.play());
   });
 });
+
+const model = new Vue({
+  el: "#model",
+  data: {
+    loading:     false,
+    loadedModel: undefined,
+  },
+  methods: {
+    localDetection: () => {
+      model.loadedModel.detect(localMedia)
+        .then((predictions) => {
+          const liveView = document.getElementById("live-view");
+          for (const child of liveView.childNodes) {
+            if (child.localName === "p") child.remove();
+          }
+
+          for (const prediction of predictions) {
+            const p = document.createElement("p");
+            p.innerText = `${prediction.class} (${Math.round(prediction.score * 100)})`;
+            p.style     = "top: 0; left; 0;" +
+              `margin-left: ${prediction.bbox[0]}px;` +
+              `margin-top:  ${prediction.bbox[1]}px;` +
+              `width:       ${prediction.bbox[2]}px;`;
+
+            liveView.appendChild(p);
+          }
+        }).catch((error) => {
+          peer.error = error.message;
+        });
+    },
+    startLoading: () => {
+      model.loading = true;
+      cocoSsd.load()
+        .then((loadedModel) => {
+          model.loading     = false;
+          model.loadedModel = loadedModel;
+      }).catch((error) => {
+        peer.error = error.message;
+      });
+    },
+  },
+});
+
+setInterval(
+  () => {
+    if (model && model.loadedModel) model.localDetection();
+  },
+  5000
+);

views/body.pug

@@ -17,7 +17,7 @@
       .divider
 
       h5 Local Media
-      #liveView
+      #live-view
         video#my-video
 
       #model