From d9cad8e4a9b6b651cb934aff2e59c72f69c5ec16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Sun, 18 Aug 2024 07:24:39 -0700
Subject: [PATCH 1/2] assets: Add WebcamView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
---
 src/assets/widgets/WebcamView.png | Bin 0 -> 4910 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/assets/widgets/WebcamView.png

diff --git a/src/assets/widgets/WebcamView.png b/src/assets/widgets/WebcamView.png
new file mode 100644
index 0000000000000000000000000000000000000000..abeb5dc6247c52bddc96d5af7dfac27c3d0ec7e2
GIT binary patch
literal 4910
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

literal 0
HcmV?d00001


From f7af0d29c1be9df1148399c6b68f0248c8a5e008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Sun, 18 Aug 2024 07:25:37 -0700
Subject: [PATCH 2/2] widgets: Add Webcam
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
---
 src/components/EditMenu.vue       |   2 +
 src/components/widgets/Webcam.vue | 104 ++++++++++++++++++++++++++++++
 src/types/widgets.ts              |   1 +
 3 files changed, 107 insertions(+)
 create mode 100644 src/components/widgets/Webcam.vue

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index e358eba38..066a1610c 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -609,6 +609,7 @@ import MiniWidgetsBarImg from '@/assets/widgets/MiniWidgetsBar.png'
 import URLVideoPlayerImg from '@/assets/widgets/URLVideoPlayer.png'
 import VideoPlayerImg from '@/assets/widgets/VideoPlayer.png'
 import VirtualHorizonImg from '@/assets/widgets/VirtualHorizon.png'
+import WebcamViewImg from '@/assets/widgets/WebcamView.png'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { isHorizontalScroll } from '@/libs/utils'
@@ -674,6 +675,7 @@ const widgetImages = {
   CompassHUD: CompassHUDImg,
   IFrame: IFrameImg,
   ImageView: ImageViewImg,
+  Webcam: WebcamViewImg,
   Map: MapImg,
   MiniWidgetsBar: MiniWidgetsBarImg,
   URLVideoPlayer: URLVideoPlayerImg,
diff --git a/src/components/widgets/Webcam.vue b/src/components/widgets/Webcam.vue
new file mode 100644
index 000000000..dfcae06a7
--- /dev/null
+++ b/src/components/widgets/Webcam.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="w-full h-full">
+    <video ref="videoElement" :style="videoStyles" autoplay playsinline></video>
+    <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
+      <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+        <v-card-title class="text-center">Webcam Settings</v-card-title>
+        <v-card-text>
+          <div class="mt-4 flex justify-center space-x-4">
+            <GlassButton icon="mdi-rotate-left" :icon-size="40" @click="rotateLeft" />
+            <GlassButton icon="mdi-rotate-right" :icon-size="40" @click="rotateRight" />
+            <GlassButton icon="mdi-flip-horizontal" :icon-size="40" @click="flipHorizontal" />
+            <GlassButton icon="mdi-flip-vertical" :icon-size="40" @click="flipVertical" />
+          </div>
+        </v-card-text>
+        <v-card-actions class="flex justify-end">
+          <v-btn color="white" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, toRefs } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import type { Widget } from '@/types/widgets'
+
+import GlassButton from '@/components/GlassButton.vue'
+
+const interfaceStore = useAppInterfaceStore()
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Widget reference
+   */
+  widget: Widget
+}>()
+
+const widget = toRefs(props).widget
+
+const videoElement = ref<HTMLVideoElement | null>(null)
+
+const videoStyles = computed(() => {
+  const rotation = widget.value.options.rotation || 0
+  const flipHorizontal = widget.value.options.flipHorizontal ? -1 : 1
+  const flipVertical = widget.value.options.flipVertical ? -1 : 1
+
+  return {
+    objectFit: widget.value.options.fitStyle,
+    transform: `rotate(${rotation}deg) scale(${flipHorizontal}, ${flipVertical})`,
+  }
+})
+
+const rotateLeft = (): void => {
+  widget.value.options.rotation = widget.value.options.rotation - 90
+}
+
+const rotateRight = (): void => {
+  widget.value.options.rotation = widget.value.options.rotation + 90
+}
+
+const flipHorizontal = (): void => {
+  widget.value.options.flipHorizontal = !widget.value.options.flipHorizontal
+}
+
+const flipVertical = (): void => {
+  widget.value.options.flipVertical = !widget.value.options.flipVertical
+}
+
+onMounted(async () => {
+  if (Object.keys(widget.value.options).length === 0) {
+    widget.value.options = {
+      fitStyle: 'cover',
+      rotation: 0,
+      flipHorizontal: false,
+      flipVertical: false,
+    }
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  if (videoElement.value) {
+    videoElement.value.srcObject = stream
+  }
+})
+
+onUnmounted(() => {
+  if (videoElement.value && videoElement.value.srcObject) {
+    const mediaStream = videoElement.value.srcObject as MediaStream
+    mediaStream.getTracks().forEach((track) => track.stop())
+  }
+})
+</script>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+</style>
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index 23e2f704e..3475157a7 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -11,6 +11,7 @@ export enum WidgetType {
   CompassHUD = 'CompassHUD',
   IFrame = 'IFrame',
   ImageView = 'ImageView',
+  Webcam = 'Webcam',
   Map = 'Map',
   MiniWidgetsBar = 'MiniWidgetsBar',
   URLVideoPlayer = 'URLVideoPlayer',