> ## Documentation Index
> Fetch the complete documentation index at: https://docsdrop.erikraft.com/llms.txt
> Use this file to discover all available pages before exploring further.

# QR Connection

> QR code-based device pairing system for quick and secure connections using camera scanning or manual key entry.

# 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:

```javascript theme={null}
// 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:

```javascript theme={null}
// 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

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

#### QR Code Container

```javascript theme={null}
// From ui.js lines 1903
this.$qrCode = this.$el.querySelector('.key-qr-code');
```

#### Copy Functionality

```javascript theme={null}
// 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

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

#### Server Response

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

#### QR Code Display

```javascript theme={null}
// 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:

```javascript theme={null}
// 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:

```javascript theme={null}
// 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

```javascript theme={null}
// 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

```javascript theme={null}
// 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:

```javascript theme={null}
// 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:

```javascript theme={null}
// 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:

1. **Manual Entry**: 6-digit key input field
2. **Copy URL**: Copy pairing URL to clipboard
3. **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

```javascript theme={null}
// 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

### Public Sharing

* **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

1. **Manual Entry**: Type the 6-digit key manually
2. **Copy URL**: Copy and share the pairing URL
3. **Regenerate**: Create a new QR code
4. **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.