Vue.js에서 vue-qrcode-reader를 사용하여 QR 코드 스캔 통합

이 글에서는 `vue-qrcode-reader` 라이브러리를 사용하여 Vue.js 애플리케이션에 QR 코드 및 바코드를 스캔하는 방법을 설명합니다.

개요

`vue-qrcode-reader` 라이브러리는 Vue.js 프로젝트에서 QR 코드 및 다른 바코드 형식을 브라우저에서 직접 감지할 수 있는 간편한 컴포넌트를 제공합니다. 이 라이브러리는 카메라 스트림에서 스캔, 드래그 앤 드롭 이미지 업로드, 파일 업로드 등의 여러 가지 모드를 지원합니다.

제공되는 컴포넌트

• QrcodeStream: 카메라 스트림에서 연속적으로 프레임을 스캔합니다.
• QrcodeDropZone: 사용자가 이미지를 드래그 앤 드롭하여 즉시 디코딩할 수 있는 영역입니다.
• QrcodeCapture: 사용자가 선택한 파일을 스캔하는 전통적인 파일 업로드 필드입니다.

이 패키지는 최소한의 스타일링으로 기능에 집중하고 있어 기존 레이아웃에 쉽게 통합할 수 있습니다.

주요 기능

• 반응형 디자인: 기본적으로 모바일 반응형 디자인을 지원합니다.
• 카메라 통합: `QrcodeStream` 컴포넌트를 통해 웹캠 또는 모바일 장치의 카메라를 사용해 연속적으로 QR 코드를 스캔할 수 있습니다.
• 드래그 앤 드롭 지원: `QrcodeDropZone`을 사용하여 이미지를 드래그 앤 드롭해 QR 코드를 즉시 스캔할 수 있습니다.
• 파일 업로드 스캔: `QrcodeCapture` 컴포넌트를 통해 사용자가 선택한 파일을 스캔할 수 있습니다.

설치

npm으로 설치:

npm install vue-qrcode-reader

설치 후, 다음과 같이 필요한 컴포넌트를 개별적으로 가져올 수 있습니다:

import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

또는, 모든 컴포넌트를 전역적으로 등록할 수 있습니다:

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)

npm 없이 사용하기:

다음과 같은 스크립트 태그를 포함하세요:

<script src="https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js"></script>

이 스크립트는 Vue.js 스크립트 뒤에 포함되어야 합니다.

사용법

패키지를 설정한 후, 컴포넌트를 사용하는 것은 간단합니다. 아래는 QrcodeStream 컴포넌트를 사용하여 QR 코드를 스캔하는 예제입니다:

<template>
  <qrcode-stream @detect="onDetect"></qrcode-stream>
</template>

<script>
export default {
  methods: {
    onDetect(detectedCodes) {
      console.log(detectedCodes)  // 감지된 QR 코드 처리
    }
  }
}
</script>

@detect 이벤트는 디코딩된 QR 코드 데이터를 반환하므로 이를 애플리케이션에서 필요에 맞게 처리할 수 있습니다.

문제 해결

QrcodeStream에서 카메라가 표시되지 않음

HTTPS에서 실행 중인지 확인하고, 카메라 스트림을 사용할 수 있는 권한이 있는지 확인해 주세요. 또한 웹캠이 지원되는지 확인해야 합니다.

스캔할 QR 코드가 감지되지 않음

QR 코드 주위에 충분한 여백이 있는지 확인하십시오. 또한 QR 코드가 깨끗하고 잘 인식되는지 확인해야 합니다.

출처: Vue QR Code Reader GitHub