LPR Next

Componente Next.js para leitura de placas usando a camera do navegador e uma API LPR externa.

Ele nao roda IA no navegador. O componente captura frames, envia para POST /read-image, recebe plate + bbox e desenha o tracker verde no video.

Instalar

Depois de publicado no npm:

npm install lpr-next-scanner

Para testar localmente antes de publicar:

npm install ../packages/lpr-next

Uso rapido

"use client"

import { LprScanner } from "lpr-next-scanner"

export function MinhaTela() {
  return (
    <LprScanner
      apiUrl="http://localhost:8000"
      onPlate={(plate, result) => {
        console.log("Placa lida:", plate, result)
      }}
    />
  )
}

Props

type LprScannerProps = {
  apiUrl: string
  apiKey?: string
  autoReadIntervalMs?: number
  maxFrameWidth?: number
  jpegQuality?: number
  cameraConstraints?: MediaTrackConstraints
  overlayColor?: string
  onResult?: (result: LprResult) => void
  onPlate?: (plate: string, result: LprResult) => void
  onError?: (error: Error) => void
  showControls?: boolean
  showStatus?: boolean
}

Padroes

• autoReadIntervalMs: 1000
• maxFrameWidth: 960
• jpegQuality: 0.9
• overlayColor: #22c55e

Com esses padroes, cada camera ligada faz cerca de uma leitura por segundo. O video continua fluido no navegador, mas a IA nao recebe frames em excesso.

Backend esperado

O backend precisa aceitar:

POST /read-image
Content-Type: multipart/form-data
field: file

E responder:

{
  "success": true,
  "elapsed_ms": 41.98,
  "count": 1,
  "plates": [
    {
      "plate": "RHA-0A01",
      "raw_text": "RHA0A01",
      "confidence": 0.99,
      "bbox": {
        "x1": 100,
        "y1": 200,
        "x2": 300,
        "y2": 260
      }
    }
  ],
  "best": {
    "plate": "RHA-0A01",
    "raw_text": "RHA0A01",
    "confidence": 0.99,
    "bbox": {
      "x1": 100,
      "y1": 200,
      "x2": 300,
      "y2": 260
    }
  }
}

Arquivos

packages/lpr-next/src/
  LprScanner.tsx
  client.ts
  types.ts
  index.ts

Para reaproveitar em outro projeto Next.js, instale o pacote e importe de lpr-next-scanner.

Importante

Camera no navegador funciona em localhost ou em HTTPS. Em producao, nao use HTTP puro.

Publicar

npm run build
npm publish --access public

Para publicar privado com --access restricted, o pacote precisa ter nome com escopo que voce controla no npm, por exemplo:

{
  "name": "@seu-usuario/lpr-next-scanner"
}

Depois publique:

npm publish --access restricted