npm package: @qr-bridge/sdk
Description: Official JavaScript/TypeScript SDK for QR-Bridge - Seamless photo and signature capture via QR codes
Author: QR-Bridge
Latest version: 1.1.0

# @qr-bridge/sdk

Seamlessly capture photos and signatures from mobile devices via QR codes. Zero server storage - everything happens in real-time via WebSockets.

## Installation

```bash
npm install @qr-bridge/sdk
```

## Quick Start

```typescript
import QRBridgeClient from '@qr-bridge/sdk';

// Initialize with your API key
const client = new QRBridgeClient({
  apiKey: 'your-api-key-here'
});

// Generate QR code
const session = await client.createUploadSession({
  captureMode: 'photo',
  language: 'en'
});

// Display QR code
document.getElementById('qr').src = session.data.qrCode;

// Receive photo when user scans and captures
client.onPhotoReceived((photo) => {
  document.getElementById('result').src = photo.imageData;
});
```

## Browser Integration

### Basic HTML Example

```html
<!DOCTYPE html>
<html>
<head>
  <!-- Import Socket.IO from CDN -->
  <script type="importmap">
    {
      "imports": {
        "socket.io-client": "https://cdn.socket.io/4.7.2/socket.io.esm.min.js"
      }
    }
  </script>
</head>
<body>
  <img id="qr-code" />
  <img id="captured-photo" style="display:none" />

  <script type="module">
    import QRBridgeClient from 'https://cdn.jsdelivr.net/npm/@qr-bridge/sdk@latest/dist/index.js';

    const client = new QRBridgeClient({
      apiKey: 'your-api-key'
    });

    // Generate QR
    const session = await client.createUploadSession();
    document.getElementById('qr-code').src = session.data.qrCode;

    // Handle photo
    client.onPhotoReceived((photo) => {
      const img = document.getElementById('captured-photo');
      img.src = photo.imageData;
      img.style.display = 'block';
    });
  </script>
</body>
</html>
```

## API Reference

### Initialize Client

```typescript
const client = new QRBridgeClient({
  apiKey: string;        // Required: Your API key
  baseUrl?: string;      // Optional: Default 'https://qr-bridge.dev'
  debug?: boolean;       // Optional: Enable logging
  timeout?: number;      // Optional: Request timeout (ms)
});
```

### Create Session

```typescript
const session = await client.createUploadSession({
  captureMode?: 'photo' | 'signature';  // Default: 'photo'
  cameraFacing?: 'environment' | 'user'; // Default: 'environment' (back camera)
  language?: string;                     // Default: 'en'
});

// Returns:
// {
//   data: {
//     sessionId: string;
//     qrCode: string;        // Base64 QR code image
//     captureUrl: string;    // Mobile capture URL
//     expiresAt: string;     // Expiration time
//   }
// }
```

### Event Handlers

```typescript
// Photo received
client.onPhotoReceived((photo) => {
  console.log(photo.imageData);  // Base64 data URL
  console.log(photo.sessionId);
  console.log(photo.timestamp);
});

// Connection events
client.onConnected(() => console.log('WebSocket connected'));
client.onDisconnected(() => console.log('Disconnected'));
client.onError((error) => console.error(error));
```

### QR Customization (Paid Plans)

```typescript
// Custom color
await client.updateQRColor('#ff0000');

// Custom logo
const file = document.querySelector('input[type="file"]').files[0];
await client.uploadQRLogo(file);

// Remove logo
await client.removeQRLogo();
```

### Usage Tracking

```typescript
const usage = await client.getUsage(userId);
// {
//   currentUsage: 45,
//   limit: 1000,
//   remaining: 955,
//   plan: 'plus'
// }
```

## Signature Capture

```typescript
const session = await client.createSignatureSession({
  language: 'en',
  signatureBackground: 'transparent' // or 'white'
});

document.getElementById('qr').src = session.data.qrCode;

client.onPhotoReceived((signature) => {
  document.getElementById('signature').src = signature.imageData;
});
```

## React Example

```tsx
import { useEffect, useState } from 'react';
import QRBridgeClient from '@qr-bridge/sdk';

function App() {
  const [qrCode, setQrCode] = useState('');
  const [photo, setPhoto] = useState('');

  useEffect(() => {
    const client = new QRBridgeClient({
      apiKey: process.env.REACT_APP_QR_BRIDGE_API_KEY
    });

    client.createUploadSession().then(session => {
      setQrCode(session.data.qrCode);
    });

    client.onPhotoReceived(photo => {
      setPhoto(photo.imageData);
    });

    return () => client.destroy();
  }, []);

  return (
    <div>
      {qrCode && <img src={qrCode} alt="Scan me" />}
      {photo && <img src={photo} alt="Captured" />}
    </div>
  );
}
```

## Get API Key

Get your API key from [qr-bridge.dev](https://qr-bridge.dev)

## License

MIT