KR101649121B1 - Method for embodying open source computer vision of web browser - Google Patents

Method for embodying open source computer vision of web browser Download PDF

Info

Publication number
KR101649121B1
KR101649121B1 KR1020140184483A KR20140184483A KR101649121B1 KR 101649121 B1 KR101649121 B1 KR 101649121B1 KR 1020140184483 A KR1020140184483 A KR 1020140184483A KR 20140184483 A KR20140184483 A KR 20140184483A KR 101649121 B1 KR101649121 B1 KR 101649121B1
Authority
KR
South Korea
Prior art keywords
function
image
opencv
javascript
webcvmatrix
Prior art date
Application number
KR1020140184483A
Other languages
Korean (ko)
Other versions
KR20160075040A (en
Inventor
홍창완
김성준
Original Assignee
주식회사 컴퍼니원헌드레드
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 컴퍼니원헌드레드 filed Critical 주식회사 컴퍼니원헌드레드
Priority to KR1020140184483A priority Critical patent/KR101649121B1/en
Publication of KR20160075040A publication Critical patent/KR20160075040A/en
Application granted granted Critical
Publication of KR101649121B1 publication Critical patent/KR101649121B1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/448Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488Object-oriented
    • G06F9/449Object-oriented method invocation or resolution

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

본 발명은 웹 브라우저(Web Browser) 환경에서 오픈 씨브이(Open Source Computer Vision)를 구현는 경우, 비전(vision) 처리와 관련성이 있는 오픈씨브이(OpenCV)를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting)하는 기술에 관한 것이다.
따라서 본 발명을 이용하는 경우 자바 스크립트 레이어에서 네이티브 레이어에 필적하는 속도로 컴퓨터 비전 라이브러리를 사용할 수 있다.
The present invention can be used as a JavaScript used in a web browser when an open source computer vision is implemented in a web browser environment, and OpenCV related to vision processing can be used. The present invention relates to a technique for porting data to a computer system.
Therefore, when using the present invention, a computer vision library can be used at a speed comparable to a native layer in a JavaScript layer.

Description

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

본 발명은 웹 브라우저(Web Browser) 환경에서 오픈 씨브이(Open Source Computer Vision)를 구현하는 기술에 관한 것으로, 특히 비전(vision) 처리와 관련성이 있는 OpenCV를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting)하도록 한 웹브라우저의 오픈씨브이 구현 방법에 관한 것이다.
The present invention relates to a Web browser (Web browser) Source Computer Vision), and in particular, a method of implementing an Open CIV implementation of a web browser in which OpenCV, which is related to vision processing, is available for use as JavaScript in a web browser. .

종래의 웹 브라우저에서는 화면상에 정지된 이미지만 표시할 수 있었다. 그런데, 근래 들어, HTML5(Hyper Text Markup Language)에서 비디오를 재생하거나, 캔버스에 그림을 그리거나 웹캠(Webcam)의 영상을 받아볼 수 있는 등의 멀티미디어 기능을 구현할 수 있게 되었으며, 이와 같은 기능들을 이용하여 리얼타임 비전(Realtime - Vision) 처리를 위한 환경이 마련되었다. In the conventional web browser, only the still image can be displayed on the screen. However, recently, it has become possible to implement multimedia functions such as playing video in HTML5 (Hyper Text Markup Language), drawing pictures on a canvas, and receiving images from a webcam. To provide an environment for realtime - vision processing.

리얼타임 비전 처리를 위해서는 많은 양의 데이터를 빠른 속도로 연산하여야 하므로, 비교적 연산 속도가 느린 웹 프로그래밍 언어인 자바 스크립트로 리얼타임 비전 처리를 직접 구현하는 것은 적합하지 않다.Because real-time vision processing requires a large amount of data to be computed at a high speed, it is not suitable to directly implement real-time vision processing with JavaScript, a web programming language that has a relatively slow operation speed.

그러나, 종래 기술에 의한 자바 스크립트 상에서의 컴퓨터 비전은 자바 스크립트로 구현된 라이브러리를 이용하거나, 하드웨어 가속을 이용하기 위해 쉐이더 프로그래밍(Shader Programming) 등을 이용하였다. 이와 같은 구현방식은 자바 스크립트라는 가상머신(VM: Virtual Machine) 상에서 구동되는 스크립트 언어 이용시 발생되는 속도상의 불이익을 감수해야 하고, 쉐이더 프로그래밍을 이용할 경우 코딩 난이도가 급격하게 상승되는 문제점이 있다. However, the computer vision on the JavaScript according to the prior art uses a library implemented in JavaScript or a shader programming to use hardware acceleration. Such an implementation method is disadvantageous in respect of speed penalty incurred when using a script language running on a virtual machine (VM: Virtual Machine) called JavaScript, and the difficulty of coding is greatly increased when shader programming is used.

