(웹캠/스마트폰카메라/바코드인식)스프링부트, 자바스크립트, JSP, PDA, 모바일폰 바코드 인식하기(quaggaJS이용)
http://ojc.asia/bbs/board.php?bo_table=LecJpa&wr_id=346
1. JavaScript 기반 웹페이지에서 바코드를 인식하기 위한 quaggaJS 라이브러리를 다운받자.
https://serratus.github.io/quaggaJS/
ZIP 파일을 다운받아서 압축을 풀면 된다.
2. 스프링부트로 demo 라는 이름의 플젝트를 생성하고 패키지를 com.example.demp 라고 하자.
3. DemoApplication.java
package com.example.demo;
import org.apache.catalina.connector.Connector;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
@Bean
public ServletWebServerFactory serveltContainer(){
TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
tomcat.addAdditionalTomcatConnectors(createStandardConnector());
return tomcat;
}
private Connector createStandardConnector(){
Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
connector.setPort(8080);
return connector;
}
}
4. MainController.java
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MainController {
@RequestMapping("/")
public String jsp() throws Exception {
return "main";
}
}
5. src/main 아래에 webapp/WEB-INF/jsp 폴더 생성
6. jsp폴더에 main.jsp 작성
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* In order to place the tracking correctly */
canvas.drawing, canvas.drawingBuffer {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<!-- Div to show the scanner -->
<div id="scanner-container"></div>
<input type="button" id="btn" value="Start/Stop the scanner" />
<!-- Include the image-diff library -->
<script src="/js/quagga.js"></script>
<script>
var _scannerIsRunning = false;
function startScanner() {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: 640,
height: 480,
facingMode: "environment"
},
},
decoder: {
readers: [
"code_93_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
// Set flag to is running
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
alert("Barcode detected and processed : [" + result.codeResult.code + "]")
});
}
// Start/stop scanner
document.getElementById("btn").addEventListener("click", function () {
if (_scannerIsRunning) {
Quagga.stop();
} else {
startScanner();
}
}, false);
</script>
</body>
</html>
7. webapp 아래에 다운받은 quaggaJS의 dist 폴더의 quagga.js를 복사, src 폴더의 analytics, common, ,,,,, reader 모든 폴더를 js 아래로 복사
8. 자바스크립트기반 quagga 에서 바코드 스캔이 가능하려면 https 로 웹서비스가 기동되어야 하는데 스프링부트에서는 커맨드창에서 workspace아래 demo 프로젝트 폴더로 이동하여 다음명령을 실행하자.
C:\bpr\workspace\demo>keytool -genkey -alias springbootssl -storetype PKCS12 -keyalg RSA -keysize 2048 -keystore keystore.p12 -validity 4000
키 저장소 비밀번호 입력:
이름과 성을 입력하십시오.
[Unknown]: jclee
조직 단위 이름을 입력하십시오.
[Unknown]: jclee
조직 이름을 입력하십시오.
[Unknown]: jclee
구/군/시 이름을 입력하십시오?
[Unknown]: seoul
시/도 이름을 입력하십시오.
[Unknown]: seoul
이 조직의 두 자리 국가 코드를 입력하십시오.
[Unknown]: kr
CN=jclee, OU=jclee, O=jclee, L=seoul, ST=seoul, C=kr이(가) 맞습니까?
[아니오]: y
9. src/main/resource 아래의 application.properties 파일
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
server.ssl.key-store=keystore.p12
server.ssl.key-store-type=PKCS12
server.ssl.key-store-password=tatata01
server.ssl.key-alias=springbootssl
server.port=8443
10. DemoApplication.java에서 Ctrl + F11 로 스프링부트 프로젝트를 시작
. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v2.3.1.RELEASE)
2020-07-25 17:07:13.065 INFO 4888 --- [ main] com.example.demo.DemoApplication : Starting DemoApplication on DESKTOP-CMQ34NP with PID 4888 (C:\bpr\workspace\demo\target\classes started by user in C:\bpr\workspace\demo)
2020-07-25 17:07:13.068 INFO 4888 --- [ main] com.example.demo.DemoApplication : No active profile set, falling back to default profiles: default
2020-07-25 17:07:13.856 INFO 4888 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8443 (https) 8080 (http)
2020-07-25 17:07:13.873 INFO 4888 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2020-07-25 17:07:13.874 INFO 4888 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.36]
2020-07-25 17:07:14.097 INFO 4888 --- [ main] org.apache.jasper.servlet.TldScanner : At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded JARs during scanning can improve startup time and JSP compilation time.
2020-07-25 17:07:14.102 INFO 4888 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2020-07-25 17:07:14.102 INFO 4888 --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 994 ms
2020-07-25 17:07:14.260 INFO 4888 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor'
2020-07-25 17:07:15.237 INFO 4888 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8443 (https) 8080 (http) with context path ''
2020-07-25 17:07:15.246 INFO 4888 --- [ main] com.example.demo.DemoApplication : Started DemoApplication in 2.518 seconds (JVM running for 3.308)
2020-07-25 17:07:23.626 INFO 4888 --- [nio-8443-exec-5] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet'
2020-07-25 17:07:23.626 INFO 4888 --- [nio-8443-exec-5] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet'
2020-07-25 17:07:23.631 INFO 4888 --- [nio-8443-exec-5] o.s.web.servlet.DispatcherServlet : Completed initialization in 5 ms
11. localhost:8080 형태는 https가 아니더라도 실행이 되며 휴대폰/PDA IP형태의 접근은 https로 접근해야 한다.
웹브라우저에서 확인은 http://localhost:8080 으로 접근하여 확인하자.
12. PDA, 또는 스마트폰에서는 https://192.168.0.5:8443 으로 접근해서 확인하자.
댓글 없음:
댓글 쓰기