This is nearly working.

src/lib/element_qr_scanner.svelte

@@ -5,6 +5,8 @@ import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats} from 'html5-qrcode';
 
 // *** Import Aether core variables and functions
+import { api } from '$lib/api';
+import { ae_api } from '$lib/ae_stores';
 
 // *** Import Aether core components
 // import Element_input from './element_input.svelte';
@@ -35,6 +37,9 @@ let qr_entered_badge_id: null|string = null;
 let show_qr_manual_entry: null|boolean = null;
 let disable_submit_badge_id_btn: boolean = true;
 
+let user_media_status = 'not_requested';
+
+
 // let max_results: number = 50;
 
 const dispatch = createEventDispatcher();
@@ -53,36 +58,52 @@ let qr_scan_cfg = { fps: qr_fps, qrbox: qr_viewfinder_width }; // 275 seems good
 onMount(() => {
     console.log('** Element Mounted: ** QR Scanner');
 
-    // NOTE: This can only be done after the page has fully loaded. At least that is what my tests have shown so far. -2022-12-02
+    // NOTE: We only want to trigger the scanning to start after the page has fully loaded.
-    if (start_qr_scanner) {
-        handle_start_qr_scanning();
-    }
-
     navigator.mediaDevices.getUserMedia({video: true})
     .then(successCallback, errorCallback);
+
+    // NOTE: This can only be done after the page has fully loaded.
+    // if (start_qr_scanner) {
+    //     handle_start_qr_scanning();
+    // }
 });
 
 
