Proxy webcam streams for octoprint instances

package.json

@@ -1,6 +1,8 @@
 {
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@types/express": "^4.17.1",
+    "@types/http-proxy": "^1.17.0",
     "@vue/component-compiler-utils": "^3.0.0",
     "sass": "^1.23.0-module.beta.1",
     "typescript": "^3.6.2",
@@ -10,10 +12,14 @@
     "@types/js-yaml": "^3.12.1",
     "@types/node": "^12.7.4",
     "@types/node-fetch": "^2.5.0",
+    "@types/parcel-bundler": "^1.12.1",
     "@types/ws": "^6.0.3",
+    "express": "^4.17.1",
+    "http-proxy": "^1.18.0",
     "js-yaml": "^3.13.1",
     "node-fetch": "^2.6.0",
     "node-gyp": "^5.0.3",
+    "parcel-bundler": "^1.12.3",
     "vue": "^2.6.10",
     "vue-hot-reload-api": "^2.3.3",
     "vue-property-decorator": "^8.2.2",
@@ -21,7 +27,6 @@
   },
   "scripts": {
     "build": "tsc src/server.ts",
-    "start": "parcel src/index.html",
     "serve": "npm run build && node src/server.js"
   }
 }

src/PrinterCard.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="card">
     <div class="card-header">{{ name || 'Unknown' }}</div>
-    <div v-if="webcamURL">
+    <img
-      <img class="webcam" :src="webcamURL" />
+      v-if="name"
-    </div>
+      class="webcam"
+      :src="'http://localhost:1234/webcam/' + name"
+    />
     <div v-if="status">
       <div>{{ status.state.text }}</div>
       <div>Job File Name: {{ status.job.file.name || 'None' }}</div>
@@ -30,10 +32,7 @@ import * as octoprint from './octoprint';
 @Component
 export default class PrinterCard extends Vue {
   @Prop(String) readonly name!: string;
-  @Prop(String) readonly webcamURL!: string;
   @Prop(Object) readonly status?: octoprint.CurrentOrHistoryPayload;
-
-  mounted() {}
 }
 </script>
 
@@ -52,9 +51,10 @@ export default class PrinterCard extends Vue {
     text-align: center;
     padding-bottom: 0.25em;
   }
-}
 
-.webcam {
+  .webcam {
-  max-width: 100%;
+    width: 480px;
+    max-width: 100%;
+  }
 }
 </style>

src/server.ts

@@ -1,17 +1,23 @@
 import * as fs from 'fs';
 import * as url from 'url';
+import * as path from 'path';
 
+import * as express from 'express';
 import fetch from 'node-fetch';
-import * as messages from './messages';
+import * as httpProxy from 'http-proxy';
-import * as octoprint from './octoprint';
 import * as WebSocket from 'ws';
 import * as yaml from 'js-yaml';
+import * as Bundler from 'parcel-bundler';
+
+import * as messages from './messages';
+import * as octoprint from './octoprint';
 
 // Load config
 const config: {
   printers: { address: string; apikey: string }[];
 } = yaml.safeLoad(fs.readFileSync('config.yaml', 'utf8'));
 
+const proxy = httpProxy.createProxyServer({});
 const proxyServer = new WebSocket.Server({ host: '127.0.0.1', port: 4321 });
 let printerStatuses: PrinterStatus[] = [];
 
@@ -27,6 +33,22 @@ function broadcastPayload(payload: messages.ExtendedMessage) {
   broadcast(JSON.stringify(payload));
 }
 
+const app = express();
+
+app.get('/webcam/:printer', (req, res) => {
+  let printer: PrinterStatus | undefined = printerStatuses.find(
+    p => p.name === req.params.printer
+  );
+  if (printer && printer.webcamURL)
+    proxy.web(req, res, { target: printer.webcamURL });
+  else res.status(404).send('Not Found: Printer not known or has no webcam.');
+});
+
+let bundler = new Bundler(path.join(__dirname, 'index.html'));
+app.use(bundler.middleware());
+
+app.listen(1234);
+
 class PrinterStatus {
   wss: WebSocket.Server;
   address: string;