[Javascript] 자바스크립트를 이용한 QR코드 스캔 및 데이터 읽기
** 디바이스의 카메라 권한에 접근해야 하기 때문에 로컬환경 또는 https 에서만 사용 가능하다.
1. JsQR 다운받기
먼저 https://github.com/cozmo/jsQR 페이지에 접속하여 jsQR-master.zip 파일을 다운로드한다.
다운로드한 jsQR-master.zip 파일의 압축을 해제하면
안에 docs 라는 디렉토리가 존재한다.
docs 디렉토리 내에는
index.html 파일과 jsQR.js 파일이 존재하는데
실질적으로 여기서 사용하게 될 파일은 이 jsQR.js 하나이다.
2. index.html 실행
index.html 파일을 열어본다.
제공되는 jsQR Demo 페이지가 열리면서, 최초 실행 시 카메라에 접근하기 위한 권한이 요청된다.
[허용] 버튼을 누르면 노트북 캠이 연결되어 카메라가 실행되는 것을 확인할 수 있다.
3. QR코드 스캔
간단한 테스트 페이지를 만들어 본다.
<html>
<head>
<meta charset="utf-8">
<title>QR scan test</title>
<script src="./jsQR.js"></script>
<style type="text/css">
main {
width:100%;
height:100%;
text-align:center;
}
div#frame {
border:2px solid #005666;
background-color:#FFFFFF;
margin-left:10px;
margin-right:10px;
padding-left:8px;
padding-right:8px;
padding-top:8px;
padding-bottom:8px;
}
div#outputLayer {
text-align:left;
}
canvas {
width:100%;
}
</style>
</head>
<script type="text/javascript">
// 스캔
function startScan() {
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
// 카메라 사용시
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // iOS 사용시 전체 화면을 사용하지 않음을 전달
video.play();
requestAnimationFrame(tick);
});
function tick() {
loadingMessage.innerText = "⌛ 스캔 기능을 활성화 중입니다."
if(video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
outputContainer.hidden = false;
// 읽어들이는 비디오 화면의 크기
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts : "dontInvert",
});
// QR코드 인식에 성공한 경우
if(code) {
// 인식한 QR코드의 영역을 감싸는 사용자에게 보여지는 테두리 생성
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF0000");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF0000");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF0000");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF0000");
outputMessage.hidden = true;
outputData.parentElement.hidden = false;
// QR코드 메시지 출력
outputData.innerHTML = code.data;
// return을 써서 함수를 빠져나가면 QR코드 프로그램이 종료된다.
return;
}
// QR코드 인식에 실패한 경우
else {
outputMessage.hidden = false;
outputData.parentElement.hidden = true;
}
}
requestAnimationFrame(tick);
}
}
// 카메라 열기
function openCamera() {
startScan();
}
</script>
<body>
<div class="main_page">
<main align="center">
<div align="center">
<div></div>
<div id="frame">
<div id="loadingMessage">
🎥 비디오 스트림에 액세스 할 수 없습니다<br/>웹캠이 활성화되어 있는지 확인하십시오
</div>
<canvas id="canvas"></canvas>
</div>
</div>
<br/>
<input type="button" id="button1" onclick="openCamera();" value="카메라 열기" style="width:97%;height:30px"/>
<br/>
<div></div>
<div id="test" width="100%">
<h1>QR 코드 스캔 결과</h1>
<div id="output">
<div id="outputMessage">
</div>
<div id="outputLayer" hidden>
<span id="outputData"></span>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
실행하여 카메라 열기 버튼을 누르게 되면, 권한 요청 팝업이 뜨고 [허용]을 클릭하면 카메라가 연결된다.
카메라 연결 후 QR코드를 인식하여 데이터가 잘 출력되는지 확인한다.
노트북 카메라를 이용. 크롬에서 테스트해보았다.
QR코드가 빨간색 테두리로 인식되면서 QR코드의 텍스트가 출력된다.
모바일 안드로이드 환경에서도 테스트한 결과 정상적으로 작동하였다.
** 위 내용은 타 블로그의 내용을 토대로 정리한 내용이며 출처는 아래와 같음을 밝힙니다.
출처 : https://wickedmagica.tistory.com/154
[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기
※ jsQR의 실제 웹 서비스 사용은 HTTPS접근이 가능한 브라우저를 통해 카메라를 조작할 수 있는 환경에서만 사용이 가능합니다. 해당 포스팅은 로컬 서버에서 테스트하여 진행 하였으며, 실서
wickedmagica.tistory.com
최근댓글