2
0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-21 15:03:48 -05:00

Proxy webcam streams for octoprint instances

This commit is contained in:
Adam Goldsmith 2019-09-20 17:48:40 -04:00
parent ba54ba3db4
commit 090fcc146e
4 changed files with 6169 additions and 78 deletions

6196
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -1,9 +1,11 @@
<template>
<div class="card">
<div class="card-header">{{ name || 'Unknown' }}</div>
<div v-if="webcamURL">
<img class="webcam" :src="webcamURL" />
</div>
<img
v-if="name"
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 {
max-width: 100%;
.webcam {
width: 480px;
max-width: 100%;
}
}
</style>

View File

@ -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 octoprint from './octoprint';
import * as httpProxy from 'http-proxy';
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;