Psion-fanatic/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Migrated camera.cv/camera.ffmpeg/camera.gstreamer UI panels

Browse source
This commit is contained in:
Fabio Manganiello 2021-02-16 01:51:37 +01:00
parent 748609c6f4
commit 41acb02eb0
21 changed files with 470 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
platypush/backend/http/dist/index.html vendored
View file

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-134ec1dc.849ccfd5.css" rel="prefetch"><link href="/static/css/chunk-13b07ca5.029dd736.css" rel="prefetch"><link href="/static/css/chunk-1653b664.5b949e24.css" rel="prefetch"><link href="/static/css/chunk-23726328.7e460329.css" rel="prefetch"><link href="/static/css/chunk-2ca39dde.efa1eae8.css" rel="prefetch"><link href="/static/css/chunk-2f304dee.a8a2d99a.css" rel="prefetch"><link href="/static/css/chunk-487896e7.b7730bd4.css" rel="prefetch"><link href="/static/css/chunk-49211740.43a25f0f.css" rel="prefetch"><link href="/static/css/chunk-4dae396b.92b3713e.css" rel="prefetch"><link href="/static/css/chunk-5145872a.197de139.css" rel="prefetch"><link href="/static/css/chunk-595ffc05.678c9c97.css" rel="prefetch"><link href="/static/css/chunk-64076603.e451beea.css" rel="prefetch"><link href="/static/css/chunk-675c7703.75b51be7.css" rel="prefetch"><link href="/static/css/chunk-792fd41e.4d467174.css" rel="prefetch"><link href="/static/css/chunk-7fae0422.c233115f.css" rel="prefetch"><link href="/static/css/chunk-d22da0c0.7c71cffb.css" rel="prefetch"><link href="/static/css/chunk-d28a86c4.cdd32c08.css" rel="prefetch"><link href="/static/css/chunk-da9476ec.f1965e2d.css" rel="prefetch"><link href="/static/css/chunk-ee62c128.44bbe779.css" rel="prefetch"><link href="/static/js/chunk-134ec1dc.87638287.js" rel="prefetch"><link href="/static/js/chunk-13b07ca5.11833bcd.js" rel="prefetch"><link href="/static/js/chunk-1653b664.4bba37ff.js" rel="prefetch"><link href="/static/js/chunk-23726328.7a638dfb.js" rel="prefetch"><link href="/static/js/chunk-2ca39dde.bfb67629.js" rel="prefetch"><link href="/static/js/chunk-2d0b270c.82d7f897.js" rel="prefetch"><link href="/static/js/chunk-2d0c1eb0.2fc91e77.js" rel="prefetch"><link href="/static/js/chunk-2d0cc2be.71e3fcd8.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.90a98553.js" rel="prefetch"><link href="/static/js/chunk-2d21b0dc.465e6abf.js" rel="prefetch"><link href="/static/js/chunk-2d21da1a.707bd994.js" rel="prefetch"><link href="/static/js/chunk-2d231217.5ff519da.js" rel="prefetch"><link href="/static/js/chunk-2d237d41.b4b87abb.js" rel="prefetch"><link href="/static/js/chunk-2f304dee.649e4dc7.js" rel="prefetch"><link href="/static/js/chunk-487896e7.69cdcafb.js" rel="prefetch"><link href="/static/js/chunk-49211740.e4dea096.js" rel="prefetch"><link href="/static/js/chunk-4dae396b.0ee6bb40.js" rel="prefetch"><link href="/static/js/chunk-5145872a.f0bd0577.js" rel="prefetch"><link href="/static/js/chunk-595ffc05.8affd7fe.js" rel="prefetch"><link href="/static/js/chunk-64076603.2c344ed9.js" rel="prefetch"><link href="/static/js/chunk-675c7703.7c7378cd.js" rel="prefetch"><link href="/static/js/chunk-792fd41e.aca41198.js" rel="prefetch"><link href="/static/js/chunk-7fae0422.0d9be069.js" rel="prefetch"><link href="/static/js/chunk-d22da0c0.da01e99e.js" rel="prefetch"><link href="/static/js/chunk-d28a86c4.d0c1f74e.js" rel="prefetch"><link href="/static/js/chunk-da9476ec.f8c15985.js" rel="prefetch"><link href="/static/js/chunk-ee62c128.c11fb53e.js" rel="prefetch"><link href="/static/css/app.a835db3a.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.2721d165.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.948dc2e5.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.a835db3a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.948dc2e5.js"></script><script src="/static/js/app.2721d165.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-0a9aba75.8a0131ad.css" rel="prefetch"><link href="/static/css/chunk-134ec1dc.849ccfd5.css" rel="prefetch"><link href="/static/css/chunk-13b07ca5.029dd736.css" rel="prefetch"><link href="/static/css/chunk-1653b664.5b949e24.css" rel="prefetch"><link href="/static/css/chunk-23726328.7e460329.css" rel="prefetch"><link href="/static/css/chunk-2ca39dde.efa1eae8.css" rel="prefetch"><link href="/static/css/chunk-2f304dee.a8a2d99a.css" rel="prefetch"><link href="/static/css/chunk-487896e7.b7730bd4.css" rel="prefetch"><link href="/static/css/chunk-49211740.43a25f0f.css" rel="prefetch"><link href="/static/css/chunk-4dae396b.92b3713e.css" rel="prefetch"><link href="/static/css/chunk-5145872a.197de139.css" rel="prefetch"><link href="/static/css/chunk-595ffc05.678c9c97.css" rel="prefetch"><link href="/static/css/chunk-64076603.e451beea.css" rel="prefetch"><link href="/static/css/chunk-675c7703.75b51be7.css" rel="prefetch"><link href="/static/css/chunk-792fd41e.4d467174.css" rel="prefetch"><link href="/static/css/chunk-7fae0422.c233115f.css" rel="prefetch"><link href="/static/css/chunk-d22da0c0.7c71cffb.css" rel="prefetch"><link href="/static/css/chunk-d28a86c4.cdd32c08.css" rel="prefetch"><link href="/static/css/chunk-da9476ec.f1965e2d.css" rel="prefetch"><link href="/static/css/chunk-ee62c128.44bbe779.css" rel="prefetch"><link href="/static/js/chunk-0a9aba75.bc40521f.js" rel="prefetch"><link href="/static/js/chunk-134ec1dc.87638287.js" rel="prefetch"><link href="/static/js/chunk-13b07ca5.11833bcd.js" rel="prefetch"><link href="/static/js/chunk-1653b664.4bba37ff.js" rel="prefetch"><link href="/static/js/chunk-23726328.7a638dfb.js" rel="prefetch"><link href="/static/js/chunk-2ca39dde.bfb67629.js" rel="prefetch"><link href="/static/js/chunk-2d0b270c.82d7f897.js" rel="prefetch"><link href="/static/js/chunk-2d0c1eb0.2fc91e77.js" rel="prefetch"><link href="/static/js/chunk-2d0c229a.c6f13c92.js" rel="prefetch"><link href="/static/js/chunk-2d0cc2be.71e3fcd8.js" rel="prefetch"><link href="/static/js/chunk-2d0da3df.99de332b.js" rel="prefetch"><link href="/static/js/chunk-2d208116.4f67ac14.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.90a98553.js" rel="prefetch"><link href="/static/js/chunk-2d21b0dc.465e6abf.js" rel="prefetch"><link href="/static/js/chunk-2d21da1a.707bd994.js" rel="prefetch"><link href="/static/js/chunk-2d231217.5ff519da.js" rel="prefetch"><link href="/static/js/chunk-2d237d41.b4b87abb.js" rel="prefetch"><link href="/static/js/chunk-2f304dee.649e4dc7.js" rel="prefetch"><link href="/static/js/chunk-487896e7.69cdcafb.js" rel="prefetch"><link href="/static/js/chunk-49211740.e4dea096.js" rel="prefetch"><link href="/static/js/chunk-4dae396b.0ee6bb40.js" rel="prefetch"><link href="/static/js/chunk-5145872a.f0bd0577.js" rel="prefetch"><link href="/static/js/chunk-595ffc05.8affd7fe.js" rel="prefetch"><link href="/static/js/chunk-64076603.2c344ed9.js" rel="prefetch"><link href="/static/js/chunk-675c7703.7c7378cd.js" rel="prefetch"><link href="/static/js/chunk-792fd41e.aca41198.js" rel="prefetch"><link href="/static/js/chunk-7fae0422.0d9be069.js" rel="prefetch"><link href="/static/js/chunk-d22da0c0.da01e99e.js" rel="prefetch"><link href="/static/js/chunk-d28a86c4.d0c1f74e.js" rel="prefetch"><link href="/static/js/chunk-da9476ec.f8c15985.js" rel="prefetch"><link href="/static/js/chunk-ee62c128.c11fb53e.js" rel="prefetch"><link href="/static/css/app.a835db3a.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.20af947b.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.948dc2e5.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.a835db3a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.948dc2e5.js"></script><script src="/static/js/app.20af947b.js"></script></body></html>

