[javascript] Universal Viewer를 활용한 QR코드 생성 및 스캔 기능

30 Nov 2023

javascript

이번 블로그 포스트에서는 Universal Viewer를 사용하여 웹사이트에서 QR코드를 생성하고 스캔하는 기능을 구현하는 방법에 대해 알아보겠습니다.

Universal Viewer란?

Universal Viewer는 JavaScript 기반의 오픈소스 라이브러리로, 이미지, 비디오, 음악, 문서 등 다양한 형식의 콘텐츠를 웹사이트에서 손쉽게 보여줄 수 있습니다. 따라서 우리는 Universal Viewer를 활용하여 QR코드 이미지를 보여주고 스캔하는 기능을 구현할 것입니다.

QR코드 생성하기

먼저 QR코드를 생성하기 위해 우리는 qrcode-generator라는 JavaScript 라이브러리를 사용할 것입니다. 이 라이브러리는 텍스트나 URL을 입력으로 받아 QR코드 이미지를 생성해줍니다.

var qrCode = qrcode_generator.generate("https://example.com");

위의 코드에서는 qrcode_generator라는 변수를 사용하여 QR코드를 생성하고 있습니다. generate() 메소드의 파라미터로는 QR코드에 포함될 텍스트나 URL을 전달합니다.

Universal Viewer에 QR코드 이미지 추가하기

이제 QR코드 이미지를 Universal Viewer에 추가해 보겠습니다. Universal Viewer는 manifest라는 형식으로 콘텐츠를 정의할 수 있는데, 여기서는 QR코드 이미지를 포함한 manifest를 생성하고 해당 내용을 Universal Viewer에 추가합니다.

var manifest = {
  "sequences": [
    {
      "canvases": [
        {
          "images": [
            {
              "resource": {
                "@id": "https://example.com/qrcode.png",
                "service": {
                  "@context": "http://iiif.io/api/image/2/context.json",
                  "@id": "https://example.com/qrcode.png",
                  "profile": "http://iiif.io/api/image/2/level1.json"
                }
              }
            }
          ]
        }
      ]
    }
  ]
};

var viewer = new UniversalViewer({
  manifestUri: manifest,
  element: document.getElementById("viewer")
});

위의 코드에서 manifest 변수에 QR코드 이미지를 포함한 manifest 정의를 작성하고 있습니다. QR코드 이미지의 URL을 @id 속성에 포함시키고, 이미지 서비스를 정의한 후 Universal Viewer의 manifestUri 옵션에 manifest를 전달합니다.

QR코드 스캔하기

마지막으로 QR코드를 스캔하는 기능을 구현해 보겠습니다. 우리는 qr-scanner 라이브러리를 사용하여 웹캠을 통해 QR코드를 스캔할 수 있습니다.

var qrScanner = new QrScanner(videoElement, result => {
  // 스캔된 QR코드 결과 처리
  console.log("스캔된 QR코드: " + result);
});

qrScanner.start();

위의 코드에서 qrScanner 변수를 생성하여 videoElement 요소에 연결된 웹캠을 통해 QR코드를 스캔하고 있습니다. 스캔된 결과는 콜백 함수인 result 파라미터로 전달되며, 이를 원하는 방식으로 처리할 수 있습니다.

마무리

이번 포스트에서는 Universal Viewer를 활용하여 웹사이트에서 QR코드 생성 및 스캔 기능을 구현하는 방법을 알아보았습니다. Universal Viewer는 다양한 콘텐츠 형식을 관리하고 보여줄 수 있는 강력한 도구이므로 다양한 프로젝트에서 유용하게 활용될 수 있습니다.

더 자세한 내용은 아래의 참고 자료를 확인해보세요.