Page 1
사용자가�업로드한�사진의�마커를�이용해�OpenCV�+�aruco로�일정한�형태로�만들고�
영상으로�만들어�보았다.
타이틀�정하기�어렵다…
정문철(flashscope)�[email protected]
Page 2
내용�요약
영상을�마커가�달린�이미지�프레임으로�만들고�
서버에�업로드된�사진을�정면에서�본�것처럼�보정하고
브라우저에서�업로드된�사진들을�모아�하나의�영상으로�만들어�주는�프로젝트
Page 3
몇�년�전�일본에서�진행된�Haruhi�Hunting�Project
Page 4
전국의�광고판이나�잡지,�전단,�인터넷�광고등에�의문의�사진이�배포�됨
Page 5
스마트폰으로�광고판을�찍어서�업로드를�하면
Page 6
마커를�인식,�사진을�보정하여�홈페이지에서�영상의�한�프레임으로�볼�수�있습니다.�https://youtu.be/5yT8pK2NMpE
Page 7
당시�이걸�보고�감명받았는데�이제�와서�직접�만들어�보기로?!
Page 8
개발환경�
OpenCV�3.0.0�Aruco�1.3.0�
Visual�Studio�2013
Page 9
개발환경�
OpenCV�3.0.0�Aruco�1.3.0�
Visual�Studio�2013
<-사실�최신�버젼이�있지만�사용법이�달라진�것�같아�간단해�보이는�구�버젼을�사용
Page 10
만들어야�될�내용
-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�
-�보정된�사진들을�웹에서�영상처럼�재생
Page 11
만들어야�될�내용
-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�
-�보정된�사진들을�웹에서�영상처럼�재생
Page 12
가장�쉽고�간단하게�만들기�위해�작업을�다�분리하고�외부에서�호출�하는�방식으로�구성
영상을�이미지로�변환하고�마커�달기
Page 13
영상을�이미지로�변환하고�마커�달기
완성�후에는�배포를�할�예정이므로�누구나�사용하기�쉽도록�제작�세팅은�GUI에서�
(C#�Winform)
Page 14
영상을�이미지로�변환하고�마커�달기
필요한�과정�
동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성
FFProbe를�사용해서�동영상의�정보�획득
Page 15
영상을�이미지로�변환하고�마커�달기
필요한�과정�
동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성
설정�내용을�xml�파일로�저장하여�다른�프로그램과�공유
Page 16
영상을�이미지로�변환하고�마커�달기
필요한�과정�
동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성
FFMpeg�<in>�-r�<fps>�-f�image2�<out>�으로�영상을�이미지�프레임으로�변환
Page 17
영상을�이미지로�변환하고�마커�달기
필요한�과정�
동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성
aruco를�사용해�1024종류의�마커를�위에서�설정한�크기대로�생성
Page 18
영상을�이미지로�변환하고�마커�달기
필요한�과정�
동영상의�사이즈,�재생�길이정보�획득�↓�C#�GUI에서�FPS나�마커�사이즈를�설정�↓�영상을�이미지�프레임으로�변환�↓�마커�이미지�생성�↓�영상�프레임과�마커를�합성
cv::Mat의�copyTo로�마커를�이미지의�구석에�합성
Page 19
영상을�이미지로�변환하고�마커�달기
발생한�문제점
Page 20
영상을�이미지로�변환하고�마커�달기
만들�수�있는�마커의�종류는�1024개…�만약�이미지의�개수가�1024개를�넘는�경우는?
Page 21
영상을�이미지로�변환하고�마커�달기
Haruhi�Hunting의�경우는�동일한�마커를�3군데에�설치하여�이�이미지가�몇�번째�프레임인지�구분하였지만�
(총�707장이므로�문제없음)�
다른�id를�가진�마커를�규칙적으로�조합해서�사용함으로�약�10억�개�이상�사용�가능하도록�개선
Page 22
만들어야�될�내용
-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�-�보정된�사진들을�웹에서�영상처럼�재생
Page 23
마커를�인식하여�사진을�보정하기
사실�가장�핵심
Page 24
마커를�인식하여�사진을�보정하기
사실�가장�핵심
잘�하려면�좀�복잡하지만�기본적으로는�엄청�간단
Page 25
마커를�인식하여�사진을�보정하기
마커를�찾아서…
Page 26
마커의�위치와�원하는�위치로�행렬을�구하고�적용시켜주면�끝
마커를�인식하여�사진을�보정하기
Page 27
마커의�위치와�원하는�위치로�행렬을�구하고�적용시켜주면�끝
마커를�인식하여�사진을�보정하기
Page 28
마커를�인식하여�사진을�보정하기
과정을�출력하면�이런�식…
Page 29
마커를�인식하여�사진을�보정하기
다만�번거로운�점은�마커를�4개를�사용할�경우�정확한�위치를�알�수�있지만�3개일�경우�좌표를�만들어야�함
?
Page 30
마커를�인식하여�사진을�보정하기
좌표를�얻기�위해�Top-Right,�Bottom-Left의�x,�y축을�잡아서…
Page 31
마커를�인식하여�사진을�보정하기
선이�만나는�지점을�4번째�마커의�위치로�잡고�이미지를�계산합니다.
Page 32
서버에서는(php)�사진이�업로드�되면�exec()로�사진을�전달해서�마커를�확인�
마커�인식에�성공하면�db에�저장하고�끝
Page 33
만들어야�될�내용
-�영상을�이미지로�변환하고�마커�달기�-�마커를�인식하여�사진을�보정하기�
-�보정된�사진들을�웹에서�영상처럼�재생
Page 34
기존에는�플래시를�사용해서�웹에서�플레이�한것으로�추정…
보정된�사진들을�웹에서�영상처럼�재생
Page 35
보정된�사진들을�웹에서�영상처럼�재생
요즘�플래시�하면�이런�반응이지만…ㅠㅠ
Page 36
보정된�사진들을�웹에서�영상처럼�재생
Flash는�Animate�CC로�다시�태어났습니다!�(는�사실�그냥�canvas�export�같은게�추가된…�느낌이…)
Page 37
Animate�CC를�써보려고�했지만…�canvas�프로젝트에서는�액션스크립트가�아니라�JS를�쓰고�
이미지�로딩을�위해서는�PreloadJS를�따로�불러와서�사용을?!
Page 38
보정된�사진들을�웹에서�영상처럼�재생
그래서�그냥�AnimateCC에서�사용하는�CreateJS를�직접�가지고�사용하기로…�ㅇㅈㅇ;
Page 39
PreloadJS로�업로드된�사진들을�불러와서…�(사진은�mysql�+�php로�경로를�가져�옴)
보정된�사진들을�웹에서�영상처럼�재생
Page 40
보정된�사진들을�웹에서�영상처럼�재생
원하는�속도를�맞추고�이미지를�한�장씩�그려주는�것으로�끝!
Page 41
보정된�사진들을�웹에서�영상처럼�재생
원하는�속도를�맞추고�이미지를�한�장씩�그려주는�것으로�끝!
(처음�써봐도�쉽게�이해할�수�있을�정도로�간단하였습니다….�(간단한�것만�사용하였지만…)�오히려�플레이�버튼�구현이�더�어려….)
Page 42
그리고�완성!https://youtu.be/RhYvYiUFsHU
업로드�노가다를�해주신�분들께�다시�한번�감사를…
Page 43
테스트�당시�디지털로만�배포를�하였는데�스크린샷을�사용한�업로드는�원본이랑�마찬가지이므로�너무�깔끔하고�
모니터�화면을�찍은�것은�너무�지저분하게�나오는�경우가�발생�
이미지�프레임은�인쇄물로�배포를�하는것이�가장�좋은것�같습니다.
Page 44
같은�프레임인�경우�업로드한�여러�사람들�중�한�장만�골라야�하는�사태가�발생…�
그리고�이미지를�마커로만�판단을�하므로�얼마든지�안의�내용물은�어뷰징이�가능…�
테스트�당시에는�최신�업로드가�영상에�바로�반영이�되도록�하였는데�추천�시스템을�넣거나�관리자의�수작업으로�입력을�하거나…�
혹은�서버에�원본도�같이�업로드하여�OpenCV로�유사도를�측정하여�너무�원본과�흡사하거나�흡사하지�않은…�중간�정도의�값을�가진�사진을�
반영하도록�해야�되지�않을까�고민을�하고�있습니다…