[Javasciprt] 주요 QR코드 스캔 라이브러리 3가지 비교

현재 사내에서 QR코드를 리딩해야 하는 어플을 개발하던 중

안드로이드와 IOS를 모두 지원하기에는 어려움이 있어

웹으로 QR코드를 읽어야 하는 상황이 생기면서 

주요 3가지 QR코드 리더 라이브러리를 모두 테스트하며 비교해보았습니다.

 

특히 제가 사용하는 스마트폰이 LG 벨벳 모델인데 특이한 점이 있습니다.

LG벨벳의 경우 후면에 보이는 카메라처럼 생긴 것이 3개가 보이는 데

이때 최상단, 최하단 카메라가 모두 카메라라는 것입니다.

제 스마트폰은 전면카메라를 포함해 총 카메라가 3개이다보니 발견한 문제점들이 많았습니다.

 

1. JSQrScanner

- IOS 환경에서 사용 가능합니다. (IOS 15에서 테스트)

- 스마트폰 카메라가 2개보다 많을 경우 인식되지 않는 카메라가 있을 수 있습니다.

LG벨벳의 경우 메인 후방카메라를 인식하지 못했습니다.

- 구조가 간단하여 사용하기 쉽습니다.

- 카메라 전환 구현이 어렵습니다.

- 자동 초점 기능이 작동되지 않습니다.

https://github.com/jbialobr/JsQRScanner

GitHub - jbialobr/JsQRScanner: JavaScript QR Code scanner for HTML5 supporting browsers

2. html5-qrcode

- IOS 환경에서 일부 작동 및 지원하지 않습니다. IOS버전에 따라 다름.

- 스마트폰 카메라가 여러 개여도 인식이 잘됩니다.

- 구조가 비교적 복잡합니다.

- 카메라 전환 구현이 간편하며 기본적으로 카메라를 선택할 수 있습니다.

- 자동 초점 기능이 작동되지 않습니다.

 

https://github.com/mebjas/html5-qrcode

GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

3. Instascan

- IOS 환경에서 일부 작동 및 지원하지 않습니다. IOS버전에 따라 다름.

- 스마트폰 카메라가 2개보다 많을 경우 인식되지 않는 카메라가 있을 수 있습니다.

LG벨벳의 경우 메인 후방카메라를 인식하지 못했습니다.

- 구조가 간단합니다.

- 카메라 좌우가 뒤바뀌는 등 가끔 문제가 발생되곤 합니다.

- 카메라 전환 구현이 간편합니다.

- 이유는 알 수없지만 스마트폰 기종에 따라 자동 초점 기능이 작동하거나 작동하지 않습니다.

 

현재 제가 선택한 스캐너는 JSQrScanner 입니다. 최신 IOS 환경에서 작동 이 원활했고 API 가 간단명료하여 사용하기 쉬웠습니다. 지원되는 브라우저도 다양하여 일반적인 환경에서는 문제가 없어보였습니다. 기본적으로 후방카메라가 인식되도록 만들어져 있어 별도 후방카메라를 찾는 과정이 필요가 없습니다. 다만, 제 스마트폰 처럼 실제로 장착된 후방카메라가 기본, 확대카메라로 2개이상일 경우 화질이 낮은 카메라만 인식가능한 부분은 문제가 될 것 같습니다. 애초에 웹에서 웹캠에 접근하여 QR코드를 리딩하는 방식은 IOS의 WebRTC 지원 등이 불투명한 점과 자동으로 초점을 맞추는 게 불가능하다는 점들이 불편함이 크다보니 이정도로 만족해야할 것 같습니다..