플러스프로젝트 배경
1) 문제점
- 교육 현장에서 실물 자료를 효과적으로 제시할 도구 필요
- 기존 실물화상기는 고가의 전용 하드웨어가 필요하고 휴대성이 낮음
- USB 웹캠을 활용한 저렴한 솔루션 필요
- 웹캠 제조사의 순정 소프트웨어는 교육 현장에 최적화되어 있지 않음
- 실시간 영상처리 및 하드웨어 제어를 하나의 통합 솔루션으로 제공 필요
⠀
2) 프로젝트 목표
- **교수자용 실물화상기 앱 개발**: USB 웹캠을 활용한 Windows 데스크톱 애플리케이션 개발
- **실시간 영상처리**: 밝기, 대비, 화이트밸런스 등 실시간 이미지 보정 기능 구현
- **하드웨어 통합 제어**: 줌, 포커스, 노출, 조명 등 웹캠 하드웨어 기능 소프트웨어에서 제어
- **영상 캡쳐 및 녹화**: 정지 화상 캡쳐 및 동영상 녹화 기능
- **OCR 지원**: 문서 텍스트 자동 인식 및 편집
⠀
3) 주안점
- Electron과 C++ 네이티브 모듈의 안정적 통합
- 실시간 성능을 위한 GLSL GPU 가속 활용
- 교육 현장에서 직관적으로 사용 가능한 UI/UX
- USB 웹캠 하드웨어의 다양한 제어 기능 구현
- Windows 설치 및 자동 업데이트 시스템
- 교육 현장에서 실물 자료를 효과적으로 제시할 도구 필요
- 기존 실물화상기는 고가의 전용 하드웨어가 필요하고 휴대성이 낮음
- USB 웹캠을 활용한 저렴한 솔루션 필요
- 웹캠 제조사의 순정 소프트웨어는 교육 현장에 최적화되어 있지 않음
- 실시간 영상처리 및 하드웨어 제어를 하나의 통합 솔루션으로 제공 필요
⠀
2) 프로젝트 목표
- **교수자용 실물화상기 앱 개발**: USB 웹캠을 활용한 Windows 데스크톱 애플리케이션 개발
- **실시간 영상처리**: 밝기, 대비, 화이트밸런스 등 실시간 이미지 보정 기능 구현
- **하드웨어 통합 제어**: 줌, 포커스, 노출, 조명 등 웹캠 하드웨어 기능 소프트웨어에서 제어
- **영상 캡쳐 및 녹화**: 정지 화상 캡쳐 및 동영상 녹화 기능
- **OCR 지원**: 문서 텍스트 자동 인식 및 편집
⠀
3) 주안점
- Electron과 C++ 네이티브 모듈의 안정적 통합
- 실시간 성능을 위한 GLSL GPU 가속 활용
- 교육 현장에서 직관적으로 사용 가능한 UI/UX
- USB 웹캠 하드웨어의 다양한 제어 기능 구현
- Windows 설치 및 자동 업데이트 시스템
프로젝트 성과
Electron-네이티브 통합
DirectShow API 기반 C++ 네이티브 모듈을 Electron IPC 브릿지로 연결하여 웹 기술 기반 앱에서 USB 웹캠 영상 캡쳐 및 하드웨어 제어 성공
실시간 영상처리
GLSL 셰이더 파이프라인으로 실시간 이미지 보정 및 필터 적용
교육 현장 최적화
교수자가 강의 중 직관적으로 사용할 수 있는 UI/UX 구현
다양한 영상 처리 기능
동영상 녹화(FFmpeg), 정지 화상 캡쳐, 다양한 해상도/포맷 지원
OCR 통합
외부 OCR 솔루션 (iRIS OCR) 기반 문서 텍스트 인식 및 편집 기능 제공
핵심 기능
USB 웹캠 영상 캡쳐 시스템
C++ 네이티브 모듈에서 DirectShow로 프레임 획득 → node-addon-api로 JavaScript Buffer 전달 → HTML5 Canvas/WebGL 실시간 렌더링 파이프라인 구축.
실시간 이미지 보정 (GLSL 셰이더)
GLSL 셰이더 기반 GPU 가속 실시간 필터 파이프라인. 밝기/대비/채도 조절, 화이트밸런스 보정, OpenCV 이미지 향상
C++ 하드웨어 드라이버 연동 (Electron IPC)
DirectShow API의 IAMCameraControl, IAMVideoProcAmp 인터페이스를 활용하여 C++로 하드웨어 제어 모듈 개발. 줌, 포커스, 노출, 조명 등 하드웨어를 Vue.js UI에서 제어
OCR 문서 인식
문서 텍스트 자동 인식 및 편집. 인식 결과를 클립보드로 복사하여 강의 자료로 활용
Electron 데스크톱 앱 (Vue.js 3)
Vue.js 3 프론트엔드와 C++ 네이티브 모듈을 Electron으로 통합. Windows 설치 패키지 및 자동 업데이트 시스템 구현
프로젝트 상세
1) 포트폴리오 소개
⠀
교육 현장의 교수자를 위한 USB 웹캠 기반 실물화상기 Windows 데스크톱 애플리케이션. 실시간 영상처리와 하드웨어 제어 기능을 갖춘 강의 도구입니다.
⠀
2) 작업 범위
⠀
- Electron.js 데스크톱 앱 개발 (Vue.js 3 프론트엔드)
- C++ 네이티브 모듈 개발 (하드웨어 드라이버 연동)
- 실시간 영상처리 파이프라인 구축 (FFmpeg, OpenCV, GLSL)
- USB 웹캠 하드웨어 제어 시스템
- OCR 시스템 연동
- Windows 설치 패키지 및 자동 업데이트
- 지원 환경: Windows 10/11
⠀
3) 주요 업무
⠀
- **USB 웹캠 영상 캡쳐 시스템**: DirectShow API를 활용한 USB 웹캠 영상 스트림 캡쳐. C++ 네이티브 모듈에서 DirectShow로 프레임 획득 후 node-addon-api를 통해 JavaScript Buffer로 전달. HTML5 Canvas/WebGL에 실시간 렌더링. FFmpeg 연동 동영상 녹화, 정지 화상 캡쳐/저장, 다양한 해상도/포맷 지원
- **실시간 이미지 보정**: 밝기/대비/채도 실시간 조절, 화이트밸런스 보정, OpenCV 기반 실시간 이미지 향상, GLSL 셰이더 기반 실시간 필터 파이프라인
- **C++ 하드웨어 드라이버 연동**: DirectShow API (IAMCameraControl, IAMVideoProcAmp 인터페이스)를 활용하여 USB 웹캠 하드웨어 제어 모듈을 C++ (MSVC)로 개발. Electron IPC를 통한 네이티브 드라이버 브릿지 구현. 웹캠 하드웨어 제어 (줌, 포커스, 노출, 조명) 기능을 JavaScript에서 호출 가능하도록 node-addon-api로 패키징
- **GLSL 셰이더 파이프라인**: WebGL 기반 실시간 이미지 필터링. GPU 가속으로 밝기, 대비, 색보정, 샤프닝 등 실시간 적용
- **OCR 연동**: 문서 텍스트 인식 기능 통합. 인식 결과 편집 및 클립보드 복사
- **Electron 앱 패키징**: Vue.js 3 프론트엔드와 C++ 네이티브 모듈 통합. Windows 설치 패키지 빌드 및 자동 업데이트 시스템 구축
⠀
4) 주안점
⠀
- **Electron과 네이티브 드라이버 통합**: 웹 기술 기반 Electron 앱에서 DirectShow API 기반 C++ 네이티브 모듈을 IPC 브릿지로 연결. USB 웹캠 영상 스트림 캡쳐 및 하드웨어 제어 기능을 JavaScript/Vue.js에서 투명하게 사용 가능하도록 구현
- **실시간 영상처리 성능**: GLSL GPU 셰이더와 FFmpeg/OpenCV를 결합하여 실시간 이미지 보정 및 녹화 성능 최적화
- **교육 현장 최적화**: 교수자가 직관적으로 사용할 수 있는 UI/UX 설계. 실물 자료 확대, 회전, 밝기 조절 등 강의 중 빠른 조작 가능
- **안정적인 하드웨어 제어**: USB 웹캠의 줌, 포커스, 노출, 조명 등 하드웨어 기능을 안정적으로 제어
- **크로스 플랫폼 아키텍처**: Electron 기반으로 macOS 확장 지원
⠀
교육 현장의 교수자를 위한 USB 웹캠 기반 실물화상기 Windows 데스크톱 애플리케이션. 실시간 영상처리와 하드웨어 제어 기능을 갖춘 강의 도구입니다.
⠀
2) 작업 범위
⠀
- Electron.js 데스크톱 앱 개발 (Vue.js 3 프론트엔드)
- C++ 네이티브 모듈 개발 (하드웨어 드라이버 연동)
- 실시간 영상처리 파이프라인 구축 (FFmpeg, OpenCV, GLSL)
- USB 웹캠 하드웨어 제어 시스템
- OCR 시스템 연동
- Windows 설치 패키지 및 자동 업데이트
- 지원 환경: Windows 10/11
⠀
3) 주요 업무
⠀
- **USB 웹캠 영상 캡쳐 시스템**: DirectShow API를 활용한 USB 웹캠 영상 스트림 캡쳐. C++ 네이티브 모듈에서 DirectShow로 프레임 획득 후 node-addon-api를 통해 JavaScript Buffer로 전달. HTML5 Canvas/WebGL에 실시간 렌더링. FFmpeg 연동 동영상 녹화, 정지 화상 캡쳐/저장, 다양한 해상도/포맷 지원
- **실시간 이미지 보정**: 밝기/대비/채도 실시간 조절, 화이트밸런스 보정, OpenCV 기반 실시간 이미지 향상, GLSL 셰이더 기반 실시간 필터 파이프라인
- **C++ 하드웨어 드라이버 연동**: DirectShow API (IAMCameraControl, IAMVideoProcAmp 인터페이스)를 활용하여 USB 웹캠 하드웨어 제어 모듈을 C++ (MSVC)로 개발. Electron IPC를 통한 네이티브 드라이버 브릿지 구현. 웹캠 하드웨어 제어 (줌, 포커스, 노출, 조명) 기능을 JavaScript에서 호출 가능하도록 node-addon-api로 패키징
- **GLSL 셰이더 파이프라인**: WebGL 기반 실시간 이미지 필터링. GPU 가속으로 밝기, 대비, 색보정, 샤프닝 등 실시간 적용
- **OCR 연동**: 문서 텍스트 인식 기능 통합. 인식 결과 편집 및 클립보드 복사
- **Electron 앱 패키징**: Vue.js 3 프론트엔드와 C++ 네이티브 모듈 통합. Windows 설치 패키지 빌드 및 자동 업데이트 시스템 구축
⠀
4) 주안점
⠀
- **Electron과 네이티브 드라이버 통합**: 웹 기술 기반 Electron 앱에서 DirectShow API 기반 C++ 네이티브 모듈을 IPC 브릿지로 연결. USB 웹캠 영상 스트림 캡쳐 및 하드웨어 제어 기능을 JavaScript/Vue.js에서 투명하게 사용 가능하도록 구현
- **실시간 영상처리 성능**: GLSL GPU 셰이더와 FFmpeg/OpenCV를 결합하여 실시간 이미지 보정 및 녹화 성능 최적화
- **교육 현장 최적화**: 교수자가 직관적으로 사용할 수 있는 UI/UX 설계. 실물 자료 확대, 회전, 밝기 조절 등 강의 중 빠른 조작 가능
- **안정적인 하드웨어 제어**: USB 웹캠의 줌, 포커스, 노출, 조명 등 하드웨어 기능을 안정적으로 제어
- **크로스 플랫폼 아키텍처**: Electron 기반으로 macOS 확장 지원
