KR101649121B1

KR101649121B1 - 웹브라우저의 오픈씨브이 구현 방법

Info

Publication number: KR101649121B1
Application number: KR1020140184483A
Authority: KR
Inventors: 홍창완; 김성준
Original assignee: 주식회사 컴퍼니원헌드레드
Priority date: 2014-12-19
Filing date: 2014-12-19
Publication date: 2016-08-18
Also published as: KR20160075040A

Abstract

본 발명은 웹 브라우저(Web Browser) 환경에서 오픈 씨브이(Open Source Computer Vision)를 구현는 경우, 비전(vision) 처리와 관련성이 있는 오픈씨브이(OpenCV)를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting)하는 기술에 관한 것이다.
따라서 본 발명을 이용하는 경우 자바 스크립트 레이어에서 네이티브 레이어에 필적하는 속도로 컴퓨터 비전 라이브러리를 사용할 수 있다.

Description

웹브라우저의 오픈씨브이 구현 방법{METHOD FOR EMBODYING OPEN SOURCE COMPUTER VISION OF WEB BROWSER}

본 발명은 웹 브라우저(Web Browser) 환경에서 오픈 씨브이(Open Source Computer Vision)를 구현하는 기술에 관한 것으로, 특히 비전(vision) 처리와 관련성이 있는 OpenCV를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting)하도록 한 웹브라우저의 오픈씨브이 구현 방법에 관한 것이다.

종래의 웹 브라우저에서는 화면상에 정지된 이미지만 표시할 수 있었다. 그런데, 근래 들어, HTML5(Hyper Text Markup Language)에서 비디오를 재생하거나, 캔버스에 그림을 그리거나 웹캠(Webcam)의 영상을 받아볼 수 있는 등의 멀티미디어 기능을 구현할 수 있게 되었으며, 이와 같은 기능들을 이용하여 리얼타임 비전(Realtime - Vision) 처리를 위한 환경이 마련되었다.

리얼타임 비전 처리를 위해서는 많은 양의 데이터를 빠른 속도로 연산하여야 하므로, 비교적 연산 속도가 느린 웹 프로그래밍 언어인 자바 스크립트로 리얼타임 비전 처리를 직접 구현하는 것은 적합하지 않다.

그러나, 종래 기술에 의한 자바 스크립트 상에서의 컴퓨터 비전은 자바 스크립트로 구현된 라이브러리를 이용하거나, 하드웨어 가속을 이용하기 위해 쉐이더 프로그래밍(Shader Programming) 등을 이용하였다. 이와 같은 구현방식은 자바 스크립트라는 가상머신(VM: Virtual Machine) 상에서 구동되는 스크립트 언어 이용시 발생되는 속도상의 불이익을 감수해야 하고, 쉐이더 프로그래밍을 이용할 경우 코딩 난이도가 급격하게 상승되는 문제점이 있다.

더욱이, 종래와 같이 오픈 씨브이 라이브러리의 도움을 받지 못하고 자바 스크립트를 이용하여 직접 비전 알고리즘을 구현하는 경우, 언어의 특성상 네이티브(Native) 코드인 OpenCV보다 느리고 필요한 기능이 요구될 때 마다 해당 기능들을 모두 구현해야 하는 어려움이 있다.

본 발명이 해결하고자 하는 과제는 웹브라우저 환경에서 오픈 씨브이(OpenCV)를 구현할 때 비전(vision) 처리와 관련성이 있는 오픈 씨브이를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting)하는데 있다.

상기 기술적 과제를 이루기 위한 본 발명의 실시예에 따른 웹브라우저의 오픈씨브이 구현 방법은, 자바 스크립트 엔진이 웹 씨브이(WebCV) API(Application Programming Interface)를 호출하여 자바 스크립트를 실행하는 단계; 상기 자바 스크립트 엔진이 웹 씨브이(WebCV) 기능을 수행할 때 웹 엔진에 오픈 씨브이(OpenCV:Open Source Computer Vision) 기능 수행을 요청하고, 이에 대하여 상기 웹 엔진에서 오픈 씨브이 기능을 수행하는 단계; 상기 웹 엔진이 상기 오픈 씨브이(OpenCV) 기능 수행 과정에 따른 결과를 도출하여 그에 따른 결과를 획득하는 단계; 및 상기 자바 스크립트 엔진이 상기 웹 엔진으로부터 공급받은 기능 수행 결과를 자바스크립트 사용자에게 알리기 위해 콜백을 호출하거나, 에러처리를 위해 예외(Exception, 이하 '예외'라 칭함)를 호출하는 단계를 포함한다.