더욱이, 종래와 같이 오픈 씨브이 라이브러리의 도움을 받지 못하고 자바 스크립트를 이용하여 직접 비전 알고리즘을 구현하는 경우, 언어의 특성상 네이티브(Native) 코드인 OpenCV보다 느리고 필요한 기능이 요구될 때 마다 해당 기능들을 모두 구현해야 하는 어려움이 있다.
Furthermore, when a direct vision algorithm is implemented using JavaScript without the help of the Open CUB library as in the past, it is slower than OpenCV, which is a native code due to the nature of the language, There are difficulties to implement.

본 발명이 해결하고자 하는 과제는 웹브라우저 환경에서 오픈 씨브이(OpenCV)를 구현할 때 비전(vision) 처리와 관련성이 있는 오픈 씨브이를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting)하는데 있다.
A problem to be solved by the present invention is to port Open CIV, which is related to vision processing, to JavaScript used in a web browser when implementing OpenCV in a web browser environment have.

상기 기술적 과제를 이루기 위한 본 발명의 실시예에 따른 웹브라우저의 오픈씨브이 구현 방법은, 자바 스크립트 엔진이 웹 씨브이(WebCV) API(Application Programming Interface)를 호출하여 자바 스크립트를 실행하는 단계; 상기 자바 스크립트 엔진이 웹 씨브이(WebCV) 기능을 수행할 때 웹 엔진에 오픈 씨브이(OpenCV:Open Source Computer Vision) 기능 수행을 요청하고, 이에 대하여 상기 웹 엔진에서 오픈 씨브이 기능을 수행하는 단계; 상기 웹 엔진이 상기 오픈 씨브이(OpenCV) 기능 수행 과정에 따른 결과를 도출하여 그에 따른 결과를 획득하는 단계; 및 상기 자바 스크립트 엔진이 상기 웹 엔진으로부터 공급받은 기능 수행 결과를 자바스크립트 사용자에게 알리기 위해 콜백을 호출하거나, 에러처리를 위해 예외(Exception, 이하 '예외'라 칭함)를 호출하는 단계를 포함한다.
According to an aspect of the present invention, there is provided a method for implementing an open service in a web browser, the method comprising: executing a JavaScript by calling a WebCV application programming interface (API); When the JavaScript engine performs a WebCV function, requests the Web engine to perform an OpenCV function, and performs an open CUB function in the Web engine ; Deriving a result of the Web engine performing the OpenCV function and obtaining a result according to the result; And invoking a callback to notify the JavaScript user of the function execution result supplied from the web engine or invoking an exception (hereinafter, referred to as 'exception') for error processing.

본 발명은 웹 브라우저(Web Browser) 환경에서 오픈 씨브이(Open Source Computer Vision)를 구현함에 있어서, 비전(vision) 처리와 관련성이 있는 오픈씨브이(OpenCV)를 웹 브라우저에서 사용하는 자바 스크립트로 이용 가능하게 포팅(porting) 함으로써, 자바 스크립트 레이어에서 네이티브 레이어에 필적하는 속도로 컴퓨터 비전 라이브러리를 사용할 수 있는 효과가 있다.
The present invention utilizes OpenCV (OpenCV), which is related to vision processing, as a JavaScript used in a web browser in implementing an Open Source Computer Vision in a web browser environment By porting, it is possible to use the computer vision library at the speed comparable to the native layer in the JavaScript layer.

도 1은 본 발명에 의한 웹브라우저의 컴퓨터비전 구현 방법의 전체 흐름도이다.
도 2a 내지 2g는 WebCV 인터페이스를 바인딩하기 위한 IDL의 예시도이다.
도 3은 본 발명에 따른 오픈 씨브이 기능 중에서 이미지 리드 함수의 수행과정에 대한 흐름도이다.
도 4는 본 발명에 따른 오픈 씨브이 기능 중에서 이미지 라이트 함수의 수행과정에 대한 흐름도이다.
도 5는 본 발명에 따른 오픈 씨브이 기능 중에서 파인드체스보드 코너 함수의 수행과정에 대한 흐름도이다.
도 6은 본 발명에 따른 오픈 씨브이 기능 중에서 캘리브레이트 카메라 함수의 수행과정에 대한 흐름도이다.
도 7은 본 발명에 따른 오픈 씨브이 기능 중에서 왜곡 보정함수의 수행과정에 대한 흐름도이다.
1 is a flow chart of a method for implementing a computer vision of a web browser according to the present invention.
2A to 2G are exemplary views of an IDL for binding a WebCV interface.
FIG. 3 is a flowchart illustrating an operation of an image lead function among the open-loop functions according to the present invention.
FIG. 4 is a flowchart illustrating an operation of an image write function among open-loop functions according to the present invention.
FIG. 5 is a flowchart illustrating a process of performing a find chess board corner function among open-circuit functions according to the present invention.
FIG. 6 is a flowchart illustrating an operation procedure of a calibrate camera function among open-circuit functions according to the present invention.
7 is a flowchart illustrating a process of performing a distortion correction function among the open-loop functions according to the present invention.