1
platypush/backend/http/dist/static/css/chunk-0a9aba75.8a0131ad.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
platypush/backend/http/dist/static/js/app.20af947b.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
platypush/backend/http/dist/static/js/app.20af947b.js.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
platypush/backend/http/dist/static/js/app.2721d165.js vendored
View file

File diff suppressed because one or more lines are too long

1
platypush/backend/http/dist/static/js/app.2721d165.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
platypush/backend/http/dist/static/js/chunk-0a9aba75.bc40521f.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
platypush/backend/http/dist/static/js/chunk-0a9aba75.bc40521f.js.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
platypush/backend/http/dist/static/js/chunk-2d0c229a.c6f13c92.js vendored Normal file
View file

@ -0,0 +1,2 @@
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c229a"],{"48aa":function(e,a,r){"use strict";r.r(a);var n=r("7a23");function t(e,a,r,t,c,u){var m=Object(n["z"])("Camera");return Object(n["r"])(),Object(n["e"])(m,{"camera-plugin":"gstreamer"})}var c=r("1ed9"),u={name:"CameraGstreamer",components:{Camera:c["default"]}};u.render=t;a["default"]=u}}]);
//# sourceMappingURL=chunk-2d0c229a.c6f13c92.js.map

1
platypush/backend/http/dist/static/js/chunk-2d0c229a.c6f13c92.js.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///./src/components/panels/CameraGstreamer/Index.vue","webpack:///./src/components/panels/CameraGstreamer/Index.vue?f193"],"names":["camera-plugin","name","components","Camera","render"],"mappings":"wNACE,eAAoC,GAA5BA,gBAAc,c,gBAMT,GACbC,KAAM,kBACNC,WAAY,CAACC,OAAA,eCNf,EAAOC,OAASA,EAED","file":"static/js/chunk-2d0c229a.c6f13c92.js","sourcesContent":["<template>\n <Camera camera-plugin=\"gstreamer\" />\n</template>\n\n<script>\nimport Camera from \"@/components/panels/Camera/Index\";\n\nexport default {\n name: \"CameraGstreamer\",\n components: {Camera},\n}\n</script>\n","import { render } from \"./Index.vue?vue&type=template&id=6c669f2b\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}

