From 46dcd389a4480c67e6689fe3cbdd558f5bccd667 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Wed, 10 Apr 2024 00:14:53 -0400 Subject: [PATCH] This is nearly working. --- src/lib/element_qr_scanner.svelte | 201 ++++++++++++------ .../exhibit/[slug]/leads_add_scan.svelte | 22 +- 2 files changed, 152 insertions(+), 71 deletions(-) diff --git a/src/lib/element_qr_scanner.svelte b/src/lib/element_qr_scanner.svelte index b2bce7d1..c9c55f0d 100644 --- a/src/lib/element_qr_scanner.svelte +++ b/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 - if (start_qr_scanner) { - handle_start_qr_scanning(); - } - + // NOTE: We only want to trigger the scanning to start after the page has fully loaded. 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) { - // // console.log('Scanner is not started'); - // } else { - // console.log('Scanner is already started'); - // return; - // } + if (html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) { + // console.log('Scanner is not started'); - 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; - }); + return await 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'; + + // 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; + } + + } @@ -161,28 +206,46 @@ function handle_resume_qr_scanning() { } -function handle_stop_qr_scanning() { - if (html5_qr_code && html5_qr_code.getState() == Html5QrcodeScannerState.NOT_STARTED) { +async function handle_stop_qr_scanning() { + 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; - // qr_found_text = null; + if (state == Html5QrcodeScannerState.PAUSED || state == Html5QrcodeScannerState.SCANNING) { + 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) => { - console.log('Scanning has stopped'); - document.getElementById('qr_scanner_viewfinder').classList.add('d_none'); - scanning_status = 'not_started'; - }).then((ignore) => { - // html5_qr_code = null; - html5_qr_code.clear(); - }).catch((err) => { - console.log('There was an error while trying to stop the scanning'); - return false; - }); + // return html5_qr_code.stop() + // .then((ignore) => { + // console.log('Scanning has stopped'); + // // document.getElementById('qr_scanner_viewfinder').classList.add('d_none'); + // scanning_status = 'not_started'; + // }).then((ignore) => { + // // html5_qr_code = null; + // // html5_qr_code.clear(); + // }).catch((err) => { + // 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 = ` +
Scott, +

This is an automatic debug email from the Aether QR scanner.

+
+ +
+ +
+ Message:
+ 
+    ${JSON.stringify(message)}
+
+
+ `; + + 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, + }); +} + + diff --git a/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte b/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte index 3bdb9a45..5211c92c 100644 --- a/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte +++ b/src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte @@ -799,25 +799,26 @@ function handle_qr_camera(event) {