본 발명은 웹 브라우저(Web Browser) 환경에서 오픈 씨브이(Open Source Computer Vision)를 구현함에 있어서, 비전(vision) 처리와 관련성이 있는 오픈씨브이(OpenCV)를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting) 함으로써, 자바 스크립트 레이어에서 네이티브 레이어에 필적하는 속도로 컴퓨터 비전 라이브러리를 사용할 수 있는 효과가 있다.

도 1은 본 발명에 의한 웹브라우저의 컴퓨터비전 구현 방법의 전체 흐름도이다.
도 2a 내지 2g는 WebCV 인터페이스를 바인딩하기 위한 IDL의 예시도이다.
도 3은 본 발명에 따른 오픈 씨브이 기능 중에서 이미지 리드 함수의 수행과정에 대한 흐름도이다.
도 4는 본 발명에 따른 오픈 씨브이 기능 중에서 이미지 라이트 함수의 수행과정에 대한 흐름도이다.
도 5는 본 발명에 따른 오픈 씨브이 기능 중에서 파인드체스보드 코너 함수의 수행과정에 대한 흐름도이다.
도 6은 본 발명에 따른 오픈 씨브이 기능 중에서 캘리브레이트 카메라 함수의 수행과정에 대한 흐름도이다.
도 7은 본 발명에 따른 오픈 씨브이 기능 중에서 왜곡 보정함수의 수행과정에 대한 흐름도이다.

이하, 첨부한 도면을 참조하여 본 발명의 바람직한 실시예를 상세히 설명하면 다음과 같다.

도 1은 본 발명에 의한 웹브라우저의 컴퓨터비전 구현 방법의 흐름도로서 이에 도시한 바와 같이, 자바스크립트 실행 단계(S110), 오픈씨브이(OpenCV) 기능 수행단계(S120), OpenCV 기능 수행결과 획득단계(S130) 및 콜백 단계(S140)를 포함한다.

자바 스크립트 엔진(110)은 WebCV API를 호출하여 자바 스크립트를 실행한다(S110). 여기서, 상기 WebCV는 비전 라이브러리(Vision Library)인 OpenCV의 일부 기능인 수정된 형태의 DOM(Document Object Model) API(Application Programming Interface)를 자바 스크립트에 제공한다. 상기 API에 연산할 데이터를 DOM API에 넣으면 자바 스크립트가 아닌 네이티브 코드(Native Code)로 컴파일된 OpenCV를 이용하여 빠르게 연산한 후 그 결과를 자바 스크립트에 돌려준다.

상기 자바 스크립트 엔진(110)에서 WebCV 기능을 수행할 때, 웹 엔진(120)에 OpenCV(Open Source Computer Vision, 이하 'OpenCV'라 칭함) 기능을 수행할 것을 요청한다. 여기서, 상기 OpenCV는 리얼타임 비전을 빠른 속도로 처리하기 위해 만들어진 라이브러리로, 병렬화 작업을 통해 빠른 영상처리 결과를 보여주고 있다. 이에 따라, WebCV를 포함하는 웹 엔진(120)은 OpenCV 기능을 수행한다(S120). 도 2a 내지 도 2g는 WebCV 인터페이스를 바인딩하기 위한 IDL(interface definition language)의 예시도이다.

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 이미지리드 함수(imread)는 웹페이지에 존재하는 이미지를 읽어서 WebCV가 사용할 수 있도록 하는 함수이다. 즉, imread는 HTMLImageElement가 src에 갖고 있는 이미지를 WebCVMatrix 자료형으로 변환하여 콜백으로 넘겨주는 함수이다. 상기 imread가 일반적인 OpenCV에서의 imread와 다른 점은 콜백으로 받는다는 점이며, 해당 기능은 다른 쓰레드(thread)를 통해 연산되므로 연산시간이 절약된다는 것이다. OpenCV의 imread는 파일로부터 이미지를 읽어오는 반면, 본 발명에 따른 WebCV의 imread는 웹킷(WebKit)이 랜더링을 위해 미리 디코딩하여 메모리에 저장해 놓은 이미지를 복사하므로 디코딩 과정을 생략할 수 있다는 것이 다른 점이다.