2
platypush/backend/http/dist/static/js/chunk-2d0da3df.99de332b.js vendored Normal file
View file

@ -0,0 +1,2 @@
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0da3df"],{"6b85":function(e,a,n){"use strict";n.r(a);var r=n("7a23");function c(e,a,n,c,t,d){var u=Object(r["z"])("Camera");return Object(r["r"])(),Object(r["e"])(u,{"camera-plugin":"cv"})}var t=n("1ed9"),d={name:"CameraCv",components:{Camera:t["default"]}};d.render=c;a["default"]=d}}]);
//# sourceMappingURL=chunk-2d0da3df.99de332b.js.map

1
platypush/backend/http/dist/static/js/chunk-2d0da3df.99de332b.js.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///./src/components/panels/CameraCv/Index.vue","webpack:///./src/components/panels/CameraCv/Index.vue?fdf8"],"names":["camera-plugin","name","components","Camera","render"],"mappings":"wNACE,eAA6B,GAArBA,gBAAc,O,gBAMT,GACbC,KAAM,WACNC,WAAY,CAACC,OAAA,eCNf,EAAOC,OAASA,EAED","file":"static/js/chunk-2d0da3df.99de332b.js","sourcesContent":["<template>\n <Camera camera-plugin=\"cv\" />\n</template>\n\n<script>\nimport Camera from \"@/components/panels/Camera/Index\";\n\nexport default {\n name: \"CameraCv\",\n components: {Camera},\n}\n</script>\n","import { render } from \"./Index.vue?vue&type=template&id=351194be\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}

