Package Exports

@qr-bridge/sdk
@qr-bridge/sdk/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@qr-bridge/sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

npm install @qr-bridge/sdk

Quick Start

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

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

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

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

// 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)

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

const usage = await client.getUsage(userId);
// {
//   currentUsage: 45,
//   limit: 1000,
//   remaining: 955,
//   plan: 'plus'
// }

Signature Capture

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

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

License

MIT