Added conference room page

app.js

@@ -0,0 +1,23 @@
+"use strict";
+
+const express               = require("express");
+const { ExpressPeerServer } = require("peer");
+
+let app = express();
+app.enable("trust proxy");
+app.set("view engine", "pug");
+
+app.use("/app.css", express.static(`${__dirname}/static/app.css`));
+app.use("/app.js",  express.static(`${__dirname}/static/app.js`));
+
+app.get("/", (request, response) => {
+  response.render("index");
+});
+
+const server = app.listen(3000);
+const peerServer = ExpressPeerServer(server, {
+  key:  "testingkey",
+  path: "/conference"
+});
+
+app.use("/peerjs", peerServer);

static/app.css

@@ -0,0 +1,23 @@
+#liveView {
+  position: relative;
+  float:    left;
+  width:    calc(100% - 20px);
+  margin:   10px;
+  cursor:   pointer;
+}
+
+#liveView p {
+  position:         absolute;
+  padding:          5px;
+  background-color: rgba(255, 111, 0, 0.85);
+  color:            #FFF;
+  border:           1px dashed rgba(255, 255, 255, 0.7);
+  z-index:          2;
+  font-size:        12px;
+}
+
+video {
+  display:    block;
+  object-fit: cover;
+  width:      100%;
+}

views/body.pug

@@ -0,0 +1,51 @@
+.container
+  .columns
+    .column.col-2.col-sm-12.float-right.bg-dark.text-light
+      h3.text-center
+        p
+          .i.icon.icon-message.text-success
+        p Conference Room
+      .divider
+
+    #peer
+      .toast.toast-primary
+        span(v-if="clientId")
+          small {{clientId}}
+        span(v-else) Disconnected from Peer
+      .divider
+      .toast.toast-error(v-if="error") {{error}}
+    .divider
+
+    h5 Local Media
+    #liveView
+      video#my-video
+
+    #model
+      button.btn.btn-primary.input-group-btn(v-on:click="startLoading()" v-if="loadedModel === undefined && !loading") Load model
+      .toast.toast-warning.text-center(v-if="loading")
+        span Loading model
+        .loading.loading-lg
+      .toast.toast-success.text-center(v-if="loadedModel !== undefined && !loading") Model loaded
+
+    .column.col-10.col-sm-12.float-right.bg-dark.text-light
+
+      #callee
+        .input-group
+          span.input-group-addon Add contact to call
+          input.form-input#callee(type="text" placeholder="Callee ID" v-model="calleeId")
+          button.btn.btn-primary.input-group-btn(v-on:click="addPeer()")
+            span Add
+            i.icon.icon-arrow-down
+
+      .divider
+
+      #grid
+        .columns
+          .column.col-2.col-sm-12(v-for="peer in peers")
+            .card
+              .card-image
+                video(v-bind:id="peer")
+              .card-header
+                button.btn.btn-primary.btn-small.float-right(v-on:click="makeCall(peer)") Call
+              .card-subtitle.text-gray
+                small {{peer}}

views/head.pug

@@ -0,0 +1,14 @@
+title Conference Room
+meta(charset="utf-8")
+meta(name="viewport" content="width=device-width, initial-scale=1")
+
+link(rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.9/spectre.min.css" integrity="sha512-9RIcp1f4CE6dEuYX9085tXaEbYd1ap04d2Av1ub/dwuT33WbfbHStDdQ+shKrp5wzZzleh5DOg+7ABSnaQP/nQ==" crossorigin="anonymous")
+link(rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.9/spectre-exp.min.css" integrity="sha512-tY+RWVuYs5HznuXWqssp/bTNsuc+bNEQ6wDew2s0u8cgPcyE0LNLHP+Hqh0sBlLJL7JiYz9vsXfEC2HLKQ6l2w==" crossorigin="anonymous")
+link(rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.9/spectre-icons.min.css" integrity="sha512-p/19UB+ls7zsYqyFt0S+qh0P05ThDxzQSwtY4Jo01M4OG1ZkiEMHE942OZ4wh86sT5BIrFNhY3aLsQ5pTqVIzg==" crossorigin="anonymous")
+link(rel="stylesheet" media="all" href="app.css")
+
+script(src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js" integrity="sha512-XdUZ5nrNkVySQBnnM5vzDqHai823Spoq1W3pJoQwomQja+o4Nw0Ew1ppxo5bhF2vMug6sfibhKWcNJsG8Vj9tg==" crossorigin="anonymous" referrerpolicy="no-referrer" defer)
+script(src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.3.2/peerjs.min.js" integrity="sha512-4wTQ8feow93K3qVGVXUGLULDB9eAULiG+xdbaQH8tYZlXxYv9ij+evblXD0EOqmGWT8NBTd1vQGsURvrQzmKeg==" crossorigin="anonymous" referrerpolicy="no-referrer" defer)
+script(src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/3.9.0/tf.min.js" integrity="sha512-UoV7ETlrrOybH7VFmm3JBGngKEAp38nLlKcEGXxI71Dt/qdN4NNRz0Us74ka1j5wuHuemzgvgZHCpZNQk4PjKg==" crossorigin="anonymous" referrerpolicy="no-referrer" defer)
+script(src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js" integrity="sha256-37b6iXyjQMu0EPoWyZUb5jgAirPcOddX0kPWjxBEMFs=" crossorigin="anonymous" defer)
+script(src="app.js" defer)

views/index.pug

@@ -0,0 +1,6 @@
+doctype html
+html(lang="en")
+  head
+    include head.pug
+  body
+    include body.pug