2
platypush/backend/http/dist/static/js/chunk-2d208116.4f67ac14.js vendored Normal file
View file

@ -0,0 +1,2 @@
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d208116"],{a2e4:function(e,a,n){"use strict";n.r(a);var r=n("7a23");function c(e,a,n,c,t,p){var u=Object(r["z"])("Camera");return Object(r["r"])(),Object(r["e"])(u,{"camera-plugin":"ffmpeg"})}var t=n("1ed9"),p={name:"CameraFfmpeg",components:{Camera:t["default"]}};p.render=c;a["default"]=p}}]);
//# sourceMappingURL=chunk-2d208116.4f67ac14.js.map

1
platypush/backend/http/dist/static/js/chunk-2d208116.4f67ac14.js.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["webpack:///./src/components/panels/CameraFfmpeg/Index.vue","webpack:///./src/components/panels/CameraFfmpeg/Index.vue?ee79"],"names":["camera-plugin","name","components","Camera","render"],"mappings":"sNACE,eAAiC,GAAzBA,gBAAc,W,gBAMT,GACbC,KAAM,eACNC,WAAY,CAACC,OAAA,eCNf,EAAOC,OAASA,EAED","file":"static/js/chunk-2d208116.4f67ac14.js","sourcesContent":["<template>\n <Camera camera-plugin=\"ffmpeg\" />\n</template>\n\n<script>\nimport Camera from \"@/components/panels/Camera/Index\";\n\nexport default {\n name: \"CameraFfmpeg\",\n components: {Camera},\n}\n</script>\n","import { render } from \"./Index.vue?vue&type=template&id=dd632828\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}

12
platypush/backend/http/webapp/src/assets/icons.json
View file

@ -1,5 +1,17 @@
{ {
"icons": { "icons": {
"camera.cv": {
"class": "fas fa-camera"
},
"camera.ffmpeg": {
"class": "fas fa-camera"
},
"camera.gstreamer": {
"class": "fas fa-camera"
},
"camera.pi": {
"class": "fas fa-camera"
},
"light.hue": { "light.hue": {
"class": "fas fa-lightbulb" "class": "fas fa-lightbulb"
}, },

285
platypush/backend/http/webapp/src/components/panels/Camera/Index.vue Normal file
View file

@ -0,0 +1,285 @@
<template>
<div class="camera">
<div class="camera-container">
<div class="frame-container" ref="frameContainer">
<div class="no-frame" v-if="!streaming && !capturing && !captured">The camera is not active</div>
<img class="frame" :src="url" ref="frame" alt="">
</div>
<div class="controls">
<div class="left">
<button type="button" @click="startStreaming" :disabled="capturing" title="Start video" v-if="!streaming">
<i class="fa fa-play" />
</button>
<button type="button" @click="stopStreaming" :disabled="capturing" title="Stop video" v-else>
<i class="fa fa-stop" />
</button>
<button type="button" @click="capture" :disabled="streaming || capturing" title="Take a picture">
<i class="fas fa-camera" />
</button>
</div>
<div class="right">
<button type="button" @click="$refs.paramsModal.show()" title="Settings">
<i class="fas fa-cog" />
</button>
</div>
</div>
</div>
<div class="url" v-if="url?.length">
<label class="row">
<span class="name">Stream URL</span>
<input name="url" type="text" :value="fullURL" disabled="disabled"/>
</label>
</div>
<Modal ref="paramsModal" title="Camera Parameters">
<div class="params">
<label class="row">
<span class="name">Device</span>
<input name="device" type="text" v-model="attrs.device" @change="onDeviceChanged"/>
</label>
<label class="row">
<span class="name">Width</span>
<input name="width" type="text" v-model="attrs.resolution[0]" @change="onSizeChanged"/>
</label>
<label class="row">
<span class="name">Height</span>
<input name="height" type="text" v-model="attrs.resolution[1]" @change="onSizeChanged"/>
</label>
<label class="row">
<span class="name">Horizontal Flip</span>
<input name="horizontal_flip" type="checkbox" v-model="attrs.horizontal_flip" @change="onFlipChanged"/>
</label>
<label class="row">
<span class="name">Vertical Flip</span>
<input name="vertical_flip" type="checkbox" v-model="attrs.vertical_flip" @change="onFlipChanged"/>
</label>
<label class="row">
<span class="name">Rotate</span>
<input name="rotate" type="text" v-model="attrs.rotate" @change="onSizeChanged"/>
</label>
<label class="row">
<span class="name">Scale-X</span>
<input name="scale_x" type="text" v-model="attrs.scale_x" @change="onSizeChanged"/>
</label>
<label class="row">
<span class="name">Scale-Y</span>
<input name="scale_y" type="text" v-model="attrs.scale_y" @change="onSizeChanged"/>
</label>
<label class="row">
<span class="name">Frames per second</span>
<input name="fps" type="text" v-model="attrs.fps" @change="onFpsChanged"/>
</label>
<label class="row">
<span class="name">Grayscale</span>
<input name="grayscale" type="checkbox" v-model="attrs.grayscale" @change="onGrayscaleChanged"/>
</label>
</div>
</Modal>
</div>
</template>
<script>
import CameraMixin from "@/components/panels/Camera/Mixin";
import Modal from "@/components/Modal";
export default {
name: "Camera",
components: {Modal},
mixins: [CameraMixin],
props: {
cameraPlugin: {
type: String,
required: true,
},
},
computed: {
fullURL() {
return `${window.location.protocol}//${window.location.host}${this.url}`
},
},
methods: {
startStreaming() {
this._startStreaming(this.cameraPlugin)
},
capture() {
this._capture(this.cameraPlugin)
},
},
}
</script>
<style lang="scss">
$camera-background: #101520;
.camera {
width: 100%;
height: 100%;
background: $background-color;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3em;
.camera-container {
display: flex;
flex-direction: column;
align-items: center;
background: $camera-background;
.frame-container {
position: relative;
}
.frame, .no-frame {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.frame {
z-index: 1;
}
.no-frame {
display: flex;
color: white;
align-items: center;
justify-content: center;
z-index: 2;
background: black;
}
.controls {
width: 100%;
display: flex;
border-top: 1px solid #202530;
padding: .5em .25em;
.left,.right {
width: 50%;
}
.right {
text-align: right;
}
button {
background: none;
color: white;
border: none;
&:hover {
color: $default-hover-fg-2;
}
}
}
}
.url {
@media screen and (max-width: calc(#{$tablet} - 1px)) {
width: 80%;
}
@media screen and (min-width: $tablet) {
width: 640px;
}
display: flex;
margin: 1em;
.row {
width: 100%;
display: flex;
align-items: center;
}
.name {
width: 140px;
}
input {
width: 500px;
font-weight: normal;
}
}
.params {
@media screen and (min-width: $tablet) {
width: 640px;
}
display: flex;
flex-direction: column;
margin: -2em;
label {
font-weight: normal;
}
.head {
display: flex;
justify-content: center;
label {
width: 100%;
display: flex;
justify-content: right;
.name {
margin-right: 1em;
}
}
}
.row {
width: 100%;
display: flex;
align-items: center;
padding: 0.5em 1em;
.name {
width: 30%;
}
input {
width: 70%;
}
&:nth-child(even) {
background: $default-bg-4;
}
&:hover {
background: $hover-bg;
}
}
}
.modal {
.content {
@media screen and (max-width: calc(#{$tablet} - 1px)) {
width: 90% !important;
}
}
}
}
</style>

113
platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue Normal file
View file

@ -0,0 +1,113 @@
<script>
export default {
name: "CameraMixin",
props: {
cameraPlugin: {
type: String,
required: true,
},
},
data() {
return {
streaming: false,
capturing: false,
captured: false,
url: null,
attrs: {},
}
},
computed: {
params() {
return {
resolution: this.attrs.resolution,
device: this.attrs.device?.length ? this.attrs.device : null,
horizontal_flip: parseInt(0 + this.attrs.horizontal_flip),
vertical_flip: parseInt(0 + this.attrs.vertical_flip),
rotate: parseFloat(this.attrs.rotate),
scale_x: parseFloat(this.attrs.scale_x),
scale_y: parseFloat(this.attrs.scale_y),
fps: parseFloat(this.attrs.fps),
grayscale: parseInt(0 + this.attrs.grayscale),
}
},
},
methods: {
getUrl(plugin, action) {
return '/camera/' + plugin + '/' + action + '?' +
Object.entries(this.params).filter((entry) => entry[1] != null && ('' + entry[1]).length > 0)
.map(([k, v]) => k + '=' + v).join('&')
},
_startStreaming(plugin) {
if (this.streaming)
return
this.streaming = true
this.capturing = false
this.captured = false
this.url = this.getUrl(plugin, 'video.' + this.attrs.stream_format)
},
stopStreaming() {
if (!this.streaming)
return
this.streaming = false
this.capturing = false
this.url = null
},
_capture(plugin) {
if (this.capturing)
return
this.streaming = false
this.capturing = true
this.captured = true
this.url = this.getUrl(plugin, 'photo.jpg') + '&t=' + (new Date()).getTime()
},
onFrameLoaded() {
if (this.capturing) {
this.capturing = false
}
},
onDeviceChanged() {},
onFlipChanged() {},
onSizeChanged() {
const degToRad = (deg) => (deg * Math.PI)/180
const rot = degToRad(this.params.rotate)
this.$refs.frameContainer.style.width = Math.round(this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))) + 'px'
this.$refs.frameContainer.style.height = Math.round(this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))) + 'px'
},
onFpsChanged() {},
onGrayscaleChanged() {},
},
created() {
const config = this.$root.config[`camera.${this.cameraPlugin}`] || {}
this.attrs = {
resolution: config.resolution || [640, 480],
device: config.device,
horizontal_flip: config.horizontal_flip || 0,
vertical_flip: config.vertical_flip || 0,
rotate: config.rotate || 0,
scale_x: config.scale_x || 1.0,
scale_y: config.scale_y || 1.0,
fps: config.fps || 16.0,
grayscale: config.grayscale || 0,
stream_format: config.stream_format || 'mjpeg',
}
},
mounted() {
this.$refs.frame.addEventListener('load', this.onFrameLoaded)
this.onSizeChanged()
},
}
</script>

12
platypush/backend/http/webapp/src/components/panels/CameraCv/Index.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<Camera camera-plugin="cv" />
</template>
<script>
import Camera from "@/components/panels/Camera/Index";
export default {
name: "CameraCv",
components: {Camera},
}
</script>

12
platypush/backend/http/webapp/src/components/panels/CameraFfmpeg/Index.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<Camera camera-plugin="ffmpeg" />
</template>
<script>
import Camera from "@/components/panels/Camera/Index";
export default {
name: "CameraFfmpeg",
components: {Camera},
}
</script>

12
platypush/backend/http/webapp/src/components/panels/CameraGstreamer/Index.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<Camera camera-plugin="gstreamer" />
</template>
<script>
import Camera from "@/components/panels/Camera/Index";
export default {
name: "CameraGstreamer",
components: {Camera},
}
</script>

10
platypush/backend/http/webapp/vue.config.js
View file

@ -17,15 +17,19 @@ module.exports = {
proxy: { proxy: {
'/execute': { '/execute': {
target: 'http://localhost:8008', target: 'http://localhost:8008',
changeOrigin: true, changeOrigin: true
}, },
'/auth': { '/auth': {
target: 'http://localhost:8008', target: 'http://localhost:8008',
changeOrigin: true, changeOrigin: true
}, },
'/logout': { '/logout': {
target: 'http://localhost:8008', target: 'http://localhost:8008',
changeOrigin: true, changeOrigin: true
},
'/camera/*': {
target: 'http://localhost:8008',
changeOrigin: true
} }
} }
} }