이하, 첨부한 도면을 참조하여 본 발명의 바람직한 실시예를 상세히 설명하면 다음과 같다.Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings.

도 1은 본 발명에 의한 웹브라우저의 컴퓨터비전 구현 방법의 흐름도로서 이에 도시한 바와 같이, 자바스크립트 실행 단계(S110), 오픈씨브이(OpenCV) 기능 수행단계(S120), OpenCV 기능 수행결과 획득단계(S130) 및 콜백 단계(S140)를 포함한다.FIG. 1 is a flow chart illustrating a method for implementing a computer vision of a web browser according to the present invention. As shown in FIG. 1, a JavaScript execution step S110, an OpenCV function execution step S120, (S130) and a callback step (S140).

자바 스크립트 엔진(110)은 WebCV API를 호출하여 자바 스크립트를 실행한다(S110). 여기서, 상기 WebCV는 비전 라이브러리(Vision Library)인 OpenCV의 일부 기능인 수정된 형태의 DOM(Document Object Model) API(Application Programming Interface)를 자바 스크립트에 제공한다. 상기 API에 연산할 데이터를 DOM API에 넣으면 자바 스크립트가 아닌 네이티브 코드(Native Code)로 컴파일된 OpenCV를 이용하여 빠르게 연산한 후 그 결과를 자바 스크립트에 돌려준다. The JavaScript engine 110 calls the WebCV API to execute JavaScript (S110). Here, the WebCV provides a modified DOM (Document Object Model) API (Application Programming Interface), which is a part of OpenCV, a vision library, to JavaScript. If the data to be operated on the API is put into the DOM API, it is quickly computed by using OpenCV compiled with native code (Native Code), and returns the result to the JavaScript.

상기 자바 스크립트 엔진(110)에서 WebCV 기능을 수행할 때, 웹 엔진(120)에 OpenCV(Open Source Computer Vision, 이하 'OpenCV'라 칭함) 기능을 수행할 것을 요청한다. 여기서, 상기 OpenCV는 리얼타임 비전을 빠른 속도로 처리하기 위해 만들어진 라이브러리로, 병렬화 작업을 통해 빠른 영상처리 결과를 보여주고 있다. 이에 따라, WebCV를 포함하는 웹 엔진(120)은 OpenCV 기능을 수행한다(S120). 도 2a 내지 도 2g는 WebCV 인터페이스를 바인딩하기 위한 IDL(interface definition language)의 예시도이다. When performing the WebCV function in the JavaScript engine 110, the JavaScript engine 110 requests the Web engine 120 to perform OpenCV (Open Source Computer Vision). Here, OpenCV is a library created to process real-time vision at a high speed, and shows fast image processing results through parallelization. Accordingly, the Web engine 120 including the WebCV performs the OpenCV function (S120). 2A to 2G are exemplary diagrams of an interface definition language (IDL) for binding a WebCV interface.

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 이미지리드 함수(imread)는 웹페이지에 존재하는 이미지를 읽어서 WebCV가 사용할 수 있도록 하는 함수이다. 즉, imread는 HTMLImageElement가 src에 갖고 있는 이미지를 WebCVMatrix 자료형으로 변환하여 콜백으로 넘겨주는 함수이다. 상기 imread가 일반적인 OpenCV에서의 imread와 다른 점은 콜백으로 받는다는 점이며, 해당 기능은 다른 쓰레드(thread)를 통해 연산되므로 연산시간이 절약된다는 것이다. OpenCV의 imread는 파일로부터 이미지를 읽어오는 반면, 본 발명에 따른 WebCV의 imread는 웹킷(WebKit)이 랜더링을 위해 미리 디코딩하여 메모리에 저장해 놓은 이미지를 복사하므로 디코딩 과정을 생략할 수 있다는 것이 다른 점이다. The image read function (imread) for performing the OpenCV function according to the embodiment of the present invention is a function for reading an image existing on a web page and making it available to the WebCV. In other words, imread is a function that HTMLImageElement converts the image in src to WebCVMatrix data type and passes it to callback. The imread differs from imread in general OpenCV in that it receives a callback, and its function is computed through another thread, which saves computation time. OpenCV imread reads an image from a file, whereas imread of WebCV according to the present invention differs from webKit in that a decoding process is omitted because a WebKit copies an image stored in a memory in advance before decoding it for rendering .

