Problem

When navigating between pages in applications using Html5QrcodeScanner, multiple instances of the scanner were being created without proper cleanup. This resulted in:

• Duplicate UI elements (multiple "Start Scanning" buttons, camera selectors)
• Overlapping functionality (multiple scanner instances running simultaneously)
• Performance degradation and poor user experience

The issue occurred because:

1. No automatic cleanup on page navigation/unload
2. No prevention of duplicate initialization when render() was called multiple times
3. Incomplete state reset in the clear() method

Solution

Implemented minimal, surgical changes to Html5QrcodeScanner class:

1. Duplicate Prevention

Added state tracking to prevent multiple render() calls on the same instance:

// Before: Multiple render() calls would create duplicate UI
scanner.render(onSuccess); 
scanner.render(onSuccess); // Created duplicates
// After: Second call is prevented with error logging
scanner.render(onSuccess);
scanner.render(onSuccess); // Blocked: "Html5QrcodeScanner already rendered"

2. Automatic Cleanup

Added listeners for page navigation events that automatically clean up scanner instances:

// Listens for page unload events
window.addEventListener('beforeunload', this.unloadListener);
window.addEventListener('unload', this.unloadListener); 
window.addEventListener('pagehide', this.unloadListener);

3. Complete State Reset

Enhanced clear() method to fully reset all state, allowing proper re-initialization:

• Resets isRendered flag
• Clears all internal references and callbacks
• Removes event listeners properly
• Allows new scanner creation after cleanup

Changes Made

Files Modified:

• src/html5-qrcode-scanner.ts - All changes (67 lines added)
• .gitignore - Added build artifacts

New Fields:

• isRendered: boolean - Tracks initialization state
• unloadListener: () => void - Stores cleanup listener

Enhanced Methods:

• render() - Added duplicate prevention + automatic cleanup setup
• clear() - Added complete state reset + listener cleanup
• setupAutomaticCleanup() - Registers page unload listeners
• removeAutomaticCleanup() - Safely removes listeners

Verification

✅ Before Fix: Multiple scanner UI elements visible
✅ After Fix: Single clean scanner interface

Fixed Scanner Interface

Test Results:

• ✅ Duplicate render() calls properly blocked
• ✅ Only one scanner interface appears (no duplicate buttons)
• ✅ Page navigation triggers automatic cleanup
• ✅ New scanners can be created after cleanup
• ✅ All existing functionality preserved

Backwards Compatibility

✅ Fully backwards compatible - existing code continues to work unchanged, only adds protective measures against duplicate initialization.

Fixes #986.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.