base components on collections

src/components/CodeDetector.vue

@@ -2,7 +2,7 @@
   <div class="w-full md:max-w-md">
     <XMarkIcon class="ml-auto mb-2 w-5 h-5 cursor-pointer" @click="closeModal" />
     <qrcode-stream
-      :constraints="selectedCamera.constraints"
+      :constraints="selectedCamera?.constraints"
       :track="trackFunctionOptions[4].value"
       :formats="barcodeFormats"
       :paused="paused"
@@ -31,6 +31,7 @@ import {
   getAvailableCameras,
   handleScannerError,
   trackFunctionOptions,
+  type Camera,
 } from "../helpers/codeScanner";
 import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
 import { XMarkIcon } from "@heroicons/vue/24/outline";
@@ -47,7 +48,7 @@ export default defineComponent({
   data() {
     return {
       selecteableCameras: defaultConstraintOptions,
-      selectedCamera: defaultConstraintOptions[0],
+      selectedCamera: undefined as undefined | Camera,
       paused: false,
       detected: "",
     };
@@ -56,6 +57,9 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     async onCameraReady() {
       this.selecteableCameras = await getAvailableCameras();
+      if (!this.selectedCamera) {
+        this.selectedCamera = this.selecteableCameras[0];
+      }
     },
     onDetect(result: Array<DetectedBarcode>) {
       this.paused = true;