b23042andClaude Fable 5 7d51ba9945 표고 체계 정비·설정 파일 단순화·선형 클리핑·시연 준비
- 타원체고 기준 자동 변환: route.json ellipsoidal_height 선언 시 드론 고도(CSV 정표고)를
  영상 메타(djmd 6.6 타원체고)와의 차(지오이드고 자동 산출)만큼 보정, 세그먼트 전환에도 유지
- KML 표고 파이프라인: 좌표 고도(z) 사용(POI/측점), *_byDem.kml 자동 생성(DEM 조회·높이 속성 포함)
  + 로더의 _byDem 우선 규칙, 선형중심선(LineString) 로딩·경로표고 앵커
- 설정 파일: camera.json/display.json/route.json 단순 이름 인식, 화면표시 옵션 PC 저장/자동 적용,
  초기화 버튼을 환경설정 파일 기준 복원으로 변경, 저장 파일명 단순화
- 선형 표시: 표출된 마지막 측점까지 클립(경계 세그먼트 절단 + 관통 현 처리 — 구간 실종 수정)
- 스테이션바: 시점(0k000) 마크(실통과 위치), 노선밖 프레임 통과 오인 방지, 커서 배지 1m 단위,
  배너 연장/소요 실측값(측점 체이니지·영상 길이 합) 우선
- 세그먼트 전환 라벨 깜빡임 구조 수정(캐시 초기화·최근접 키 조회·이중 재계산 제거) +
  사전계산 프레임 불변값 호이스팅(재생 지연 해소)
- UI: 슬라이더/값 입력칸 휠 조절, 패널 버튼 위치 정렬, 저장 버튼 중복 제거, dev_mode(route.json)로
  영상제어 UI 표시 제어, 지오이드 최대 200, 이격거리 측점 동반 적용
- 시연: start-demo.bat + docs/DEMO.md
- docs/history: 작업 이력 30건

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-13 20:37:46 +09:00

abcvideo

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

기능

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

사전 요구사항

  • Node.js 20+ LTS
  • FFmpeg (HLS 변환 및 프레임 정확 추출 시 필요)

설치 및 실행

# 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 세그먼트 길이 (초)
S
Description
No description provided
Readme
20 MiB
Languages
TypeScript 88%
Python 7.3%
SCSS 3.1%
Shell 0.5%
CSS 0.5%
Other 0.5%