Bug fixes

CHANGELOG.md

@@ -1,5 +1,10 @@
 # bedrock-vue-barcode-scanner ChangeLog
 
+## 1.6.2 - 2025-07-dd
+
+### Fixed
+- Fix camera config to allow video stream to render webcam.
+
 ## 1.6.1 - 2025-07-02
 
 ### Fixed

components/BarcodeScanner.vue

@@ -17,9 +17,9 @@
 /*!
  * Copyright (c) 2024-2025 Digital Bazaar, Inc. All rights reserved.
  */
+import {computed, inject, onMounted, onUnmounted, reactive, ref} from 'vue';
 import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats}
   from 'html5-qrcode';
-import {inject, onMounted, onUnmounted, reactive, ref} from 'vue';
 import {detectBarcodes} from '../lib/barcodes.js';
 import ScannerUI from './ScannerUI.vue';
 import {useQuasar} from 'quasar';
@@ -74,6 +74,15 @@ export default {
     // Inject
     const {selectedCameraId, updateSelectedCamera} = inject('selectedCameraId');
 
+    // determine aspect ratio based on portrait/landscape orientation
+    const aspectRatio = computed(() => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      // must parse float aspect ratio value
+      return parseFloat(
+        _isPortrait() ? height / width : width / height).toFixed(3);
+    });
+
     // Lifecycle hooks
     onMounted(async () => {
       // map formats from Web standard to `Html5QrcodeSupportedFormats`
@@ -211,17 +220,15 @@ export default {
     }
 
     function getCameraScanConfig() {
-      const width = window.innerWidth;
-      const height = window.innerHeight;
-      // must parse float aspect ratio value
-      const landscapeAspectRatio = parseFloat((width / height).toFixed(3));
-      const portraitAspectRatio = parseFloat((height / width).toFixed(3));
       return {
+        /**
+         * When facingMode is set an object with the property `exact`
+         * an OverconstrainedError is thrown. If the facingMode value is
+         * completely removed, the front camera is selected on iOS.
+         */
         videoConstraints: {
-          facingMode: {exact: 'environment'},
-          aspectRatio: width < height ?
-            portraitAspectRatio :
-            landscapeAspectRatio
+          facingMode: 'environment',
+          aspectRatio: aspectRatio.value,
         },
         ...(props.showQrBox && {qrbox: qrboxFunction})
       };
@@ -269,6 +276,12 @@ export default {
       );
     }
 
+    // desktop is never considered for portrait mode
+    function _isPortrait() {
+      const isDesktop = $q.platform.is.desktop;
+      return !isDesktop && window.matchMedia('(orientation: portrait)').matches;
+    }
+
     return {
       emit,
       cameraList,