도 3을 참조하여 OpenCV 기능 수행의 예로써, imread의 수행과정을 설명하면 다음과 같다.Referring to FIG. 3, an imread process will be described as an example of performing the OpenCV function.

imread()가 호출되면 이미지(image)가 HTMLImageElement 인스턴스이고 타입(Type)이 ImageReadType인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드(idle thread)에 다음과 같이 작업 수행을 할당하고, 상기 두가지 조건 중에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료 처리한다(S301-S304). When imread () is called, the image is an instance of HTMLImageElement and the Type is If it is determined that ImageReadType is satisfied and if both of the above two conditions are satisfied, task execution is assigned to an idle thread in a thread pool as follows. If it is determined that any of the two conditions is not satisfied, Code TypeError is generated and terminated (S301-S304).

상기 제3스텝(S303)에서 실제 이미지를 로드하기 위한 작업을 수행할 때, 메인 쓰레드(main thread)가 아닌 다른 쓰레드에 작업을 할당한다. 상기 작업에 할당되는 쓰레드는 상기 쓰레드 풀에 존재하는 것이므로 포크하는 비용이 소요되지 않는다. 상기와 같이 쓰레드에 작업수행을 할당하는 과정(S301-S304)이 OpenCV와 다른 점이다.When performing an operation for loading an actual image in the third step (S303), a task is assigned to a thread other than the main thread. Since the thread allocated to the task exists in the thread pool, no cost is required for forking. As described above, the process (S301-S304) for allocating work to threads is different from OpenCV.

이미지가 로딩되었는지 확인하여 로딩되지 않은 것으로 판명되면 InvalidFormat Error를 에러 코드로 지정하여 에러 콜백(error Callback)을 호출하고, 이에 의해 그 즉시 종료된다(S305,S306). If it is determined that the image has not been loaded and it is determined that the image is not loaded, an InvalidFormat Error is specified as an error code, and an error callback is called to terminate the error callback (S305, S306).

그러나, 상기 확인 결과 이미지가 로딩된 것으로 판명되면 이미지 복사에 성공하였는지 확인하여 성공하였으면, 해당 이미지에 대하여 타입에 따른 cvtColor를 수행하여 컬러로 전환하고 웹씨브이 매트릭스(WebCVMatrix) 형태로 만든다(S307,S308). 그러나, 상기 확인 결과 이미지 복사에 실패한 것으로 판명되면 미싱에러(MissingError)를 에러코드로 하는 에러콜백(errorCallback)을 호출한다(S309). However, if it is determined that the image has been loaded as a result of the check, if it is determined that the image has been copied successfully, the image is cvtColor according to the type of the image and converted into color and made into WebCVMatrix (S307, S308 ). However, if it is determined that the image copying has failed as a result of the check, an error callback with an error code of MissingError is called (S309).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 이미지라이트 함수(imwrite)는 타겟 HTMLImageElement에 대하여 WebCVMatrix에 담겨있는 이미지 정보를 src로 설정해 주는 함수이다. imwrite도 상기 imread와 같이 다른 쓰레드에 할당하여 콜백으로 결과를 알려준다.The image write function (imwrite) for performing the OpenCV function according to the embodiment of the present invention sets the image information contained in the WebCVMatrix to src for the target HTMLImageElement. imwrite is also assigned to another thread, such as imread, and the callback informs the result.

도 4를 참조하여 OpenCV 기능 수행의 다른 예로써, 상기 imwrite의 수행과정을 설명하면 다음과 같다.As another example of performing the OpenCV function with reference to FIG. 4, the process of imwrite will be described as follows.

imwrite()가 호출되면 함수 인자가 올바르게 설정되어 있는지 확인하여 올바르게 설정된 것으로 판명되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 작업 수행을 할당하고, 상기 둘 중에서 어느 하나라도 함수 인자가 아닌 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S401-S404). When imwrite () is called, it checks to see if the function argument is set correctly. If it is found to be set correctly, it assigns the task execution to the idle thread in the thread pool as follows, An error code (TypeError) is generated and terminated (S401-S404).

png로 인코딩에 성공하였는지 확인하여 성공한 것으로 판명되면 매트릭스 데이터를 이미지 데이터의 형태로 변환한다(S405,S406). 다시 말해서, png로 인코딩에 성공한 경우 브라우저 상에 url로 표현이 가능하도록 base64 인코딩의 dataURL로 변경한다.png. If it is determined that the encoding is successful, the matrix data is converted into image data (S405, S406). In other words, if encoding is successful in png, change it to base64-encoded dataURL so that it can be represented as a url on the browser.

