Added camera web panel

This commit is contained in:
Fabio Manganiello 2019-07-19 15:20:48 +02:00
parent 5c3d32d05d
commit f12c6db34f
4 changed files with 121 additions and 0 deletions

View file

@ -0,0 +1,39 @@
@import 'common/vars';
.camera {
height: 90%;
margin-top: 7%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
.camera-container {
min-width: 640px;
min-height: 480px;
position: relative;
background: black;
margin-bottom: 1em;
.frame, .no-frame {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.frame {
z-index: 1;
}
.no-frame {
display: flex;
background: rgba(0, 0, 0, 0.1);
color: white;
align-items: center;
justify-content: center;
z-index: 2;
}
}
}

View file

@ -0,0 +1,58 @@
Vue.component('camera', {
template: '#tmpl-camera',
props: ['config'],
data: function() {
return {
bus: new Vue({}),
streaming: false,
capturing: false,
};
},
computed: {
deviceId: function() {
return this.config.device_id || 0;
},
},
methods: {
startStreaming: function() {
if (this.streaming)
return;
this.streaming = true;
this.capturing = false;
this.$refs.frame.setAttribute('src', '/camera/' + this.deviceId + '/stream');
},
stopStreaming: function() {
if (!this.streaming)
return;
this.streaming = false;
this.capturing = false;
this.$refs.frame.removeAttribute('src');
},
capture: function() {
if (this.capturing)
return;
this.streaming = false;
this.capturing = true;
this.$refs.frame.setAttribute('src', '/camera/' + this.deviceId + '/frame');
},
onFrameLoaded: function(event) {
if (this.capturing) {
this.capturing = false;
}
},
},
mounted: function() {
this.$refs.frame.addEventListener('load', this.onFrameLoaded);
},
});

View file

@ -1,5 +1,6 @@
{%
with pluginIcons = {
'camera': 'fas fa-camera',
'light.hue': 'fa fa-lightbulb',
'media.mplayer': 'fa fa-film',
'media.mpv': 'fa fa-film',

View file

@ -0,0 +1,23 @@
<script type="text/x-template" id="tmpl-camera">
<div class="camera">
<div class="camera-container">
<div class="no-frame" v-if="!streaming && !capturing">The camera is not active</div>
<img class="frame" ref="frame">
</div>
<div class="controls">
<button type="button" @click="startStreaming" :disabled="capturing" v-if="!streaming">
<i class="fa fa-play"></i>&nbsp; Start streaming
</button>
<button type="button" @click="stopStreaming" :disabled="capturing" v-else>
<i class="fa fa-stop"></i>&nbsp; Stop streaming
</button>
<button type="button" @click="capture" :disabled="streaming || capturing">
<i class="fas fa-camera"></i>&nbsp; Take snapshot
</button>
</div>
</div>
</script>