feat: support ip camera streams

fluidd-core · Nov 12, 2020 · a055bce · a055bce
1 parent 6e09088
commit a055bce
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/src/components/cards/dashboard/CameraCard.vue b/src/components/cards/dashboard/CameraCard.vue
@@ -3,7 +3,9 @@
     title="Camera"
     icon="$camera"
     :collapsed="true">
-    <img :src="cameraUrl" class="webcam" :style="cameraTransforms" />
+
+    <img :src="cameraUrl" class="webcam" :style="cameraTransforms" v-if="streamType === 'mjpgstreamer'" />
+    <video :src="cameraUrl" autoplay class="webcam" :style="cameraTransforms" v-if="streamType === 'ipcamera'" />
   </collapsable-card>
 </template>
 
@@ -20,6 +22,10 @@ import DialogConfirm from '@/components/dialogs/dialogConfirm.vue'
   }
 })
 export default class CameraCard extends Mixins(UtilsMixin) {
+  get streamType () {
+    return this.$store.state.config.fileConfig.camera.type
+  }
+
   get cameraUrl (): string {
     return this.$store.state.config.fileConfig.camera.url
   }

diff --git a/src/components/cards/settings/CameraSettingsCard.vue b/src/components/cards/settings/CameraSettingsCard.vue
@@ -16,10 +16,17 @@
         v-model="flipX">
       </v-switch>
       <v-switch
+        class="mb-4"
         label="Flip vertically"
         hide-details
         v-model="flipY">
       </v-switch>
+      <v-select
+        label="Stream type"
+        hide-details="auto"
+        :items="[{ text: 'mjpgstreamer', value: 'mjpgstreamer' }, { text: 'ip camera', value: 'ipcamera' }]"
+        v-model="streamType">
+      </v-select>
       <v-text-field
         class="mt-5"
         filled
@@ -69,5 +76,13 @@ export default class CameraSettingsCard extends Mixins(UtilsMixin) {
   set flipY (value: boolean) {
     this.$store.dispatch('config/saveGeneric', { key: 'fileConfig.camera.flipY', value })
   }
+
+  get streamType () {
+    return this.$store.state.config.fileConfig.camera.type
+  }
+
+  set streamType (value: string) {
+    this.$store.dispatch('config/saveGeneric', { key: 'fileConfig.camera.type', value })
+  }
 }
 </script>
diff --git a/src/store/config/index.ts b/src/store/config/index.ts
@@ -30,6 +30,7 @@ export const state: ConfigState = {
     },
     camera: {
       enabled: false,
+      type: 'mjpgstreamer',
       url: '/webcam/?action=stream',
       flipX: false,
       flipY: false

diff --git a/src/store/config/types.ts b/src/store/config/types.ts
@@ -41,6 +41,7 @@ export interface AxisConfig {
 
 export interface CameraConfig {
   enabled: boolean;
+  type: 'mjpgstreamer' | 'ipcamera';
   url: string;
   flipX: boolean;
   flipY: boolean;