-onDestroy(() => {
+onDestroy(async () => {
     console.log('** Element Destroyed: ** QR Scanner');
 
     qr_scan_result = null;
     qr_found_text = null;
 
-    handle_stop_qr_scanning();
+    await handle_stop_qr_scanning();
 });
 
 
 var successCallback = function(error: any) {
     console.log('Camera access allowed');
+    user_media_status = 'allowed';
+
+    // let subject = 'Camera Access Allowed';
+    // let message = error;
+    // send_init_confirm_email(subject, message);
 
     dispatch('qr_camera', {
         status: 'allowed',
     });
+
+    // NOTE: This can only be done after the page has fully loaded.
+    if (start_qr_scanner) {
+        handle_start_qr_scanning();
+    }
 };
 var errorCallback = function(error: any) {
     if (error.name == 'NotAllowedError') {
         console.log('Camera access not allowed!');
+        user_media_status = 'denied';
+
+        // let subject = 'Camera Access Denied';
+        // let message = error;
+        // send_init_confirm_email(subject, message);
 
         dispatch('qr_camera', {
             status: 'denied',
@@ -100,16 +121,24 @@ var errorCallback = function(error: any) {
 // }
 
 
-function handle_start_qr_scanning() {
+async function handle_start_qr_scanning() {
     console.log('*** handle_start_qr_scanning() ***');
 
+    if (user_media_status == 'denied') {
+        console.log('Camera access not allowed!');
+        return;
+    } else if (user_media_status == 'not_requested') {
+        console.log('Camera access not requested yet!');
+        return;
+    }
+
     qr_scan_result = null;
     qr_found_text = null;
 
     if (html5_qr_code) {
         console.log('html5_qr_code object found. Clearing and creating new Html5Qrcode...');
         // html5_qr_code.clear();
-        document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
+        // document.getElementById('qr_scanner_viewfinder').classList.remove('d_none');
 
         html5_qr_code = new Html5Qrcode(
             'qr_scanner_viewfinder', { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] }
@@ -121,21 +150,37 @@ function handle_start_qr_scanning() {
         );
     }
 
-    // if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
+    if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
-    //     // console.log('Scanner is not started');
+        // console.log('Scanner is not started');
-    // } else {
+
-    //     console.log('Scanner is already started');
+        return await html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error)
-    //     return;
+        .then((ignore: any) => {
-    // }
+            console.log('Scanning has started');
+            scanning_status = 'scanning';
+
+            // let subject = 'QR Scanning Started';
+            // let message = ignore;
+            // send_init_confirm_email(subject, message);
+
+            return true;
+        }).catch((err) => {
+            console.log('There was an error while trying to start the QR scanner');
+            scanning_status = 'start_error';
+
+            // let subject = 'QR Scanning Start Error';
+            // let message = err;
+            // send_init_confirm_email(subject, message);
+
+            return false;
+        });
+
+
+    } else {
+        console.log('Scanner is already started');
+        return;
+    }
+
     
-    html5_qr_code.start({ facingMode: qr_facing_mode }, qr_scan_cfg, handle_qr_scan_success, handle_qr_scan_error).then((ignore: any) => {
-        console.log('Scanning has started');
-        scanning_status = 'scanning';
-        return true;
-    }).catch((err) => {
-        console.log('There was an error while trying to start the QR scanner');
-        return false;
-    });
 }
 
 
@@ -161,28 +206,46 @@ function handle_resume_qr_scanning() {
 }
 
 
-function handle_stop_qr_scanning() {
+async function handle_stop_qr_scanning() {
-    if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) {
+    start_qr_scanner = false;
+
+    if (!html5_qr_code) {
+        console.log('html5_qr_code object found. Nothing to stop?');
+        return false;
+    }
+    
+    let state = html5_qr_code.getState();
+    console.log('html5_qr_code state:', state);
+
+    if (state == Html5QrcodeScannerState.NOT_STARTED) {
         console.log('Scanner is not started');
         return;
     }
 
-    // qr_scan_result = null;
+    if (state == Html5QrcodeScannerState.PAUSED || state == Html5QrcodeScannerState.SCANNING) {
-    // qr_found_text = null;
+        console.log('Scanner is not started');
+        await html5_qr_code.stop()
+        scanning_status = 'not_started';
+        return;
+    }
+
+    await html5_qr_code.clear();
+    return true;
 
     // html5_qr_code.pause();
 
-    html5_qr_code.stop().then((ignore) => {
+    // return html5_qr_code.stop()
-        console.log('Scanning has stopped');
+    // .then((ignore) => {
-        document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
+    //     console.log('Scanning has stopped');
-        scanning_status = 'not_started';
+    //     // document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
-    }).then((ignore) => {
+    //     scanning_status = 'not_started';
-        // html5_qr_code = null;
+    // }).then((ignore) => {
-        html5_qr_code.clear();
+    //     // html5_qr_code = null;
-    }).catch((err) => {
+    //     // html5_qr_code.clear();
-        console.log('There was an error while trying to stop the scanning');
+    // }).catch((err) => {
-        return false;
+    //     console.log('There was an error while trying to stop the scanning');
-    });
+    //     return false;
+    // });
 
     // html5_qr_code = null;
 }
@@ -204,29 +267,7 @@ function handle_qr_scan_success(decoded_text, decoded_result) {
     });
 
     // handle_pause_qr_scanning();
-
     handle_stop_qr_scanning();
-
-    // html5_qr_code.stop().then((ignore) => {
-    //     console.log('Scanning has stopped');
-    //     scanning_status = 'not_started';
-    //     document.getElementById('qr_scanner_viewfinder').classList.add('d_none');
-
-    //     qr_scan_result = decoded_text;
-    //     qr_found_text = decoded_text;
-
-    //     dispatch('qr_scan_result', {
-    //         result: qr_scan_result,
-    //         entry_method: 'QR',
-    //     });
-
-    //     // qr_scan_result = null;
-    //     // qr_found_text = null;
-    //     return true;
-    // }).catch((err) => {
-    //     console.log('There was an error while trying to stop the scanning');
-    //     return false;
-    // });
 }
 
 
@@ -277,6 +318,46 @@ function handle_qr_manual_entry() {
     qr_scan_result = null;
     qr_entered_text = null;
 }
+
+
+
+
+
+function send_init_confirm_email(subject, message) {
+    console.log(`*** send_init_confirm_email() *** ${subject}`);
+
+    let to_email = 'scott.idem+skdev@oneskyit.com';
+
+    // let origin_url = encodeURI(`${data.url.origin}`);
+
+    let full_subject = `${subject} Aether QR Scanner Debugging`;
+
+    let body_html = `
+    <div>Scott,
+    <p>This is an automatic debug email from the Aether QR scanner.</p>
+    </div>
+
+    <br>
+
+    <div>
+    Message:<br>
+    <pre>
+    ${JSON.stringify(message)}
+    </pre>
+    </div>
+    `;
+
+    api.send_email({
+        api_cfg: $ae_api,
+        from_email: 'noreply+ae_qr_debug@oneskyit.com',
+        from_name: 'AE QR Debug',
+        to_email: to_email,
+        subject: full_subject,
+        body_html: body_html,
+    });
+}
+
+
 </script>
 
 

src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte

@@ -799,25 +799,26 @@ function handle_qr_camera(event) {
         </section> <!-- .popover__content -->
 
         <footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
-            <div class="popover__content__actions">
+            <!-- <div class="popover__content__actions">
                 <button
-                    type="submit"
+                    type="button"
-                    form="form__scan_text"
                     class="btn variant-soft-primary"
-                    disabled={scan_submit_results instanceof Promise && !scan_submit_results}
                     on:click={() => {
-                        // trigger = 'save__ds__code';
+                        $events_sess.leads.qr_scan_start = !$events_sess.leads.qr_scan_start;
-                        // $slct_trigger = 'save__ds__code';
                     }}
                     >
                     <span class="fas fa-search mx-1"></span>
-                    Scan
+                    {#if $events_sess.leads.qr_scan_start}
+                        Stop Scanning
+                    {:else}
+                        Scanning
+                    {/if}
                 </button>
-            </div>
+            </div> -->
 
             <div class="popover__status">
                 <!-- Something text -->
-                {#await scan_submit_results}
+                <!-- {#await scan_submit_results}
                     <div class="modal-loading">
                         <span class="fas fa-spinner fa-spin"></span>
                         <span class="loading-text">
@@ -834,7 +835,7 @@ function handle_qr_camera(event) {
                         </span>
                     </div>
                     {/if}
-                {/await}
+                {/await} -->
 
                 <div
                     class="ae_debug"
@@ -849,7 +850,6 @@ function handle_qr_camera(event) {
                 type="button"
                 class="btn variant-soft-primary"
                 on:click={() => {
-
                     $events_sess.leads.show_form__scan = false;
                     $events_sess.leads.qr_scan_start = false;
                 }}