그러나, 상기 확인 결과 png로 인코딩에 성공하지 못한 것으로 판명되면 에러 콜백(error Callback)을 호출하여 종료된다(S407). However, if it is determined that the encoding is unsuccessful in the png, the call is terminated by calling an error callback (S407).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 파인드체스보드 코너 함수(findChessboardCorners)는 체스보드의 안쪽 코너들의 위치를 찾아내는 함수이다. 체스보드의 이미지를 프린트하여 카메라에 인식시켜 검은 사각형과 하얀 사각형이 만나는 꼭지점을 찾아낸다. 상기 꼭지점들의 거리를 근거로 카메라 렌즈 왜곡(distort)의 정도를 알아낼 수 있으며, 카메라 보정(calibrateCamera)에 도움을 주는 역할을 한다. 원하는 꼭지점들을 모두 찾아내면 성공 콜백에 WebCVPoint2f를 시퀀스로 전달한다.A find chessboard corner function (findChessboardCorners) for performing an OpenCV function according to an embodiment of the present invention is a function for locating the inner corners of a chess board. The image of the chess board is printed and recognized by the camera to find the vertex where the black square and the white square meet. The degree of distortion of the camera lens can be determined based on the distances of the vertices, and it helps to calibrate the camera. If you find all the vertices you want, you pass WebCVPoint2f to the success callback as a sequence.

도 5를 참조하여 OpenCV 기능 수행의 다른 예로써, findChessboardCorners의 수행과정을 설명하면 다음과 같다.As another example of performing the OpenCV function with reference to FIG. 5, a process of executing the findChessboardCorners will be described as follows.

findChessboardCorners()가 호출되면 이미지가 웹씨브이 매트릭스(WebCVMatrix) 인스턴스이고, 이미지의 타입들(types)이 ChessboardFindingType으로 구성된 시퀀스인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 해당 작업 수행을 할당하고, 상기 두 가지 조건에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S501-S504). When findChessboardCorners () is called, it checks if the image is a WebCVMatrix instance and that the types of the image are a sequence of ChessboardFindingType. If both of the above conditions are satisfied, the child thread in the thread pool (S501-S504). If it is determined that none of the above two conditions is satisfied, an error code (Type Error) is generated and the process is terminated (S501-S504).

cv::findChessboardCorners를 수행하여 성공하면 결과값들을 적절하게 변환하여 성공 콜백으로 올려주고, 실패하면 실패 콜백을 호출하여 종료 처리한다(S505-S507).If cv :: findChessboardCorners is successful, the result values are appropriately converted and uploaded to the success callback. If the result is unsuccessful, the failure callback is called to terminate processing (S505-S507).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 캘리브레이트 카메라 함수(calibrateCamera)는 카메라의 왜곡 보정을 위한 함수이다. 카메라의 왜곡에 관련된 해당 파라미터들은 undistort 함수에 넘겨져 최종적으로 왜곡보정을 위해 사용된다.The calibrate camera function (CalibrateCamera) for performing the OpenCV function according to the embodiment of the present invention is a function for correcting distortion of the camera. The corresponding parameters related to camera distortion are passed to the undistort function and finally used for distortion correction.

도 6을 참조하여 OpenCV 기능 수행의 다른 예로써, calibrateCamera의 수행과정을 설명하면 다음과 같다.As another example of performing OpenCV function with reference to FIG. 6, a process of calibrateCamera will be described as follows.

calibrateCamera()가 호출되면 오브젝트 포인트(objectPoint)가 WebCVPoint3fList []이고, 이미지 포인트가 WebCVPoint2fList인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 해당 작업 수행을 할당하고, 상기 두 가지 조건에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S601-S604). When calibrateCamera () is called, it checks whether the object point (objectPoint) is WebCVPoint3fList [] and the image point is WebCVPoint2fList. If both of the above conditions are satisfied, the following operation is performed on the idle thread in the thread pool If it is determined that none of the above two conditions is satisfied, an error code (Type Error) is generated and terminated (S601-S604).

