depth-openpose-extractor

KO | EN

gitlite — search

#devops #github #animation #php #cloud-native #agent #database #postgresql #electron #swift

depth-openpose-extractor

(★ 9)

Extract depth / OpenPose (body+hands+face) / person-mask videos from any video, entirely in the browser — plus a ComfyUI DWPose workflow

File Explorer

ZIP Download

- depth_openpose_mask_extractor.json
.gitignore
app.js
icon.ico
icon_preview.png
index.html
README.md
server.js
start.bat
style.css

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**영상 하나로 Depth · OpenPose(몸+손+얼굴) · 인물 마스크 영상을 한 번에 추출**
**Extract depth, OpenPose (body + hands + face) and person-mask videos from any video — entirely in your browser**

[한국어 가이드](#-한국어-가이드) · [English Guide](#-english-guide)

</div>

---

## 🇰🇷 한국어 가이드

ControlNet / Wan Animate 등 **모션 트랜스퍼 워크플로우의 입력 3종**을 만드는 도구입니다.
모든 처리가 브라우저 안에서 이루어지며 영상은 어디에도 업로드되지 않습니다.

### 준비물

| 필요한 것 | 설명 |
|---|---|
| [Node.js](https://nodejs.org/ko) | LTS 버전 설치 (설치 중 옵션은 전부 기본값 그대로 Next) |
| Chrome 또는 Edge | 최신 버전 (WebCodecs 필요) |

### 설치 (딱 2단계)

**1. 코드 받기** — 터미널(명령 프롬프트)을 열고:

```bash
git clone https://github.com/openerai/depth-openpose-extractor.git
cd depth-openpose-extractor
```

> git이 없다면: 이 페이지 상단의 초록색 **Code ▾ → Download ZIP**을 눌러 받은 뒤 압축을 풀어도 됩니다.

**2. 실행:**

```bash
node server.js
```

브라우저에서 **http://localhost:3456** 을 열면 끝입니다.

> 💡 **Windows 팁**: 폴더 안의 `start.bat`을 더블클릭하면 서버 실행 + 브라우저 열기가 한 번에 됩니다.
> 바탕화면에 바로가기를 만들어두면 앱처럼 쓸 수 있습니다.

### 사용법

1. 영상 파일을 드래그하거나 클릭해서 선택
2. 옵션 확인 (기본값 그대로도 충분합니다)
3. **추출 시작** 클릭
4. 완료되면 depth / openpose / mask 영상을 각각 다운로드

- 첫 실행에만 AI 모델(~60MB)을 자동 다운로드하며, 이후에는 캐시되어 빠릅니다
- 우측 상단에서 UI 언어 변경 가능 (한국어/English/日本語/中文/Deutsch)

### 자주 묻는 문제

| 증상 | 해결 |
|---|---|
| `node`를 찾을 수 없다고 나옴 | Node.js 설치 후 터미널을 **새로 열어서** 다시 실행 |
| WebCodecs 미지원 오류 | Chrome/Edge 최신 버전으로 접속 (Firefox/Safari 일부 미지원) |
| 처리 속도가 느림 | 해상도를 512px로, FPS를 8~12로 낮추기. WebGPU 지원 브라우저면 훨씬 빠름 |
| 사람이 여러 명인데 일부만 잡힘 | "최대 인원" 옵션을 인원수에 맞게 올리기 |

### ComfyUI 고품질 버전

같은 작업을 진짜 DWPose + Depth Anything V2 **Large**로 처리하는 ComfyUI 워크플로우가
[`comfyui/depth_openpose_mask_extractor.json`](comfyui/depth_openpose_mask_extractor.json)에 있습니다.
ComfyUI에 불러오면 캔버스 상단 노트 3개에 사용법·필요 커스텀 노드·모델 경로가 전부 정리되어 있습니다.

---

## 🇺🇸 English Guide

A tool that produces the **three standard inputs for motion-transfer workflows**
(ControlNet, Wan Animate, etc.). Everything runs locally in your browser — your video is never uploaded.

### Requirements

| You need | Notes |
|---|---|
| [Node.js](https://nodejs.org/en) | Install the LTS version (keep all installer defaults) |
| Chrome or Edge | A recent version (WebCodecs required) |

### Install (just 2 steps)

**1. Get the code** — open a terminal and run:

```bash
git clone https://github.com/openerai/depth-openpose-extractor.git
cd depth-openpose-extractor
```

> No git? Click the green **Code ▾ → Download ZIP** button at the top of this page and unzip it.

**2. Run:**

```bash
node server.js
```

Then open **http://localhost:3456** in your browser. That's it.

> 💡 **Windows tip**: double-click `start.bat` inside the folder — it starts the server and opens
> the browser in one go. Make a desktop shortcut to it and use it like an app.

### How to use

1. Drag & drop a video file (or click to browse)
2. Check the options (the defaults are fine)
3. Click **Start extraction**
4. When it finishes, download the depth / openpose / mask videos

- The first run downloads the AI models (~60MB) automatically; they're cached afterwards
- Switch the UI language in the top-right corner (한국어/English/日本語/中文/Deutsch)

### Troubleshooting

| Symptom | Fix |
|---|---|
| `node` is not recognized | Install Node.js, then **open a new terminal** and try again |
| WebCodecs not supported error | Use a recent Chrome/Edge (Firefox/Safari support is partial) |
| Processing is slow | Lower resolution to 512px and FPS to 8–12. A WebGPU-capable browser is much faster |
| Only some people are detected | Raise the "Max people" option to match your video |

### ComfyUI high-quality version

A ComfyUI workflow that does the same job with real DWPose + Depth Anything V2 **Large** is included at
[`comfyui/depth_openpose_mask_extractor.json`](comfyui/depth_openpose_mask_extractor.json).
Load it in ComfyUI — three notes at the top of the canvas explain usage, required custom nodes
(with install instructions) and exact model file paths.

---

## Tech notes / 기술 메모

| Output | Model | Details |
|---|---|---|
| Depth | Depth Anything V2 Small (transformers.js) | WebGPU first, WASM fallback; per-frame normalization |
| OpenPose | MediaPipe PoseLandmarker | 33 landmarks → OpenPose-18 (COCO) with standard colors |
| Hands | MediaPipe HandLandmarker | OpenPose-style 21 keypoints × both hands |
| Face | MediaPipe FaceLandmarker | DWPose-style 68 white dots; pose-guided head crop so small faces in full-body footage still get detected (top-down) |
| Mask | PoseLandmarker segmentation | Union of all detected people, grayscale |

- **Export**: MP4 (H.264 + mp4-muxer, default) or WebM (VP8 + webm-muxer) via WebCodecs —
  frame timestamps are exact regardless of processing speed; auto-fallback to WebM if H.264 is unavailable
- **Smoothing**: One-Euro filter (off/light/strong) with centroid-based track matching per body/hand/face
- **Options**: FPS 8–30 · max resolution 512/768/1024 · up to 6 people · 5 UI languages
- MediaPipe runs in IMAGE mode (VIDEO mode's norm_rect loopback can crash the graph)
- Infinity-duration webm files (from MediaRecorder) are handled automatically

depth-openpose-extractor

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README