trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 8 Releases 5 Wiki Activity
Browse Source

Remove temporary alert() debug calls from ImageMethodDialog camera preview 

- Cleaned up all alert() calls used for diagnosing camera access issues on mobile browsers
- Camera preview now starts without pop-up interruptions
- Retained logging and user notifications for error handling and diagnostics
qrcode-reboot
Matt Raymer 24 hours ago
parent
913f11b66c
commit
8ac728d488
2 changed files with 185 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      src/components/ImageMethodDialog.vue
  2. 95
      src/services/QRScanner/WebInlineQRScanner.ts

108
src/components/ImageMethodDialog.vue
View File

@ -1,6 +1,37 @@
<template>
<div v-if="visible" class="dialog-overlay z-[60]">
<div class="dialog relative">
<!-- Diagnostic Panel -->
<div
v-if="showDiagnostics"
class="absolute top-0 left-0 right-0 bg-black/80 text-white text-xs p-2 z-20 overflow-auto max-h-[30vh]"
>
<div class="grid grid-cols-2 gap-2">
<div>
<p><strong>Camera State:</strong> {{ cameraState }}</p>
<p><strong>State Message:</strong> {{ cameraStateMessage || 'None' }}</p>
<p><strong>Error:</strong> {{ error || 'None' }}</p>
<p><strong>Preview Active:</strong> {{ showCameraPreview ? 'Yes' : 'No' }}</p>
<p><strong>Stream Active:</strong> {{ !!cameraStream ? 'Yes' : 'No' }}</p>
</div>
<div>
<p><strong>Browser:</strong> {{ userAgent }}</p>
<p><strong>HTTPS:</strong> {{ isSecureContext ? 'Yes' : 'No' }}</p>
<p><strong>MediaDevices:</strong> {{ hasMediaDevices ? 'Yes' : 'No' }}</p>
<p><strong>GetUserMedia:</strong> {{ hasGetUserMedia ? 'Yes' : 'No' }}</p>
<p><strong>Platform:</strong> {{ platformCapabilities.isMobile ? 'Mobile' : 'Desktop' }}</p>
</div>
</div>
</div>
<!-- Toggle Diagnostics Button -->
<button
@click="toggleDiagnostics"
class="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs z-30"
>
{{ showDiagnostics ? 'Hide Diagnostics' : 'Show Diagnostics' }}
</button>
<div class="text-lg text-center font-bold relative">
<h1 id="ViewHeading" class="text-center font-bold">
<span v-if="uploading">Uploading Image&hellip;</span>
@ -16,6 +47,28 @@
</div>
</div>
<!-- FEEDBACK: Show if camera preview is not visible after mounting -->
<div v-if="!showCameraPreview && !blob && isRegistered" class="bg-red-100 text-red-700 border border-red-400 rounded px-4 py-3 my-4 text-sm">
<strong>Camera preview not started.</strong>
<div v-if="cameraState === 'off'">
<span v-if="platformCapabilities.isMobile">
<b>Note:</b> This mobile browser may not support direct camera access, or the app is treating it as a native app.<br>
<b>Tip:</b> Try using a desktop browser, or check if your browser supports camera access for web apps.<br>
<b>Developer:</b> The platform detection logic may be skipping camera preview for mobile browsers. <br>
<b>Action:</b> Review <code>platformCapabilities.isMobile</code> and ensure web browsers on mobile are not treated as native apps.
</span>
<span v-else>
<b>Tip:</b> Your browser supports camera APIs, but the preview did not start. Try refreshing the page or checking browser permissions.
</span>
</div>
<div v-else-if="cameraState === 'error'">
<b>Error:</b> {{ error || cameraStateMessage }}
</div>
<div v-else>
<b>Status:</b> {{ cameraStateMessage || 'Unknown reason.' }}
</div>
</div>
<div class="mt-4">
<template v-if="isRegistered">
<div v-if="!blob">
@ -227,6 +280,16 @@ export default class ImageMethodDialog extends Vue {
private platformCapabilities = this.platformService.getCapabilities();
// Add diagnostic properties
showDiagnostics = false;
userAgent = navigator.userAgent;
isSecureContext = window.isSecureContext;
hasMediaDevices = !!navigator.mediaDevices;
hasGetUserMedia = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
cameraState: 'off' | 'initializing' | 'ready' | 'active' | 'error' | 'permission_denied' | 'not_found' | 'in_use' = 'off';
cameraStateMessage?: string;
error: string | null = null;
/**
* Lifecycle hook: Initializes component and retrieves user settings
* @throws {Error} When settings retrieval fails
@ -251,6 +314,14 @@ export default class ImageMethodDialog extends Vue {
-1,
);
}
// Try to start camera preview automatically if not on mobile
if (!this.platformCapabilities.isNativeApp) {
this.startCameraPreview();
} else {
logger.warn("Camera preview not started: running in native app context.");
this.cameraState = 'off';
this.cameraStateMessage = 'Camera preview not started due to native app context.';
}
}
/**
@ -267,7 +338,7 @@ export default class ImageMethodDialog extends Vue {
this.visible = true;
// Start camera preview immediately if not on mobile
if (!this.platformCapabilities.isMobile) {
if (!this.platformCapabilities.isNativeApp) {
this.startCameraPreview();
}
}
@ -339,14 +410,21 @@ export default class ImageMethodDialog extends Vue {
logger.debug("Current showCameraPreview state:", this.showCameraPreview);
logger.debug("Platform capabilities:", this.platformCapabilities);
if (this.platformCapabilities.isMobile) {
if (this.platformCapabilities.isNativeApp) {
logger.debug("Using platform service for mobile device");
this.cameraState = 'initializing';
this.cameraStateMessage = 'Using platform camera service...';
try {
const result = await this.platformService.takePicture();
this.blob = result.blob;
this.fileName = result.fileName;
this.cameraState = 'ready';
this.cameraStateMessage = 'Photo captured successfully';
} catch (error) {
logger.error("Error taking picture:", error);
this.cameraState = 'error';
this.cameraStateMessage = error instanceof Error ? error.message : 'Failed to take picture';
this.error = error instanceof Error ? error.message : 'Failed to take picture';
this.$notify(
{
group: "alert",
@ -362,13 +440,18 @@ export default class ImageMethodDialog extends Vue {
logger.debug("Starting camera preview for desktop browser");
try {
this.cameraState = 'initializing';
this.cameraStateMessage = 'Requesting camera access...';
this.showCameraPreview = true;
await this.$nextTick();
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
});
logger.debug("Camera access granted");
this.cameraStream = stream;
this.cameraState = 'active';
this.cameraStateMessage = 'Camera is active';
await this.$nextTick();
@ -385,6 +468,10 @@ export default class ImageMethodDialog extends Vue {
}
} catch (error) {
logger.error("Error starting camera preview:", error);
const errorMessage = error instanceof Error ? error.message : 'Failed to access camera';
this.cameraState = 'error';
this.cameraStateMessage = errorMessage;
this.error = errorMessage;
this.$notify(
{
group: "alert",
@ -404,6 +491,9 @@ export default class ImageMethodDialog extends Vue {
this.cameraStream = null;
}
this.showCameraPreview = false;
this.cameraState = 'off';
this.cameraStateMessage = 'Camera stopped';
this.error = null;
}
async capturePhoto() {
@ -449,7 +539,7 @@ export default class ImageMethodDialog extends Vue {
async retryImage() {
this.blob = undefined;
if (!this.platformCapabilities.isMobile) {
if (!this.platformCapabilities.isNativeApp) {
await this.startCameraPreview();
}
}
@ -533,6 +623,11 @@ export default class ImageMethodDialog extends Vue {
this.blob = undefined;
}
}
// Add toggle method
toggleDiagnostics() {
this.showDiagnostics = !this.showDiagnostics;
}
}
</script>
@ -562,4 +657,11 @@ export default class ImageMethodDialog extends Vue {
display: flex;
flex-direction: column;
}
/* Add styles for diagnostic panel */
.diagnostic-panel {
font-family: monospace;
white-space: pre-wrap;
word-break: break-all;
}
</style>

95
src/services/QRScanner/WebInlineQRScanner.ts
View File

@ -90,16 +90,57 @@ export class WebInlineQRScanner implements QRScannerService {
logger.error(
`[WebInlineQRScanner:${this.id}] Checking camera permissions...`,
);
// First try the Permissions API if available
if (navigator.permissions && navigator.permissions.query) {
try {
const permissions = await navigator.permissions.query({
name: "camera" as PermissionName,
});
logger.error(
`[WebInlineQRScanner:${this.id}] Permission state:`,
`[WebInlineQRScanner:${this.id}] Permission state from Permissions API:`,
permissions.state,
);
const granted = permissions.state === "granted";
this.updateCameraState(granted ? "ready" : "permission_denied");
return granted;
if (permissions.state === "granted") {
this.updateCameraState("ready", "Camera permissions granted");
return true;
}
} catch (permError) {
// Permissions API might not be supported, continue with getUserMedia check
logger.error(
`[WebInlineQRScanner:${this.id}] Permissions API not supported:`,
permError,
);
}
}
// If Permissions API is not available or didn't return granted,
// try a test getUserMedia call
try {
const testStream = await navigator.mediaDevices.getUserMedia({
video: true,
});
// If we get here, we have permission
testStream.getTracks().forEach(track => track.stop());
this.updateCameraState("ready", "Camera permissions granted");
return true;
} catch (mediaError) {
const error = mediaError as Error;
logger.error(
`[WebInlineQRScanner:${this.id}] getUserMedia test failed:`,
{
name: error.name,
message: error.message,
},
);
if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
this.updateCameraState("permission_denied", "Camera access denied");
return false;
}
// For other errors, we'll try requesting permissions explicitly
return false;
}
} catch (error) {
logger.error(
`[WebInlineQRScanner:${this.id}] Error checking camera permissions:`,
@ -122,6 +163,7 @@ export class WebInlineQRScanner implements QRScannerService {
logger.error(
`[WebInlineQRScanner:${this.id}] Requesting camera permissions...`,
);
// First check if we have any video devices
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(
@ -131,10 +173,12 @@ export class WebInlineQRScanner implements QRScannerService {
logger.error(`[WebInlineQRScanner:${this.id}] Found video devices:`, {
count: videoDevices.length,
devices: videoDevices.map((d) => ({ id: d.deviceId, label: d.label })),
userAgent: navigator.userAgent,
});
if (videoDevices.length === 0) {
logger.error(`[WebInlineQRScanner:${this.id}] No video devices found`);
this.updateCameraState("not_found", "No camera found on this device");
throw new Error("No camera found on this device");
}
@ -148,6 +192,7 @@ export class WebInlineQRScanner implements QRScannerService {
},
);
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: "environment",
@ -168,28 +213,35 @@ export class WebInlineQRScanner implements QRScannerService {
track.stop();
});
return true;
} catch (error) {
const wrappedError =
error instanceof Error ? error : new Error(String(error));
} catch (mediaError) {
const error = mediaError as Error;
logger.error(
`[WebInlineQRScanner:${this.id}] Error requesting camera access:`,
{
name: error.name,
message: error.message,
userAgent: navigator.userAgent,
},
);
// Update state based on error type
if (
wrappedError.name === "NotFoundError" ||
wrappedError.name === "DevicesNotFoundError"
error.name === "NotFoundError" ||
error.name === "DevicesNotFoundError"
) {
this.updateCameraState("not_found", "No camera found on this device");
throw new Error("No camera found on this device");
} else if (
wrappedError.name === "NotAllowedError" ||
wrappedError.name === "PermissionDeniedError"
error.name === "NotAllowedError" ||
error.name === "PermissionDeniedError"
) {
this.updateCameraState("permission_denied", "Camera access denied");
throw new Error(
"Camera access denied. Please grant camera permission and try again",
);
} else if (
wrappedError.name === "NotReadableError" ||
wrappedError.name === "TrackStartError"
error.name === "NotReadableError" ||
error.name === "TrackStartError"
) {
this.updateCameraState(
"in_use",
@ -197,9 +249,22 @@ export class WebInlineQRScanner implements QRScannerService {
);
throw new Error("Camera is in use by another application");
} else {
this.updateCameraState("error", wrappedError.message);
throw new Error(`Camera error: ${wrappedError.message}`);
this.updateCameraState("error", error.message);
throw new Error(`Camera error: ${error.message}`);
}
}
} catch (error) {
const wrappedError =
error instanceof Error ? error : new Error(String(error));
logger.error(
`[WebInlineQRScanner:${this.id}] Error in requestPermissions:`,
{
error: wrappedError.message,
stack: wrappedError.stack,
userAgent: navigator.userAgent,
},
);
throw wrappedError;
}
}

Write Preview
Loading…
Cancel
Save