QR Code Connection System

ErikrafT Drop’s QR code feature provides a fast, user-friendly method for device pairing. The system generates QR codes containing pairing information that can be scanned by another device’s camera, eliminating the need for manual key entry.

QR Code Architecture

QR Code Generation

The QR code system uses the qr-code.min.js library to generate scannable codes:

// From ui.js lines 1969-1980
const qr = new QRCode({
    content: this._getPairUrl(),
    width: 130,
    height: 130,
    color: {
        dark: "#000000",
        light: "#FFFFFF"
    },
    ecl: "L", // Error correction level L (Low)
    join: true
});
this.$qrCode.innerHTML = qr.svg();

Pair URL Structure

The QR code contains a URL with the pairing key as a parameter:

// From ui.js lines 1983-2002
_getPairUrl() {
    const url = new URL(location.href);
    url.searchParams.delete('pair_key');
    url.hash = '';
    if (this.pairKey) {
        url.searchParams.append('pair_key', this.pairKey);
    }
    return url.href;
}

Example URL:

https://drop.erikraft.com/?pair_key=123456

QR Code Components

Visual Elements

The QR code interface includes several key components:

Pair Key Display

// From ui.js lines 1967
this.$key.innerText = `${this.pairKey.substring(0, 3)} ${this.pairKey.substring(3, 6)}`

QR Code Container

// From ui.js lines 1903
this.$qrCode = this.$el.querySelector('.key-qr-code');

Copy Functionality

// From ui.js lines 1931
this.$qrCode.addEventListener('click', _ => this._copyPairUrl());

Error Correction Levels

The system uses Error Correction Level L (Low) which provides:

7% error correction capability
Maximum data capacity
Optimal for digital displays

QR Code Usage Flow

1. Generation Phase

User Initiates Pairing

// From ui.js lines 1954-1956
_pairDeviceInitiate() {
    Events.fire('pair-device-initiate');
}

Server Response

// From ws-server.js lines 231-236
this._send(sender, {
    type: 'pair-device-initiated',
    roomSecret: roomSecret,
    pairKey: pairKey
});

QR Code Display

// From ui.js lines 1958-1964
_onPairDeviceInitiated(msg) {
    this.pairKey = msg.pairKey;
    this.roomSecret = msg.roomSecret;
    this._setKeyAndQRCode();
    this.inputKeyContainer._enableChars();
    this.show();
}

2. Scanning Phase

Camera Access Request

The system requests camera access for QR code scanning:

// Camera access is handled by the browser's getUserMedia API
navigator.mediaDevices.getUserMedia({ 
    video: { facingMode: 'environment' } 
})
.then(stream => {
    // Initialize QR code scanner
})
.catch(error => {
    console.error('Camera access denied:', error);
});

QR Code Detection

The QR code scanning uses the browser’s built-in capabilities or third-party libraries for real-time detection:

// QR code scanning implementation (conceptual)
function scanQRCode(videoElement) {
    // Use qr-scanner library or similar
    // Detect QR codes in video stream
    // Extract pair_key parameter
    // Auto-fill the pairing key
}

3. Auto-Pairing Process

URL Parameter Detection

// Automatic detection on page load
const urlParams = new URLSearchParams(window.location.search);
const pairKey = urlParams.get('pair_key');
if (pairKey) {
    // Auto-fill the pairing key
    document.querySelector('.pair-key-input').value = pairKey;
    // Auto-submit the pairing request
    submitPairingRequest(pairKey);
}

Automatic Pair Submission

// From ui.js lines 2009-2014
_pairDeviceJoin(pairKey) {
    if (/^\d{6}$/g.test(pairKey)) {
        Events.fire('pair-device-join', pairKey);
        this.inputKeyContainer.focusLastChar();
    }
}

QR Code Features

Click to Copy

Users can copy the pairing URL by clicking the QR code:

// Copy functionality implementation
_copyPairUrl() {
    const url = this._getPairUrl();
    navigator.clipboard.writeText(url)
        .then(() => {
            Events.fire('notify-user', 'Pair URL copied to clipboard');
        })
        .catch(err => {
            console.error('Failed to copy URL:', err);
        });
}

Manual Key Entry

For devices without camera access, users can manually enter the 6-digit key:

// Key validation
if (/^\d{6}$/g.test(pairKey)) {
    Events.fire('pair-device-join', pairKey);
}

Visual Feedback

The system provides visual feedback throughout the process:

Loading States

QR Code Generation: Shows loading indicator
Camera Initialization: Displays camera permission request
Scanning Process: Shows scanning animation

