abcvideo

2GB 이상 대용량 동영상을 웹 브라우저에서 안정적으로 재생하는 특화 기능 탑재 플레이어.

기능

• 2GB+ 동영상 안정 재생 (로컬 파일 직접 재생 + 서버 Range Request/HLS)
• 프레임 단위 추출 (Canvas 즉시 미리보기)
• 키보드 단축키로 프레임/초/장면 단위 이동
• 자막형 / 메모형 텍스트 오버레이 + VTT/SRT/JSON/CSV 내보내기
• HLS 자동 변환 (FFmpeg 설치 시)

사전 요구사항

• Node.js 20+ LTS
• FFmpeg (HLS 변환 및 프레임 정확 추출 시 필요)
  • Windows: https://ffmpeg.org/download.html 에서 다운로드 후 PATH 등록
  • macOS: brew install ffmpeg
  • Ubuntu: sudo apt install ffmpeg

설치 및 실행

# 1. 의존성 설치
npm install

# 2. 환경변수 설정
cp server/.env.example server/.env

# 3. 개발 서버 실행 (클라이언트 + 서버 동시)
npm run dev

브라우저에서 http://localhost:5173 접속

개발 서버 포트

서비스	포트
클라이언트 (Vite)	5173
백엔드 API	3001

키보드 단축키

키	동작
Space	재생 / 일시정지
← / →	5초 뒤로 / 앞으로
J / L	10초 뒤로 / 앞으로
, / .	이전 / 다음 프레임 (일시정지 시)
[ / ]	±30초 이동
0 ~ 9	10% 단위 탐색
F	전체화면
M	음소거
+ / -	재생속도 조절
Shift+S	프레임 캡처
Shift+M	메모 추가
?	단축키 도움말

프로젝트 구조

abcvideo/
├── client/          # React 18 + Video.js 8 프론트엔드
├── server/          # Node.js + Express 백엔드
├── shared/          # 공유 TypeScript 타입
└── storage/         # 런타임 생성 (영상, HLS, 프레임)

환경변수 (server/.env)

변수	기본값	설명
PORT	3001	서버 포트
FFMPEG_PATH	ffmpeg	FFmpeg 실행 경로
MAX_UPLOAD_SIZE	21474836480	최대 업로드 크기 (20GB)
HLS_SEGMENT_TIME	6	HLS 세그먼트 길이 (초)