Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix camera flipping on mobile

Browse source
This commit is contained in:
Joscha 2025-03-26 23:43:53 +01:00
parent 9e0e0f4359
commit 15f6a517e7
1 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

32
showbits-thermal-printer-ui/src/AppPhoto.vue
View file

@ -7,7 +7,7 @@ import { assert } from "./lib/assert";
const video = useTemplateRef<HTMLVideoElement>("video"); const video = useTemplateRef<HTMLVideoElement>("video");
const live = ref(false); const stream = ref<MediaStream>();
const facing = ref<string>(); const facing = ref<string>();
const mirrored = computed(() => facing.value === "user"); const mirrored = computed(() => facing.value === "user");
const covered = ref(false); const covered = ref(false);
@ -20,16 +20,27 @@ function getFacingModeFromStream(stream: MediaStream): string | undefined {
} }
async function initStream(facingMode?: string) { 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 } }, video: { facingMode: { ideal: facingMode } },
}); });
// Display stream as video facing.value = getFacingModeFromStream(stream.value);
assert(video.value !== null);
video.value.srcObject = stream;
live.value = true; video_.srcObject = stream.value;
facing.value = getFacingModeFromStream(stream);
} }
async function waitAtLeast(duration: number, since: number) { async function waitAtLeast(duration: number, since: number) {
@ -88,8 +99,11 @@ onMounted(async () => {
<video ref="video" :class="{ mirrored }" autoplay playsinline></video> <video ref="video" :class="{ mirrored }" autoplay playsinline></video>
<div class="buttons"> <div class="buttons">
<CPhotoButtonGallery style="visibility: hidden" /> <CPhotoButtonGallery style="visibility: hidden" />
<CPhotoButtonRecord :disabled="!live" @click="onRecord" /> <CPhotoButtonRecord :disabled="stream === undefined" @click="onRecord" />
<CPhotoButtonFlip :disabled="facing === undefined" @click="onFlip" /> <CPhotoButtonFlip
:disabled="stream === undefined || facing === undefined"
@click="onFlip"
/>
</div> </div>
<div class="cover" :class="{ hidden: !covered }"></div> <div class="cover" :class="{ hidden: !covered }"></div>
</template> </template>