Success/Error States

Successful Scan: Highlights detected key
Invalid Key: Shows error message
Connection Success: Displays success notification

Browser Compatibility

Camera Access Requirements

HTTPS Required: Camera access requires secure context
User Permission: Explicit user permission required
Modern Browsers: Chrome 53+, Firefox 52+, Safari 11+

Fallback Options

When camera access is unavailable:

Manual Entry: 6-digit key input field
Copy URL: Copy pairing URL to clipboard
Share Link: Use browser’s share functionality

Security Considerations

QR Code Security

Temporary Keys: Pair keys expire after use
Rate Limiting: Prevents brute force attacks
Secure Context: Requires HTTPS for camera access

URL Security

// URL validation and sanitization
function validatePairUrl(url) {
    const parsedUrl = new URL(url);
    const pairKey = parsedUrl.searchParams.get('pair_key');
    
    // Validate pair key format
    if (!/^\d{6}$/.test(pairKey)) {
        throw new Error('Invalid pair key format');
    }
    
    // Validate domain
    if (!allowedDomains.includes(parsedUrl.hostname)) {
        throw new Error('Unauthorized domain');
    }
    
    return pairKey;
}

Performance Optimization

QR Code Rendering

SVG Format: Scalable vector graphics for crisp display
Optimized Size: 130x130 pixels for balance of scannability and screen space
Low Error Correction: Maximum data capacity for simple URLs

Camera Performance

Environment Camera: Uses rear camera on mobile devices
Resolution Optimization: Balanced resolution for scanning performance
Frame Rate: Optimized for real-time detection

User Experience

Mobile-First Design

Large Touch Targets: Easy tapping on mobile devices
Responsive Layout: Adapts to different screen sizes
Gesture Support: Swipe and tap interactions

Accessibility Features

Keyboard Navigation: Full keyboard accessibility
Screen Reader Support: Proper ARIA labels
High Contrast: Clear visual contrast

Use Cases

Quick Device Pairing

Mobile to Desktop: Scan QR code on desktop with phone
Desktop to Mobile: Display QR code on desktop, scan with phone
Tablet to Phone: Cross-device pairing without typing

Presentations: Audience members can quickly connect
Classrooms: Students connect to teacher’s device
Meetings: Quick file sharing during presentations

Accessibility Scenarios

Motor Impairments: QR code eliminates typing requirements
Visual Impairments: Screen reader support for manual entry
Temporary Disabilities: Voice command support for hands-free operation

Troubleshooting

Common QR Code Issues

Camera Not Working

Check Permissions: Ensure camera access is granted
HTTPS Required: Verify the site is loaded over HTTPS
Browser Support: Use a modern browser with camera support

QR Code Not Scanning

Lighting Conditions: Ensure adequate lighting
Screen Glare: Adjust screen angle to reduce glare
Distance: Maintain appropriate distance from screen

Invalid Pair Key

Expired Key: Generate a new QR code
Already Used: Each key can only be used once
Network Issues: Both devices need internet connection

Recovery Options

Manual Entry: Type the 6-digit key manually
Copy URL: Copy and share the pairing URL
Regenerate: Create a new QR code
Local Discovery: Use IP-based discovery on same network

This QR code system provides an efficient, user-friendly method for device pairing that combines modern web capabilities with robust security measures.

Introduction

Architecture

Features

Usage

Ecosystem

Reference

​QR Code Connection System

​QR Code Architecture

​QR Code Generation

​Pair URL Structure

​QR Code Components

​Visual Elements

​Pair Key Display

​QR Code Container

​Copy Functionality

​Error Correction Levels

​QR Code Usage Flow

​1. Generation Phase

​User Initiates Pairing

​Server Response

​QR Code Display

​2. Scanning Phase

​Camera Access Request

​QR Code Detection

​3. Auto-Pairing Process

​URL Parameter Detection

​Automatic Pair Submission

​QR Code Features

​Click to Copy

​Manual Key Entry

​Visual Feedback

​Loading States

​Success/Error States

​Browser Compatibility

​Camera Access Requirements

​Fallback Options

​Security Considerations

​QR Code Security

​URL Security

​Performance Optimization

​QR Code Rendering

​Camera Performance

​User Experience

​Mobile-First Design

​Accessibility Features

​Use Cases

​Quick Device Pairing

​Public Sharing

​Accessibility Scenarios

​Troubleshooting

​Common QR Code Issues

​Camera Not Working

​QR Code Not Scanning

​Invalid Pair Key

​Recovery Options