도 3을 참조하여 OpenCV 기능 수행의 예로써, imread의 수행과정을 설명하면 다음과 같다.

imread()가 호출되면 이미지(image)가 HTMLImageElement 인스턴스이고 타입(Type)이 ImageReadType인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드(idle thread)에 다음과 같이 작업 수행을 할당하고, 상기 두가지 조건 중에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료 처리한다(S301-S304).

상기 제3스텝(S303)에서 실제 이미지를 로드하기 위한 작업을 수행할 때, 메인 쓰레드(main thread)가 아닌 다른 쓰레드에 작업을 할당한다. 상기 작업에 할당되는 쓰레드는 상기 쓰레드 풀에 존재하는 것이므로 포크하는 비용이 소요되지 않는다. 상기와 같이 쓰레드에 작업수행을 할당하는 과정(S301-S304)이 OpenCV와 다른 점이다.

이미지가 로딩되었는지 확인하여 로딩되지 않은 것으로 판명되면 InvalidFormat Error를 에러 코드로 지정하여 에러 콜백(error Callback)을 호출하고, 이에 의해 그 즉시 종료된다(S305,S306).

그러나, 상기 확인 결과 이미지가 로딩된 것으로 판명되면 이미지 복사에 성공하였는지 확인하여 성공하였으면, 해당 이미지에 대하여 타입에 따른 cvtColor를 수행하여 컬러로 전환하고 웹씨브이 매트릭스(WebCVMatrix) 형태로 만든다(S307,S308). 그러나, 상기 확인 결과 이미지 복사에 실패한 것으로 판명되면 미싱에러(MissingError)를 에러코드로 하는 에러콜백(errorCallback)을 호출한다(S309).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 이미지라이트 함수(imwrite)는 타겟 HTMLImageElement에 대하여 WebCVMatrix에 담겨있는 이미지 정보를 src로 설정해 주는 함수이다. imwrite도 상기 imread와 같이 다른 쓰레드에 할당하여 콜백으로 결과를 알려준다.

도 4를 참조하여 OpenCV 기능 수행의 다른 예로써, 상기 imwrite의 수행과정을 설명하면 다음과 같다.

imwrite()가 호출되면 함수 인자가 올바르게 설정되어 있는지 확인하여 올바르게 설정된 것으로 판명되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 작업 수행을 할당하고, 상기 둘 중에서 어느 하나라도 함수 인자가 아닌 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S401-S404).

png로 인코딩에 성공하였는지 확인하여 성공한 것으로 판명되면 매트릭스 데이터를 이미지 데이터의 형태로 변환한다(S405,S406). 다시 말해서, png로 인코딩에 성공한 경우 브라우저 상에 url로 표현이 가능하도록 base64 인코딩의 dataURL로 변경한다.

그러나, 상기 확인 결과 png로 인코딩에 성공하지 못한 것으로 판명되면 에러 콜백(error Callback)을 호출하여 종료된다(S407).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 파인드체스보드 코너 함수(findChessboardCorners)는 체스보드의 안쪽 코너들의 위치를 찾아내는 함수이다. 체스보드의 이미지를 프린트하여 카메라에 인식시켜 검은 사각형과 하얀 사각형이 만나는 꼭지점을 찾아낸다. 상기 꼭지점들의 거리를 근거로 카메라 렌즈 왜곡(distort)의 정도를 알아낼 수 있으며, 카메라 보정(calibrateCamera)에 도움을 주는 역할을 한다. 원하는 꼭지점들을 모두 찾아내면 성공 콜백에 WebCVPoint2f를 시퀀스로 전달한다.