cv::calibrateCamera를 호출하여 카메라 왜곡 파라미터들을 알아낸 후 알아낸 결과들을 calibrateCameraSuccessCallback에 정의된 인자들을 포함시켜 해당 콜백을 호출한다(S605).call the cv :: calibrateCamera to find the camera distortion parameters, and then call the corresponding callbacks including the parameters defined in calibrateCameraSuccessCallback (S605).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 왜곡보정 함수(undistort)는 카메라로부터 생성된 왜곡된 이미지를 상기 calibrateCamera 함수를 통해 얻은 파라미터들을 사용하여 정상적인 상태의 이미지로 보정하기 위한 함수이다. The distortion correction function undistort for performing an OpenCV function according to an embodiment of the present invention is a function for correcting a distorted image generated from a camera to an image in a normal state using parameters obtained through the calibrateCamera function.

도 7을 참조하여 OpenCV 기능 수행의 다른 예로써, undistort의 수행과정을 설명하면 다음과 같다.As another example of performing the OpenCV function with reference to FIG. 7, the procedure of undistort will be described as follows.

undistort()가 호출되면 distorted가 WebCVMatrix 인스턴스이고, instrinsic_ camera_param과 distorted_coefficients가 WebCVMatrix 인스턴스인지 확인하여 상기 두 가지 조건이 모두 만족되면 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 다음과 같이 해당 작업 수행을 할당하고, 상기 두 가지 모건에서 어느 하나라도 만족되지 않는 것으로 판명되면 에러코드(TypeError)를 발생하여 종료처리한다(S701-S704). When undistort () is called, distorted is the WebCVMatrix instance, and instrinsic_ camera_param and distorted_coefficients are the WebCVMatrix instances. If both of the above conditions are satisfied, the task execution is assigned to the idle thread in the thread pool as follows If it is determined that none of the two morals is satisfied, an error code (TypeError) is generated and terminated (S701-S704).

OpenCV API인 cv::undistort를 호출하여 왜곡 보정된 이미지 데이터를 갖는 WebCVMatrix를 생성한 후 상기 WebCVMatrix 인스턴스를 UndistortSuccessCallback에 담아 해당 콜백을 호출하여 종료처리한다(S705).The OpenCV API cv :: undistort is called to create the WebCVMatrix having the image data with the distortion correction, and the WebCVMatrix instance is placed in the UndistortSuccessCallback, and the corresponding callback is called to terminate the process (S705).

본 발명의 실시예에 따른 OpenCV 기능 수행을 위한 함수들이 상기 5가지의 함수들로 한정되지 않는다. 즉, 본 발명에 따라 OpenCV 기능 수행을 위해 콜백을 던지는 다른 함수들은 상기 다섯가지 함수들과 목적과 기능만 다를 뿐 원리는 유사하고, 콜백을 던지지 않는 함수들은 OpenCV API 형태와 유사하며, 각 함수가 OpenCV 함수와 1:1로 맵핑되어 있다. 참고로, create* 함수들은 기본 자료구조 등을 생성하는 함수일 뿐 특별한 기능을 제공하지 않는다. The functions for performing the OpenCV function according to the embodiment of the present invention are not limited to the above five functions. In other words, according to the present invention, other functions for calling a callback function for performing an OpenCV function are similar to those of the OpenCV API, except that the functions are similar to those of the above five functions but are similar to those of the OpenCV API. It is mapped 1: 1 with OpenCV function. Note that create * functions are functions that generate basic data structures and so on, but do not provide any special functions.

이후, 상기 웹 엔진(120)은 상기와 같은 OpenCV 수행 과정에 따른 결과를 도출하여 그에 따른 기능 수행 결과를 획득한다(S130). Then, the web engine 120 derives a result of the OpenCV process and obtains a function execution result (S130).

상기 자바 스크립트 엔진(110)은 상기 웹 엔진(120)으로부터 공급받은 기능 수행 결과를 자바스크립트 사용자에게 알리기 위해 콜백을 호출하거나, 에러처리를 위해 예외를 호출한다(S140).
The JavaScript engine 110 calls a callback to notify the JavaScript user of the function execution result supplied from the web engine 120 or an exception is called for error processing at step S140.

이상에서 본 발명의 바람직한 실시예에 대하여 상세히 설명하였지만, 본 발명의 권리범위가 이에 한정되는 것이 아니라 다음의 청구범위에서 정의하는 본 발명의 기본 개념을 바탕으로 보다 다양한 실시예로 구현될 수 있으며, 이러한 실시예들 또한 본 발명의 권리범위에 속하는 것이다.
Although the preferred embodiments of the present invention have been described in detail above, it should be understood that the scope of the present invention is not limited thereto. These embodiments are also within the scope of the present invention.

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

Claims (7)

