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