IT 알쓸신잡

OpenCV를 Web에서 구현해보자 - 1 본문

Development

OpenCV를 Web에서 구현해보자 - 1

솦트웰러 2023. 2. 6. 23:33
728x90
반응형

기존 프로그램은 Qt5.13 으로 개발되었으며  Windows 용과 Mac 용을 Qt를 이용하여 빌드 / 배포하고 있습니다.

 

간략하게 프로그램 구성 영역은,

- 디바이스와 HID 통신 처리 부분

- 영상 패턴 분석 및 Contour 처리, 중점 처리를 통한 Calibration 부분

으로 볼 수 있겠습니다.

 

그런데 이걸 웹으로 포팅하기 위한 프로젝터가 시작되었습니다...

자... 뭐부터 해야 할까요...

 

구글에 검색을 해보니 구글 크롬에서 USB HID 통신을 지원하여 구현이 가능하겠군요

Connecting to uncommon HID devices - Chrome Developers

 

Connecting to uncommon HID devices - Chrome Developers

The WebHID API allows websites to access alternative auxiliary keyboards and exotic gamepads.

developer.chrome.com

 

OpenCV 포팅이 남았습니다..

특히 AruCo 패턴을 사용하는 부분은 어떻게 포팅을 해야 할지... 

차근차근 검색해보도록 하겠습니다.

 

 

1. OpenCV.js

놀랍게도 OpenCV를 Web js 버전으로 포팅한 OpenCV.js 가 3.x 버전부터 릴리즈 되었군요~~

OpenCV: Introduction to OpenCV.js and Tutorials

 

OpenCV: Introduction to OpenCV.js and Tutorials

OpenCV OpenCV was created at Intel in 1999 by Gary Bradski. The first release came out in 2000. Vadim Pisarevsky joined Gary Bradski to manage Intel's Russian software OpenCV team. In 2005, OpenCV was used on Stanley; the vehicle that won the 2005 DARPA Gr

docs.opencv.org

 

사용법도 심플합니다. 다운받은 opencv.js를 불러오고

<script src="opencv.js" type="text/javascript"></script>

 

바로 사용하면 되는군요. 아래 소스는 이미지 파일을 불러와 cv matrix로 변환 후 canvas에 출력하는 Tutorial입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <div class="inputoutput">
    <img id="imageSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};
var Module = {
  // https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
  onRuntimeInitialized() {
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
  }
};
</script>
<script async src="opencv.js" type="text/javascript"></script>
</body>
</html>

 

 

2. AruCo

AruCo js 버전도 릴리즈 되어 있군요~~

GitHub - damianofalcioni/js-aruco2: Pure Javascript porting of ArUco, a library for camera pose estimation using squared markers

 

 

GitHub - damianofalcioni/js-aruco2: Pure Javascript porting of ArUco, a library for camera pose estimation using squared markers

Pure Javascript porting of ArUco, a library for camera pose estimation using squared markers - GitHub - damianofalcioni/js-aruco2: Pure Javascript porting of ArUco, a library for camera pose estima...

github.com

 

하지만... 같이 사용된 CV.js 에는 프로그램 영상처리에 필요한 소스가 없고 심플하게 작성되어 있네요.. 이걸로는 사용이 불가능 하겠습니다.

 

좀 더 검색을 해보니 OpenCV.js 4.x 이상에서 aruco 기능이 포함되어 있군요

 

이로서 개발을 위한 준비는 갖춰졌습니다~

 

다음 글에서는 opencv.js 를 사용하여 영상처리 포팅을 진행해보도록 하겠습니다.

728x90
반응형
저작자표시

'Development' 카테고리의 다른 글

Qt Custom 윈도우 만들기  (0) 2023.02.28
Qt 투명 윈도우 만들기  (0) 2023.02.28
Qt 화면 녹화 & 캡쳐 방지  (0) 2023.02.22
Qt 에서 한글 출력 에러 & 깨짐 해결 방법  (0) 2023.02.21
OpenCV를 Web에서 구현해보자 - 2  (0) 2023.02.07
'Development' Related Articles more
Comments