(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) 형태로 만들거나 종료 처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
(a) the JavaScript engine invokes a WebCV application programming interface (API) to execute JavaScript;
(b) when the JavaScript engine performs a WebCV function, it requests an OpenCV function to be performed by the Web engine, and the open engine function ;
(c) deriving a result of the Web engine performing the OpenCV function and obtaining a result thereof; And
(d) calling the callback to notify the JavaScript user of the function execution result supplied from the web engine, or calling an exception for the error processing,
The step (b)
Upon execution of the OpenCV function on the image read function (imread) in the web engine,
If the image read function is called, checking whether the image is an HTMLImageElement instance and the type is imageReadType, and then proceeding to the next step or terminating the processing;
Confirming that the image has been loaded and terminating if it is determined that the image is not loaded; And
If it is determined that the image has been loaded, cvtColor corresponding to the type of the image is executed according to the success or failure of copying the image, and the corresponding image is converted into color and made into WebCVMatrix form or terminated A feature of the open browser implementation of the web browser.
제1항에 있어서, 상기 (a) 단계는
상기 API에 연산할 데이터를 DOM(Document Object Model) API에 넣으면 자바 스크립트가 아닌 네이티브 코드(Native Code)로 컴파일된 오픈 씨브이(OpenCV)를 이용하여 연산한 후 상기 연산 결과를 자바 스크립트에 돌려주는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
The method of claim 1, wherein step (a)
When the data to be operated on the API is put into a DOM (Document Object Model) API, the API is operated using OpenCV compiled into native code rather than JavaScript, and then the operation result is returned to the JavaScript The method comprising the steps of:
삭제delete 제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 이미지 라이트 함수(imwrite)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시,
상기 이미지 라이트 함수가 호출되면 함수 인자가 올바르게 설정되어 있는지의 여부에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료처리하는 단계; 및
png로 인코딩에 성공하였는지의 여부에 따라 매트릭스 데이터를 이미지 데이터의 형태로 변환하거나, 종료처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
2. The method of claim 1, wherein step (b)
When performing the OpenCV function for the image write function (imwrite) in the web engine,
If the image write function is called, proceeding to the next step, depending on whether the function argument is set correctly, allocating or terminating the task execution to the idle thread in the thread pool; And
converting the matrix data into image data according to whether or not the encoding has succeeded in the png, or ending the processing.
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 파인드 체스보드 코너 함수(findChessboardCorners)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시
상기 파인드 체스보드 코너 함수가 호출되면 이미지가 웹씨브이 매트릭스(WebCVMatrix) 인스턴스이고, 이미지의 타입이 ChessboardFindingType으로 구성된 시퀀스인지 확인하여 상기 두 가지 조건의 만족 여부에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료 처리하는 단계; 및
cv::findChessboardCorners를 수행하여 성공여부에 따라 결과값들을 적절하게 변환하여 성공 콜백으로 올려주거나 종료 처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
2. The method of claim 1, wherein step (b)
When the web engine performs the openCV function on the find chessboard corner function (findChessboardCorners)
When the find chess board corner function is called, it is determined whether the image is a WebCVMatrix instance and the image type is a sequence composed of ChessboardFindingType. If the two conditions are satisfied, the next step is performed to determine whether the thread pool Assigning or terminating the task execution to an idle thread in the idle thread in the idle thread; And
cv :: findChessboardCorners to convert the result values according to success or not, and to upload or terminate the success callback to the success callback.
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 캘리브레이트 카메라 함수(calibrateCamera)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시
상기 캘리브레이트 카메라 함수가 호출되면 오브젝트 포인트(objectPoint)가 WebCVPoint3fList[]이고, 이미지 포인트가 WebCVPoint2fList인지 확인하여 상기 확인 결과에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료 처리하는 단계; 및
cv::calibrateCamera를 호출하여 카메라 왜곡 파라미터들을 알아낸 후 상기 알아낸 결과들을 calibrateCameraSuccessCallback에 정의된 인자들을 포함시켜 해당 콜백을 호출하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
2. The method of claim 1, wherein step (b)
When the web engine performs the OpenCV function on the calibrate camera function (calibrateCamera)
When the calibrate camera function is called, it is checked whether the object point (objectPoint) is WebCVPoint3fList [] and the image point is WebCVPoint2fList. Then, the process proceeds to the next step according to the confirmation result to perform the corresponding task to the idle thread in the thread pool Or terminating the process; And
calling cv :: calibrateCamera to find the camera distortion parameters, and calling the callback by including the parameters of the calibrateCameraSuccessCallback in the obtained results.
제1항에 있어서, 상기 (b) 단계는
상기 웹 엔진에서 왜곡보정 함수(undistort)에 대한 상기 오픈 씨브이(OpenCV) 기능 수행 시
상기 왜곡보정 함수가 호출되면 distorted가 WebCVMatrix 인스턴스이고, cameraMatrix와 disCoeffs가 WebCVMatrix 인스턴스인지 확인하여 상기 확인 결과에 따라 다음 단계로 진행하여 쓰레드 풀(thread pool)에 있는 아이들 쓰레드에 해당 작업 수행을 할당하거나 종료 처리하는 단계; 및
OpenCV API인 cv::undistort를 호출하여 왜곡 보정된 이미지 데이터를 갖는 WebCVMatrix를 생성한 후 상기 WebCVMatrix 인스턴스를 UndistortSuccessCallback에 담아 해당 콜백을 호출하여 종료 처리하는 단계를 포함하는 것을 특징으로 하는 웹브라우저의 오픈씨브이 구현 방법.
2. The method of claim 1, wherein step (b)
When performing the OpenCV function on the distortion correction function undistort in the web engine
When the distortion correction function is called, distorted is a WebCVMatrix instance, cameraMatrix and disCoeffs are Confirming that the instance is a WebCVMatrix instance and proceeding to the next step according to a result of the check, allocating or terminating the task execution to the idle thread in the thread pool; And
Calling the OpenCV API cv :: undistort to create a WebCVMatrix having the image data with distortion correction and then placing the WebCVMatrix instance in the UndistortSuccessCallback and calling the corresponding callback to terminate the process. V implementation method.
KR1020140184483A 2014-12-19 2014-12-19 Method for embodying open source computer vision of web browser KR101649121B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020140184483A KR101649121B1 (en) 2014-12-19 2014-12-19 Method for embodying open source computer vision of web browser

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020140184483A KR101649121B1 (en) 2014-12-19 2014-12-19 Method for embodying open source computer vision of web browser

