Barcode Scanner Dialog

Betav1.0.0

기기 카메라로 바코드·QR 을 실시간 스캔하는 다이얼로그. 인식 시 값을 콜백으로 전달합니다. base-ui Dialog + getUserMedia영상 위에 @zxing/browser 디코더를 얹었습니다. (Barcode 컴포넌트가 바코드를 그리는 것과 반대로, 이건 읽는 쪽입니다.)

Loading…

import { BarcodeScannerDialog } from "@/components/ui/barcode-scanner-dialog";

const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState<string | null>(null);

<Button onClick={() => setOpen(true)}>Scan barcode</Button>

<BarcodeScannerDialog
  open={open}
  onOpenChange={setOpen}
  onScan={(text) => setValue(text)}
  closeOnScan          // 인식 시 자동 닫기 (기본)
/>

// 요구사항: HTTPS(또는 localhost) + 카메라 권한
// 디코딩: @zxing/browser (스캔 열 때만 dynamic import)

요구사항: 카메라 스트림은 보안 컨텍스트(HTTPS 또는 localhost)에서만 동작하며 사용자 카메라 권한이 필요합니다. 미지원·권한 거부 시 다이얼로그 안에 안내 메시지가 표시됩니다. 카메라를 쓸 수 없는 사용자를 위해 수동 입력 대안을 함께 제공하는 것을 권장합니다.

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/barcode-scanner-dialog.json

Composition

BarcodeScannerDialog (open, onOpenChange, onScan, closeOnScan)
├── Dialog (base-ui)
├── video — getUserMedia 카메라 프리뷰
├── @zxing/browser — decodeFromVideoDevice (dynamic import)
└── 상태 오버레이 — starting / scanning / error

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
@base-ui/react	`1.5.0`
@zxing/browser	`0.2.0`
@zxing/library	`0.22.0`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.

Keyboard interactions

Key	Description
`Esc`	스캐너 닫기 + 카메라 스트림 정지.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.2 4.1.2

Notes

•카메라 권한·HTTPS 필요. 미지원/거부 시 텍스트 fallback 안내.
•스캔 외에 수동 입력 대안을 함께 제공하는 것을 권장 (카메라 불가 사용자).
•닫힐 때 MediaStream 을 반드시 정지해 카메라 표시등이 꺼지도록 함.