118. (Library/Framework) [라이브러리] [Web] 자바스크립트 zxing browser 실시간 웹 QR 코드 스캔 라이브러리

---

[타이틀]

​

구 분 : Library / 라이브러리

​

제 목 : [라이브러리] [Web] 자바스크립트 zxing browser 실시간 웹 QR 코드 스캔 라이브러리

 

---

[설 명]

​

-----------------------------------------------------------------------------------------
[라이브러리 정보 및 환경]
-----------------------------------------------------------------------------------------

- 구 분 : Library / Framework


- 제 목 : [라이브러리] [Web] 자바스크립트 zxing browser 실시간 웹 QR 코드 스캔 라이브러리


- 환 경 : Web / JavaScript / zxing / QR


- 사전) QR 코드 란? : 

  >> QR코드란 'Quick Response'의 줄임말로, 격자무늬를 가진 사각형 모양의 이차원 코드입니다

  >> QR코드는 바코드보다 훨씬 많은 정보를 담을 수 있으며, 숫자 외에 문자 데이터도 담을 수 있습니다


- 사전) 자바스크립트에서 zxing browser 의존성 설정 코드 : 

    <script type="module">

        // [모듈 import]
        import { BrowserQRCodeReader } from 'https://cdn.jsdelivr.net/npm/@zxing/browser@latest/+esm';

    </script>

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[설 명]
-----------------------------------------------------------------------------------------

1. zxing/browser 는 ZXing (JS 포트) 의 브라우저 전용 QR 스캔 라이브러리입니다
        
  
2. zxing/browser 는 <video> 카메라 스트림, <img> 이미지, 파일/URL, <canvas> 등 브라우저의 미디어 요소를 다루며, 내부적으로 ZXing 디코더를 호출해 다양한 바코드(특히 QR)를 읽습니다


3. zxing/browser 핵심 특징 : 

    >> BrowserQRCodeReader 는 브라우저 미디어 요소를 받아 디코딩 루프를 돌려 줍니다

    >> decodeFromVideoDevice : 지정/자동 선택된 카메라에서 연속 스캔. 콜백은 (result, error, controls)로 호출됩니다

    >> decodeFromStream : 직접 생성한 MediaStream(예: getUserMedia)을 넘겨 연속 스캔. 해상도/카메라 제약을 세밀히 지정할 때 유용

    >> decodeOnceFromVideoDevice : 한 번만 읽고 Promise로 결과를 반환. 실패/예외는 catch로 처리


4. zxing/browser 사용 시 주의 사항 :

    >> 해상도/크기 : QR 이 프레임에서 너무 작은 경우 주의 (모듈 수가 충분히 픽셀로 표현되지 않음)

    >> 초점/블러 : 초점이 맞지 않거나 흔들림 주의

    >> 조명/노이즈 : 어두움, 노이즈, 난반사(유광 인쇄)로 패턴 경계가 흐려짐 주의

    >> 잘림/여백 부족 : QR 주변 quiet zone (여백) 이 최소 4 모듈 이상 필요

    >> 기하학적 왜곡 : 과도한 기울어짐/원근 왜곡으로 세 눈의 상대 위치가 성립하지 않음 주의

    >> 반전 색상 : 밝은 QR(화이트 패턴/어두운 배경) 등 색상 반전 케이스 주의


5. zxing/browser 사용 예시 자바스크립트 코드 :

    <script type="module">

        import { BrowserQRCodeReader } from 'https://cdn.jsdelivr.net/npm/@zxing/browser@latest/+esm';

        window.onload = async function() {

            // -----------------------------------------
            // [video 태그 객체 정의]
            // -----------------------------------------
            // <video id="preview" autoplay playsinline style="width: 360px; height: auto;"></video>
            // -----------------------------------------
            const videoEl = document.getElementById('preview');


            // -----------------------------------------
            // [QR 전용 리더 생성]
            // -----------------------------------------
            const reader = new BrowserQRCodeReader();


            // -----------------------------------------
            // [카메라(디바이스)를 자동 선택해 연속 스캔을 시작]
            // -----------------------------------------
            try {

                controls = await reader.decodeFromVideoDevice(
                    undefined, // deviceId
                    videoEl, // preview <video>

                    (result, err) => { // ✅ callback
                        if (err != null && err != undefined) {

                            // 디코딩 실패 등 반복적으로 발생할 수 있음                        
                            console.error(`[decodeFromVideoDevice] : [Scan] : [Error] : 예외 상황 발생 : ${err.name} : `, err);
                        }
                        else {
                            console.warn("[decodeFromVideoDevice] : [Scan] : [Data] : ", JSON.stringify(result)); // ✅ QR 스캔 전문 출력

                        }

                    }
                );
            }
            catch (decodeFromVideoDeviceException) {
                console.error("[decodeFromVideoDeviceException] : 예외 상황 발생 : ", decodeFromVideoDeviceException);
            }

        };

    </script>

-----------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[@zxing/browser 라이브러리 사용 참고 사이트]

https://www.npmjs.com/package/@zxing/browser


[자바스크립트 zxing browser 라이브러리 사용해 video 태그 사용 실시간 QR 이미지 (png , jpeg) 스캔 수행 실시]

https://kkh0977.tistory.com/8501

https://blog.naver.com/kkh0977/224110786770


[qrcode 라이브러리 사용해 QR 코드 생성 실시]

https://kkh0977.tistory.com/859

https://blog.naver.com/kkh0977/222395438877?trackingCode=blog_bloghome_searchlist


[자바스크립트 qr-scanner 라이브러리 사용해 QR 이미지 (png , jpeg) 사진 디코딩 수행 실시]

https://kkh0977.tistory.com/8500

https://blog.naver.com/kkh0977/224110780992

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8501

470. (javaScript) 자바스크립트 zxing browser 라이브러리 사용해 video 태그 사용 실시간 QR 이미지 (png , j

---