Publications (2)

Publication Number Publication Date
KR20160075040A KR20160075040A (en) 2016-06-29
KR101649121B1 true KR101649121B1 (en) 2016-08-18

Family

ID=56365601

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020140184483A KR101649121B1 (en) 2014-12-19 2014-12-19 Method for embodying open source computer vision of web browser

Country Status (1)

Country Link
KR (1) KR101649121B1 (en)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101814335B1 (en) 2017-05-16 2018-01-02 재단법인 구미전자정보기술원 Method and apparatus for calculating a safety grade
CN113283275B (en) * 2020-12-28 2022-04-12 电子科技大学 Opencv-based machine-readable card automatic scoring system and method and storage medium

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101313796B1 (en) * 2013-05-16 2013-10-01 (주) 와이즈스톤 Framework device for eye recognition and implementing method thereof

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101117165B1 (en) * 2010-05-28 2012-03-07 단국대학교 산학협력단 Web platform unit for mobile terminal connectioned web-application program in heterogeneous operating system

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101313796B1 (en) * 2013-05-16 2013-10-01 (주) 와이즈스톤 Framework device for eye recognition and implementing method thereof

Also Published As

Publication number Publication date
KR20160075040A (en) 2016-06-29

Similar Documents

Publication Publication Date Title
CN111083167A (en) Cross-browser H.265 video playing method
CN110969685B (en) Customizable rendering pipeline using rendering graphs
AU2003244041B2 (en) System architecture and related methods for dynamically adding software components to extend functionality of system processes
US8860752B2 (en) Multimedia scripting
US20100211865A1 (en) Cross-browser page visualization generation
CN105204853A (en) Canvas drawing method and device of web browser
NO328434B1 (en) Formatting language and object model for vector graphics
CN103713891A (en) Method and device for graphic rendering on mobile device
CN106095437A (en) The implementation method of the layout type of user interface RTL from right to left and device
CN103826168A (en) Method and system for adding watermark to video
CN109814865B (en) Mobile application page generation method based on json data format
CN109344619B (en) Hot repair method and device for application program
KR101649121B1 (en) Method for embodying open source computer vision of web browser
CN104778075A (en) Method and device for calling Java layer API (Application Program Interface) by native layer in Android system
CN105096364B (en) Animation data generation method and device and electronic equipment
JP2010039815A (en) Web page layout correction system
CN111414150A (en) Game engine rendering method and device, electronic equipment and computer storage medium
JP5374567B2 (en) Image processing apparatus, image processing system, and image processing method
US9436587B2 (en) Test context generation
CN110038301B (en) Data processing method and device, electronic equipment and storage medium
CN111708519B (en) Service component processing method, device, equipment and storage medium
KR20230124551A (en) Decoding the video stream within the browser
CN112367399A (en) Filter effect generation method and device, electronic device and storage medium
US7477264B2 (en) Compositing external images into a multimedia rendering pipeline
Lemme et al. The basic building blocks of declarative 3d on the web

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20190812

Year of fee payment: 4