https://shop.playkfa.com/static/js/event/qr.js

1document.getElementById('scanBtn').addEventListener('click', function() {
2    var video = document.createElement("video");
3
4    var canvasElement = document.getElementById("canvas");
5
6    var canvas = canvasElement.getContext("2d");
7
8    var loadingMessage = document.getElementById("loadingMessage");
9
10    var outputContainer = document.getElementById("output");
11
12    var outputMessage = document.getElementById("outputMessage");
13
14    var outputData = document.getElementById("outputData");
15
16
17
18    function drawLine(begin, end, color) {
19
20
21
22        canvas.beginPath();
23
24        canvas.moveTo(begin.x, begin.y);
25
26        canvas.lineTo(end.x, end.y);
27
28        canvas.lineWidth = 4;
29
30        canvas.strokeStyle = color;
31
32        canvas.stroke();
33
34    }
35
36
37
38    // 카메라 사용시
39
40    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
41
42
43
44        video.srcObject = stream;
45
46        video.setAttribute("playsinline", true);      // iOS 사용시 전체 화면을 사용하지 않음을 전달
47
48        video.play();
49
50        requestAnimationFrame(tick);
51
52    });
53
54
55
56    function tick() {
57
58
59
60        loadingMessage.innerText = "⌛ 스캔 기능을 활성화 중입니다."
61
62
63
64        if(video.readyState === video.HAVE_ENOUGH_DATA) {
65
66
67
68            loadingMessage.hidden = true;
69
70            canvasElement.hidden = false;
71
72            outputContainer.hidden = false;
73
74
75
76            // 읽어들이는 비디오 화면의 크기
77
78            canvasElement.height = video.videoHeight;
79
80            canvasElement.width = video.videoWidth;
81
82
83
84            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
85
86            var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
87
88
89
90            var code = jsQR(imageData.data, imageData.width, imageData.height, {
91
92
93
94                inversionAttempts : "dontInvert",
95
96            });
97
98
99
100            // QR코드 인식에 성공한 경우
101
102            if(code) {
103
104
105
106                // 인식한 QR코드의 영역을 감싸는 사용자에게 보여지는 테두리 생성
107
108                drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF0000");
109
110                drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF0000");
111
112                drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF0000");
113
114                drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF0000");
115
116
117
118                outputMessage.hidden = true;
119
120                outputData.parentElement.hidden = false;
121
122
123
124                // QR코드 메시지 출력
125
126                outputData.innerHTML = code.data;
127
128
129
130                // return을 써서 함수를 빠져나가면 QR코드 프로그램이 종료된다.
131
132                // return;
133
134            }
135
136
137
138            // QR코드 인식에 실패한 경우
139
140            else {
141
142
143
144                outputMessage.hidden = false;
145
146                outputData.parentElement.hidden = true;
147
148            }
149
150        }
151        requestAnimationFrame(tick);
152
153    }
154});