도 5를 참조하여 OpenCV 기능 수행의 다른 예로써, findChessboardCorners의 수행과정을 설명하면 다음과 같다.

findChessboardCorners()가 호출되면 이미지가 웹씨브이 매트릭스(WebCVMatrix) 인스턴스이고, 이미지의 타입들(types)이 ChessboardFindingType으로 구성된 시퀀스인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 해당 작업 수행을 할당하고, 상기 두 가지 조건에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S501-S504).

cv::findChessboardCorners를 수행하여 성공하면 결과값들을 적절하게 변환하여 성공 콜백으로 올려주고, 실패하면 실패 콜백을 호출하여 종료 처리한다(S505-S507).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 캘리브레이트 카메라 함수(calibrateCamera)는 카메라의 왜곡 보정을 위한 함수이다. 카메라의 왜곡에 관련된 해당 파라미터들은 undistort 함수에 넘겨져 최종적으로 왜곡보정을 위해 사용된다.

도 6을 참조하여 OpenCV 기능 수행의 다른 예로써, calibrateCamera의 수행과정을 설명하면 다음과 같다.

calibrateCamera()가 호출되면 오브젝트 포인트(objectPoint)가 WebCVPoint3fList []이고, 이미지 포인트가 WebCVPoint2fList인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 해당 작업 수행을 할당하고, 상기 두 가지 조건에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S601-S604).

cv::calibrateCamera를 호출하여 카메라 왜곡 파라미터들을 알아낸 후 알아낸 결과들을 calibrateCameraSuccessCallback에 정의된 인자들을 포함시켜 해당 콜백을 호출한다(S605).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 왜곡보정 함수(undistort)는 카메라로부터 생성된 왜곡된 이미지를 상기 calibrateCamera 함수를 통해 얻은 파라미터들을 사용하여 정상적인 상태의 이미지로 보정하기 위한 함수이다.

도 7을 참조하여 OpenCV 기능 수행의 다른 예로써, undistort의 수행과정을 설명하면 다음과 같다.

undistort()가 호출되면 distorted가 WebCVMatrix 인스턴스이고, instrinsic_ camera_param과 distorted_coefficients가 WebCVMatrix 인스턴스인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 해당 작업 수행을 할당하고, 상기 두 가지 모건에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S701-S704).

OpenCV API인 cv::undistort를 호출하여 왜곡 보정된 이미지 데이터를 갖는 WebCVMatrix를 생성한 후 상기 WebCVMatrix 인스턴스를 UndistortSuccessCallback에 담아 해당 콜백을 호출하여 종료처리한다(S705).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 함수들이 상기 5가지의 함수들로 한정되지 않는다. 즉, 본 발명에 따라 OpenCV 기능 수행을 위해 콜백을 던지는 다른 함수들은 상기 다섯가지 함수들과 목적과 기능만 다를 뿐 원리는 유사하고, 콜백을 던지지 않는 함수들은 OpenCV API 형태와 유사하며, 각 함수가 OpenCV 함수와 1:1로 맵핑되어 있다. 참고로, create^* 함수들은 기본 자료구조 등을 생성하는 함수일 뿐 특별한 기능을 제공하지 않는다.

이후, 상기 웹 엔진(120)은 상기와 같은 OpenCV 수행 과정에 따른 결과를 도출하여 그에 따른 기능 수행 결과를 획득한다(S130).

상기 자바 스크립트 엔진(110)은 상기 웹 엔진(120)으로부터 공급받은 기능 수행 결과를 자바스크립트 사용자에게 알리기 위해 콜백을 호출하거나, 에러처리를 위해 예외를 호출한다(S140).

이상에서 본 발명의 바람직한 실시예에 대하여 상세히 설명하였지만, 본 발명의 권리범위가 이에 한정되는 것이 아니라 다음의 청구범위에서 정의하는 본 발명의 기본 개념을 바탕으로 보다 다양한 실시예로 구현될 수 있으며, 이러한 실시예들 또한 본 발명의 권리범위에 속하는 것이다.

110 : 자바 스크립트 엔진 120 : 웹 엔진

Claims

