Added camera web panel

platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss

@@ -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;
+        }
+    }
+}
+

platypush/backend/http/static/js/plugins/camera/index.js

@@ -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);
+    },
+});
+

platypush/backend/http/templates/nav.html

@@ -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',

platypush/backend/http/templates/plugins/camera/index.html

@@ -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>
+