trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

feat(qr): improve camera error feedback and robustness in QR scanner

Browse Source 
- Display prominent, actionable error banners in QR scanner dialog for camera access issues
- Add troubleshooting tips for common camera errors (no device, denied, in use, HTTPS)
- Enhance error handling and logging in WebDialogQRScanner for device detection and permissions
- Use proper type narrowing for promise handling in QRScannerDialog to resolve linter errors
- Improve user experience and clarity when camera access fails or is unavailable
This commit is contained in:
Matthew Raymer
2025-04-28 11:58:15 +00:00
parent 7b7940189e
commit 538cbef701
2 changed files with 173 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/QRScanner/QRScannerDialog.vue
View File

@@ -13,7 +13,7 @@
>
<div>
<h3 class="text-lg font-medium text-gray-900">Scan QR Code</h3>
<span class="text-xs text-gray-500">v1.1.0 build 00000</span>
<span class="text-xs text-gray-500">v1.1.0</span>
</div>
<button
class="text-gray-400 hover:text-gray-500"
@@ -67,8 +67,7 @@
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0
3.042 1.135 5.824 3 7.938l3-2.647z"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<span>{{ initializationStatus }}</span>
@@ -138,8 +137,7 @@
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0
011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
/>
<path
stroke-linecap="round"
@@ -164,6 +162,19 @@
</div>
</div>
<!-- Error Banner -->
<div v-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
<strong class="font-bold">Camera Error:</strong>
<span class="block sm:inline">{{ error }}</span>
<ul class="mt-2 text-sm text-red-600 list-disc list-inside">
<li v-if="error.includes('No camera found')">Check if your device has a camera and it is enabled.</li>
<li v-if="error.includes('denied')">Allow camera access in your browser settings and reload the page.</li>
<li v-if="error.includes('in use')">Close other applications that may be using the camera.</li>
<li v-if="error.includes('HTTPS')">Ensure you are using a secure (HTTPS) connection.</li>
<li v-if="!error.includes('No camera found') && !error.includes('denied') && !error.includes('in use') && !error.includes('HTTPS')">Try refreshing the page or using a different browser/device.</li>
</ul>
</div>
<!-- Footer -->
<div class="p-4 border-t border-gray-200">
<div class="flex flex-col space-y-4">
@@ -197,14 +208,6 @@
</div>
</div>
</div>
<div v-if="debugMessage" class="bg-yellow-200 text-black p-2 m-2 rounded">
{{ debugMessage }}
</div>
<div class="bg-red-200 text-black p-2 m-2 rounded">
DEBUG PANEL: If you see this, the template is updating.
</div>
</div>
</div>
</template>
@@ -259,7 +262,6 @@ export default class QRScannerDialog extends Vue {
preferredCamera: "user" | "environment" = "environment";
initializationStatus = "Checking camera access...";
cameraStatus = "Initializing";
debugMessage = "";
created() {
logger.log("QRScannerDialog platform detection:", {
@@ -282,45 +284,105 @@ export default class QRScannerDialog extends Vue {
}
}
async onInit(promise: Promise<void>) {
alert("onInit called");
this.debugMessage = "onInit called";
let timeoutHit = false;
const timeout = setTimeout(() => {
timeoutHit = true;
this.isInitializing = false;
this.cameraStatus = "Ready (timeout fallback)";
this.initializationStatus = "Camera ready (fallback)";
alert("Timeout fallback triggered");
this.debugMessage = "Timeout fallback triggered";
}, 4000);
async onInit(promise: Promise<void>): Promise<void> {
if (this.isNativePlatform) {
logger.log("Closing QR dialog on native platform");
this.$nextTick(() => this.close());
return;
}
this.isInitializing = true;
this.error = null;
this.initializationStatus = "Checking camera access...";
try {
await promise;
if (!timeoutHit) {
clearTimeout(timeout);
this.isInitializing = false;
this.cameraStatus = "Ready";
alert("Promise resolved before timeout");
this.debugMessage = "Promise resolved before timeout";
// First check if mediaDevices API is available
if (!navigator.mediaDevices) {
throw new Error(
"Camera API not available. Please ensure you're using HTTPS.",
);
}
} catch (error) {
clearTimeout(timeout);
alert("Promise rejected: " + (error instanceof Error ? error.message : error));
this.debugMessage = "Promise rejected: " + (error instanceof Error ? error.message : error);
if (error instanceof Error) {
this.error = error.message;
this.cameraStatus = "Error";
if (this.onError) {
this.onError(error);
// Check for video devices
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
if (videoDevices.length === 0) {
throw new Error("No camera found on this device");
}
logger.log("Starting QR scanner initialization...", {
mediaDevices: !!navigator.mediaDevices,
getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
videoDevices: videoDevices.length,
constraints: {
video: {
facingMode: this.preferredCamera,
width: { ideal: 1280 },
height: { ideal: 720 }
}
}
logger.error("Error initializing QR scanner:", {
error: error.message,
stack: error.stack,
name: error.name,
type: error.constructor.name,
});
// Explicitly request camera permission first
this.initializationStatus = "Requesting camera permission...";
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: this.preferredCamera,
width: { ideal: 1280 },
height: { ideal: 720 }
}
});
// Stop the test stream immediately
stream.getTracks().forEach((track) => track.stop());
this.initializationStatus = "Camera permission granted...";
logger.log("Camera permission granted");
} catch (permissionError) {
const error = permissionError as Error;
logger.error("Camera permission error:", {
name: error.name,
message: error.message,
});
if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
throw new Error(
"Camera access denied. Please grant camera permission and try again.",
);
} else if (error.name === "NotFoundError" || error.name === "DevicesNotFoundError") {
throw new Error(
"No camera found. Please ensure your device has a camera.",
);
} else if (error.name === "NotReadableError" || error.name === "TrackStartError") {
throw new Error("Camera is in use by another application.");
} else {
throw new Error(`Camera error: ${error.message}`);
}
}
// Now initialize the QR scanner
this.initializationStatus = "Starting QR scanner...";
logger.log("Initializing QR scanner...");
await promise;
this.isInitializing = false;
this.cameraStatus = "Ready";
logger.log("QR scanner initialized successfully");
} catch (error) {
const wrappedError = error instanceof Error ? error : new Error(String(error));
this.error = wrappedError.message;
this.cameraStatus = "Error";
if (this.onError) {
this.onError(wrappedError);
}
logger.error("Error initializing QR scanner:", {
error: wrappedError.message,
stack: wrappedError.stack,
name: wrappedError.name,
type: wrappedError.constructor.name,
});
} finally {
this.isInitializing = false;
}
@@ -353,8 +415,8 @@ export default class QRScannerDialog extends Vue {
}
};
// Handle both promise and non-promise results
if (result && typeof result.then === "function") {
// Use instanceof Promise for type narrowing
if (result instanceof Promise) {
result
.then(processResult)
.catch((error: Error) => this.handleError(error))

71
src/services/QRScanner/WebDialogQRScanner.ts
View File

@@ -28,26 +28,79 @@ export class WebDialogQRScanner implements QRScannerService {
async requestPermissions(): Promise<boolean> {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
stream.getTracks().forEach((track) => track.stop());
// First check if we have any video devices
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(device => device.kind === 'videoinput');
if (videoDevices.length === 0) {
logger.error('No video devices found');
throw new Error('No camera found on this device');
}
// Try to get a stream with specific constraints
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
width: { ideal: 1280 },
height: { ideal: 720 }
}
});
// Stop the test stream immediately
stream.getTracks().forEach(track => track.stop());
return true;
} catch (error) {
logger.error("Error requesting camera permissions:", {
error: error instanceof Error ? error.message : String(error),
stack: error instanceof Error ? error.stack : undefined,
const wrappedError = error instanceof Error ? error : new Error(String(error));
logger.error('Error requesting camera permissions:', {
error: wrappedError.message,
stack: wrappedError.stack,
name: wrappedError.name
});
return false;
// Provide more specific error messages
if (wrappedError.name === 'NotFoundError' || wrappedError.name === 'DevicesNotFoundError') {
throw new Error('No camera found on this device');
} else if (wrappedError.name === 'NotAllowedError' || wrappedError.name === 'PermissionDeniedError') {
throw new Error('Camera access denied. Please grant camera permission and try again');
} else if (wrappedError.name === 'NotReadableError' || wrappedError.name === 'TrackStartError') {
throw new Error('Camera is in use by another application');
} else {
throw new Error(`Camera error: ${wrappedError.message}`);
}
}
}
async isSupported(): Promise<boolean> {
try {
// Check for secure context first
if (!window.isSecureContext) {
logger.warn("Camera access requires HTTPS (secure context)");
logger.warn('Camera access requires HTTPS (secure context)');
return false;
}
// Check for camera API support
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
logger.warn('Camera API not supported in this browser');
return false;
}
// Check if we have any video devices
const devices = await navigator.mediaDevices.enumerateDevices();
const hasVideoDevices = devices.some(device => device.kind === 'videoinput');
if (!hasVideoDevices) {
logger.warn('No video devices found');
return false;
}
return true;
} catch (error) {
logger.error('Error checking camera support:', {
error: error instanceof Error ? error.message : String(error),
stack: error instanceof Error ? error.stack : undefined
});
return false;
}
// Then check for camera API support
return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
}
async startScan(): Promise<void> {