b23042andClaude Fable 5
0a7044d79b
검색 재설계 (5단계 진화): - 전 구간(모든 세그먼트) 검색: 현재 세그먼트는 배지가 쓰는 데이터(viewedRef)에서 부호 교차 탐지 → 착지 배지값 == 검색값(오차 0). 타 세그먼트는 CSV 인덱스 (가상 fps·djmd dt 보정) → 세그먼트 자동 전환+시크 - 통과 = 값을 '가로지르는' 모든 순간(선형보간) — 종전 ±20m 창 방식은 호버 구간에서 통과 병합·착지 흔들림을 유발해 제거. 3s 채터 병합, 최근접 폴백(TOL 이내) - 같은 값 재Enter = 무조건 다음 통과(시크 정착 지연에도 순환), 랩어라운드 시점/종점 표기 체계: - 배지: 시점 이전 '시점-NNN'(전환점 0 연속 카운트다운), 종점 이후 '종점+NNN' (지나온 거리+주시거리 — 단조 증가, 통과 순간과 연속), 횡이탈 '노선밖 NNN' - 마크: '종점'(노선 끝 통과 위치), 종점 이후 시작/끝 마크 '종점+NNN' 표기(kmText), 종점 이후 1000m 단위 마크(종점+1000 …), fmtKm 단수 측점 보존(6+998 → 7+000 왜곡 제거) - ViewedPoint: viewOffM·offSide·beyondM 필드 추가 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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 세그먼트 길이 (초) |