사용자가�업로드한�사진의�마커를�이용해�OpenCV�+�aruco로�일정한�형태로�만들고�

영상으로�만들어�보았다.

타이틀�정하기�어렵다…

정문철(flashscope)�mail@limecolor.com

내용�요약

영상을�마커가�달린�이미지�프레임으로�만들고�

서버에�업로드된�사진을�정면에서�본�것처럼�보정하고

브라우저에서�업로드된�사진들을�모아�하나의�영상으로�만들어�주는�프로젝트

몇�년�전�일본에서�진행된�Haruhi�Hunting�Project

전국의�광고판이나�잡지,�전단,�인터넷�광고등에�의문의�사진이�배포�됨

스마트폰으로�광고판을�찍어서�업로드를�하면

마커를�인식,�사진을�보정하여�홈페이지에서�영상의�한�프레임으로�볼�수�있습니다.�https://youtu.be/5yT8pK2NMpE

당시�이걸�보고�감명받았는데�이제�와서�직접�만들어�보기로?!

개발환경�

OpenCV�3.0.0�Aruco�1.3.0�

Visual�Studio�2013

개발환경�

OpenCV�3.0.0�Aruco�1.3.0�

Visual�Studio�2013

<-사실�최신�버젼이�있지만�사용법이�달라진�것�같아�간단해�보이는�구�버젼을�사용

만들어야�될�내용

-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�

-�보정된�사진들을�웹에서�영상처럼�재생

만들어야�될�내용

-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�

-�보정된�사진들을�웹에서�영상처럼�재생

가장�쉽고�간단하게�만들기�위해�작업을�다�분리하고�외부에서�호출�하는�방식으로�구성

영상을�이미지로�변환하고�마커�달기

영상을�이미지로�변환하고�마커�달기

완성�후에는�배포를�할�예정이므로�누구나�사용하기�쉽도록�제작�세팅은�GUI에서�

(C#�Winform)

영상을�이미지로�변환하고�마커�달기

필요한�과정�

동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성

FFProbe를�사용해서�동영상의�정보�획득

영상을�이미지로�변환하고�마커�달기

필요한�과정�

동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성

설정�내용을�xml�파일로�저장하여�다른�프로그램과�공유

영상을�이미지로�변환하고�마커�달기

필요한�과정�

동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성

FFMpeg�<in>�-r�<fps>�-f�image2�<out>�으로�영상을�이미지�프레임으로�변환

영상을�이미지로�변환하고�마커�달기

필요한�과정�

동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성

aruco를�사용해�1024종류의�마커를�위에서�설정한�크기대로�생성

영상을�이미지로�변환하고�마커�달기

필요한�과정�

동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성

cv::Mat의�copyTo로�마커를�이미지의�구석에�합성

영상을�이미지로�변환하고�마커�달기

발생한�문제점

영상을�이미지로�변환하고�마커�달기

만들�수�있는�마커의�종류는�1024개…�만약�이미지의�개수가�1024개를�넘는�경우는?

영상을�이미지로�변환하고�마커�달기

Haruhi�Hunting의�경우는�동일한�마커를�3군데에�설치하여�이�이미지가�몇�번째�프레임인지�구분하였지만�

(총�707장이므로�문제없음)�

다른�id를�가진�마커를�규칙적으로�조합해서�사용함으로�약�10억�개�이상�사용�가능하도록�개선

만들어야�될�내용

-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�-�보정된�사진들을�웹에서�영상처럼�재생

마커를�인식하여�사진을�보정하기

사실�가장�핵심

마커를�인식하여�사진을�보정하기

사실�가장�핵심

잘�하려면�좀�복잡하지만�기본적으로는�엄청�간단

마커를�인식하여�사진을�보정하기

마커를�찾아서…

마커의�위치와�원하는�위치로�행렬을�구하고�적용시켜주면�끝

마커를�인식하여�사진을�보정하기

마커의�위치와�원하는�위치로�행렬을�구하고�적용시켜주면�끝

마커를�인식하여�사진을�보정하기

마커를�인식하여�사진을�보정하기

과정을�출력하면�이런�식…

마커를�인식하여�사진을�보정하기

다만�번거로운�점은�마커를�4개를�사용할�경우�정확한�위치를�알�수�있지만�3개일�경우�좌표를�만들어야�함

?

마커를�인식하여�사진을�보정하기

좌표를�얻기�위해�Top-Right,�Bottom-Left의�x,�y축을�잡아서…

마커를�인식하여�사진을�보정하기

선이�만나는�지점을�4번째�마커의�위치로�잡고�이미지를�계산합니다.

서버에서는(php)�사진이�업로드�되면�exec()로�사진을�전달해서�마커를�확인�

마커�인식에�성공하면�db에�저장하고�끝

만들어야�될�내용

-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�

-�보정된�사진들을�웹에서�영상처럼�재생

기존에는�플래시를�사용해서�웹에서�플레이�한것으로�추정…

보정된�사진들을�웹에서�영상처럼�재생

보정된�사진들을�웹에서�영상처럼�재생

요즘�플래시�하면�이런�반응이지만…ㅠㅠ

보정된�사진들을�웹에서�영상처럼�재생

Flash는�Animate�CC로�다시�태어났습니다!�(는�사실�그냥�canvas�export�같은게�추가된…�느낌이…)

Animate�CC를�써보려고�했지만…�canvas�프로젝트에서는�액션스크립트가�아니라�JS를�쓰고�

이미지�로딩을�위해서는�PreloadJS를�따로�불러와서�사용을?!

보정된�사진들을�웹에서�영상처럼�재생

그래서�그냥�AnimateCC에서�사용하는�CreateJS를�직접�가지고�사용하기로…�ㅇㅈㅇ;

PreloadJS로�업로드된�사진들을�불러와서…�(사진은�mysql�+�php로�경로를�가져�옴)

보정된�사진들을�웹에서�영상처럼�재생

보정된�사진들을�웹에서�영상처럼�재생

원하는�속도를�맞추고�이미지를�한�장씩�그려주는�것으로�끝!

보정된�사진들을�웹에서�영상처럼�재생

원하는�속도를�맞추고�이미지를�한�장씩�그려주는�것으로�끝!

(처음�써봐도�쉽게�이해할�수�있을�정도로�간단하였습니다….�(간단한�것만�사용하였지만…)�오히려�플레이�버튼�구현이�더�어려….)

그리고�완성!https://youtu.be/RhYvYiUFsHU

업로드�노가다를�해주신�분들께�다시�한번�감사를…

테스트�당시�디지털로만�배포를�하였는데�스크린샷을�사용한�업로드는�원본이랑�마찬가지이므로�너무�깔끔하고�

모니터�화면을�찍은�것은�너무�지저분하게�나오는�경우가�발생�

이미지�프레임은�인쇄물로�배포를�하는것이�가장�좋은것�같습니다.

같은�프레임인�경우�업로드한�여러�사람들�중�한�장만�골라야�하는�사태가�발생…�

그리고�이미지를�마커로만�판단을�하므로�얼마든지�안의�내용물은�어뷰징이�가능…�

테스트�당시에는�최신�업로드가�영상에�바로�반영이�되도록�하였는데�추천�시스템을�넣거나�관리자의�수작업으로�입력을�하거나…�

혹은�서버에�원본도�같이�업로드하여�OpenCV로�유사도를�측정하여�너무�원본과�흡사하거나�흡사하지�않은…�중간�정도의�값을�가진�사진을�

반영하도록�해야�되지�않을까�고민을�하고�있습니다…