feat: streaming via socket io and redis

client/src/App.vue

@@ -3,7 +3,7 @@
     <div class="toggle-button" @click="toggleFullScreen">
       toggleFullScreen
     </div>
-    <image-stream :path="streamSource"/>
+    <image-stream/>
     <Nipple :position="'left'" @move="moveCamera"/>
     <Nipple :position="'right'" @move="moveWalle"/>
   </div>
@@ -19,7 +19,6 @@ export default {
   },
   data() {
     return {
-      streamSource: '/imagestream.mjpg',
     };
   },
   methods: {

client/src/components/ImageStream.vue

@@ -1,12 +1,19 @@
 <template>
-  <img class="video-stream" :src="path" alt="">
+  <img class="video-stream" :src="dataurl" alt="">
 </template>
 
 <script>
 export default {
   name: 'ImageStream',
-  props: {
-    path: String,
+  data() {
+    return {
+      dataurl: '',
+    };
+  },
+  sockets: {
+    cameraImage(data) {
+      this.dataurl = data.image;
+    },
   },
 };
 </script>