क्लाइंट-साइड QR Code जनरेशन और स्कैनिंग

Client-Side QR Code Generation and Scanning

Browser-based QR code generation and camera scanning eliminate server dependency, enable offline functionality, and reduce latency.

Client-Side Generation

Generate QR codes entirely in the browser using JavaScript:

• Zero server load — computation happens on the user's device
• Instant generation — no network round-trip
• Privacy — data never leaves the device
• Offline capable — works without internet connection

This is ideal for tools like QR code generators, WiFi sharing utilities, and contact card creators.

WebRTC Camera Scanning

Modern browsers support QR code scanning directly from the camera:

const stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: "environment" }
});
const video = document.getElementById("scanner");
video.srcObject = stream;

Combined with jsQR or a similar library, the video frames are analysed in real-time to detect and decode QR codes.

Progressive Enhancement

Build QR features with progressive enhancement:

1. Basic: Display QR code as a static image (server-generated)
2. Enhanced: Generate QR code client-side with JavaScript
3. Full: Client-side generation + camera scanning
4. Offline: Service Worker caches the generation library for offline use

Canvas vs SVG Rendering

Canvas: Pixel-based rendering. Fast for simple codes. Supports toDataURL() for easy download. Not scalable.

SVG: Vector rendering. Scalable, searchable, styleable with CSS. Larger DOM footprint for complex codes.

Recommendation: SVG for displayed codes (scalable, styleable), Canvas for downloadable images (easy export).

Performance Optimisation

• Use Web Workers for generation to keep the UI responsive
• Throttle camera scanning to 10-15 fps (full frame rate is unnecessary)
• Reduce video resolution for scanning (720p is sufficient for QR detection)
• Lazy-load QR generation libraries (they can be 30-100 KB)

Key Takeaways

• Client-side generation provides privacy, speed, and offline capability
• WebRTC enables camera-based QR scanning in the browser
• Progressive enhancement layers features based on browser capability
• SVG for displayed codes, Canvas for downloadable images
• Web Workers prevent generation from blocking the UI thread