From 15f6a517e70a24174ed22481d42be28716740d2c Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Wed, 26 Mar 2025 23:43:53 +0100
Subject: [PATCH] Fix camera flipping on mobile

---
 showbits-thermal-printer-ui/src/AppPhoto.vue | 32 ++++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/AppPhoto.vue b/showbits-thermal-printer-ui/src/AppPhoto.vue
index 5b5c9a3..bce0d70 100644
--- a/showbits-thermal-printer-ui/src/AppPhoto.vue
+++ b/showbits-thermal-printer-ui/src/AppPhoto.vue
@@ -7,7 +7,7 @@ import { assert } from "./lib/assert";
 
 const video = useTemplateRef<HTMLVideoElement>("video");
 
-const live = ref(false);
+const stream = ref<MediaStream>();
 const facing = ref<string>();
 const mirrored = computed(() => facing.value === "user");
 const covered = ref(false);
@@ -20,16 +20,27 @@ function getFacingModeFromStream(stream: MediaStream): string | undefined {
 }
 
 async function initStream(facingMode?: string) {
-  const stream = await navigator.mediaDevices.getUserMedia({
+  assert(video.value !== null);
+  const video_ = video.value;
+
+  // If the tracks are not all stopped, getUserMedia throws an exception.
+  if (stream.value !== undefined) {
+    for (const track of stream.value.getTracks()) {
+      track.stop();
+    }
+  }
+
+  stream.value = undefined;
+  facing.value = undefined;
+  video_.srcObject = null;
+
+  stream.value = await navigator.mediaDevices.getUserMedia({
     video: { facingMode: { ideal: facingMode } },
   });
 
-  // Display stream as video
-  assert(video.value !== null);
-  video.value.srcObject = stream;
+  facing.value = getFacingModeFromStream(stream.value);
 
-  live.value = true;
-  facing.value = getFacingModeFromStream(stream);
+  video_.srcObject = stream.value;
 }
 
 async function waitAtLeast(duration: number, since: number) {
@@ -88,8 +99,11 @@ onMounted(async () => {
   <video ref="video" :class="{ mirrored }" autoplay playsinline></video>
   <div class="buttons">
     <CPhotoButtonGallery style="visibility: hidden" />
-    <CPhotoButtonRecord :disabled="!live" @click="onRecord" />
-    <CPhotoButtonFlip :disabled="facing === undefined" @click="onFlip" />
+    <CPhotoButtonRecord :disabled="stream === undefined" @click="onRecord" />
+    <CPhotoButtonFlip
+      :disabled="stream === undefined || facing === undefined"
+      @click="onFlip"
+    />
   </div>
   <div class="cover" :class="{ hidden: !covered }"></div>
 </template>