(a) 자바 스크립트 엔진이 웹 씨브이(WebCV) API(Application Programming Interface)를 호출하여 자바 스크립트를 실행하는 단계;
(b) 상기 자바 스크립트 엔진이 웹 씨브이(WebCV) 기능을 수행할 때 웹 엔진에 오픈 씨브이(OpenCV:Open Source Computer Vision) 기능 수행을 요청하고, 이에 대하여 상기 웹 엔진에서 오픈 씨브이 기능을 수행하는 단계;
(c) 상기 웹 엔진이 상기 오픈 씨브이(OpenCV) 기능 수행 과정에 따른 결과를 도출하여 그에 따른 결과를 획득하는 단계; 및
(d) 상기 자바 스크립트 엔진이 상기 웹 엔진으로부터 공급받은 기능 수행 결과를 자바스크립트 사용자에게 알리기 위해 콜백을 호출하거나, 에러처리를 위해 예외(Exception)를 호출하는 단계를 포함하되,
상기 (b) 단계는
상기 웹 엔진에서 이미지 리드 함수(imread)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시,
상기 이미지 리드 함수가 호출되면 이미지(image)가 HTMLImageElement 인스턴스이고 타입(Type)이 imageReadType인지 확인하여 다음 단계로 진행하거나 종료 처리하는 단계;
이미지가 로딩되었는지 확인하여 로딩되지 않은 것으로 판명되면 종료 처리하는 단계; 및
이미지가 로딩된 것으로 판명되면 이미지 복사의 성공 여부에 따라 해당 이미지에 대하여 타입에 따른 cvtColor를 수행하여 해당 이미지를 컬러로 전환하고 웹씨브이 매트릭스(WebCVMatrix) 형태로 만들거나 종료 처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
제1항에 있어서, 상기 (a) 단계는
상기 API에 연산할 데이터를 DOM(Document Object Model) API에 넣으면 자바 스크립트가 아닌 네이티브 코드(Native Code)로 컴파일된 오픈 씨브이(OpenCV)를 이용하여 연산한 후 상기 연산 결과를 자바 스크립트에 돌려주는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
삭제
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 이미지 라이트 함수(imwrite)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시,
상기 이미지 라이트 함수가 호출되면 함수 인자가 올바르게 설정되어 있는지의 여부에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료처리하는 단계; 및
png로 인코딩에 성공하였는지의 여부에 따라 매트릭스 데이터를 이미지 데이터의 형태로 변환하거나, 종료처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 파인드 체스보드 코너 함수(findChessboardCorners)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시
상기 파인드 체스보드 코너 함수가 호출되면 이미지가 웹씨브이 매트릭스(WebCVMatrix) 인스턴스이고, 이미지의 타입이 ChessboardFindingType으로 구성된 시퀀스인지 확인하여 상기 두 가지 조건의 만족 여부에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료 처리하는 단계; 및
cv::findChessboardCorners를 수행하여 성공여부에 따라 결과값들을 적절하게 변환하여 성공 콜백으로 올려주거나 종료 처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 캘리브레이트 카메라 함수(calibrateCamera)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시
상기 캘리브레이트 카메라 함수가 호출되면 오브젝트 포인트(objectPoint)가 WebCVPoint3fList[]이고, 이미지 포인트가 WebCVPoint2fList인지 확인하여 상기 확인 결과에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료 처리하는 단계; 및
cv::calibrateCamera를 호출하여 카메라 왜곡 파라미터들을 알아낸 후 상기 알아낸 결과들을 calibrateCameraSuccessCallback에 정의된 인자들을 포함시켜 해당 콜백을 호출하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 왜곡보정 함수(undistort)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시
상기 왜곡보정 함수가 호출되면 distorted가 WebCVMatrix 인스턴스이고, cameraMatrix와 disCoeffs가 WebCVMatrix 인스턴스인지 확인하여 상기 확인 결과에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료 처리하는 단계; 및
OpenCV API인 cv::undistort를 호출하여 왜곡 보정된 이미지 데이터를 갖는 WebCVMatrix를 생성한 후 상기 WebCVMatrix 인스턴스를 UndistortSuccessCallback에 담아 해당 콜백을 호출하여 종료 처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.