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:
parent
ba54ba3db4
commit
090fcc146e
6196
package-lock.json
generated
6196
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user