MediaMTX를 위한 웹 UI.
브라우저에서 라이브 스트림을 보고, 녹화를 훑어보고, 모든 설정 키를 편집하세요.
🌍 30개 언어로 보기
🇺🇸 English • 🇪🇸 Español • 🇨🇳 中文 • 🇮🇹 Italiano • 🇩🇪 Deutsch • 🇷🇺 Русский • 🇫🇷 Français • 🇵🇹 Português • 🇯🇵 日本語 • 🇵🇱 Polski • 🇰🇷 한국어 • 🇹🇷 Türkçe • 🇳🇱 Nederlands • 🇨🇿 Čeština • 🇹🇼 繁體中文 • 🇧🇷 Português (BR) • 🇮🇩 Bahasa Indonesia • 🇷🇴 Română • 🇸🇪 Svenska • 🇩🇰 Dansk • 🇳🇴 Norsk • 🇫🇮 Suomi • 🇬🇷 Ελληνικά • 🇭🇺 Magyar • 🇺🇦 Українська • 🇻🇳 Tiếng Việt • 🇵🇭 Tagalog • 🇹🇭 ไทย • 🇮🇳 हिन्दी • 🇧🇩 বাংলা
MediaMTX는 훌륭한 스트리밍 서버지만 UI가 없습니다. Connect는 그 빠진 프런트엔드입니다. MediaMTX API와 대화하는 컨테이너 하나가 카메라 월, 녹화 보관소, 설정 편집기로 바꿔 줍니다.
대체재가 아니라 동반자입니다. 모든 화면은 MediaMTX가 이미 노출하는 것 위에 얹혀 있습니다. path, API 엔드포인트, runOn* 훅, 자체적으로 제공하는 프로토콜. 영상을 저장하지도, 미디어를 중계하지도, 데이터베이스를 쓰지도 않습니다.
멀티아크 이미지(linux/amd64, linux/arm64) — Docker가 알맞은 것을 받아 옵니다.
이미 MediaMTX가 돌고 있나요? 옆에 Connect를 붙이세요:
docker run -d \
-p 3000:3000 \
-e BACKEND_SERVER_MEDIAMTX_URL=http://<your-mediamtx-host> \
-v /path/to/recordings:/recordings \
-v mediamtx-connect-data:/data \
bcanfield/mediamtx-connect:latest아무것도 없이 시작하나요? 함께 들어 있는 compose가 둘 다 띄웁니다:
git clone https://github.com/bcanfield/mediamtx-connect.git
cd mediamtx-connect
docker compose up -d그다음 http://localhost:3000을 여세요.
Important
Connect는 mediamtx.yml에 api: yes가 있어야 합니다. 포함된 설정은 그대로 동작합니다.
MediaMTX가 알고 있는 모든 path를 2~4열 그리드로.
- 카드마다 WebRTC 또는 HLS.
AUTO는 조용히 HLS로 내려가고,LOW-LAT은 WebRTC를 고집하며,COMPAT은 HLS를 강제합니다 — 각 카드는 실제로 확보한 전송 방식을 표시합니다. - 멈춰 있어도 스냅샷. 백그라운드 작업이 모든 카드에 최근 프레임을 유지하고, 그 경과 시간을 배지에 표시합니다.
- 실시간 텔레메트리. 코덱, 시청자 수, 가동 시간을 path 목록에서 그대로.
- 정직한 녹화 상태. 카드는 스트림이 실제로 녹화 중인지 보여 줍니다. Connect가 읽지 못한 상태는 꺼짐이 아니라 알 수 없음입니다.
- 퍼블리시 URL을 클립보드로. RTSP·RTMP·SRT를 서버 자신의 리슨 주소로 만들어 냅니다.
- 스트림별 MP4를 날짜로 묶고, 썸네일은 자동 생성.
- 자리에서 펼쳐지는 인라인 플레이어. HTTP Range 요청으로 탐색됩니다.
- 진행률과 취소를 갖춘 스트리밍 다운로드.
/를 누르면 필터가 열립니다.
- 서버 설정 전부 — Logging, API, Hooks, RTSP, RTMP, HLS, WebRTC, SRT에 걸친 타입과 검증을 갖춘 65개 컨트롤.
- path 기본값과 path별 오버라이드를 MediaMTX가 제공하는 스코프에서. 와일드카드로 덮인 스트림을 저장하면 희소 항목이 기록되어, 건드리지 않은 키는 계속 상속됩니다.
- 15개
runOn*훅 전부. 저장 시 path가 재시작되는 곳에는 경고가 붙습니다. - 희소 쓰기 — 바꾼 키만.
API·SPA·미디어를 한 프로세스로 · 멀티아크 · GET /health · 구조화 로그 · PWA · 라이트와 다크 · 30개 언어 · 데이터베이스 없음.
첫 부팅의 초깃값만 정합니다. 이후로는 모두 Config에서 바꿀 수 있습니다.
| 변수 | 기본값 | 용도 |
|---|---|---|
BACKEND_SERVER_MEDIAMTX_URL |
http://mediamtx |
Connect가 컨테이너 내부에서 MediaMTX API에 닿는 주소 |
MEDIAMTX_API_PORT |
9997 |
MediaMTX API 포트 |
MEDIAMTX_RECORDINGS_DIR |
./recordings |
녹화를 위해 마운트하는 호스트 경로(compose 전용) |
MEDIAMTX_SCREENSHOTS_DIR |
/screenshots |
썸네일이 저장되는 위치 |
http://mediamtx는 함께 제공되는 compose 네트워크에서만 해석됩니다 — 단독 docker run이라면 본인의 호스트를 가리키세요.
Browser ──HLS / WebRTC (WHEP)──────────────────────────┐
│ │
│ oRPC (typed) ▼
▼ ┌──────────┐
┌─────────────────────┐ MediaMTX HTTP API │ MediaMTX │
│ mediamtx-connect │ ────────────────────────▶ │ server │
│ Hono API + React SPA│ └──────────┘
└─────────────────────┘ │
│ reads │ writes
▼ ▼
recordings/ + screenshots/ ◀──────────────────── MP4 segments
재생은 브라우저에서 MediaMTX로. Connect가 옮기는 것은 JSON, 그리고 디스크에서 읽는 녹화와 썸네일뿐입니다.
| 기능 목록 | 출시된 모든 기능, 라우트, 프로시저 |
| 아키텍처 | 구성 요소가 맞물리는 방식 |
| 기여하기 | 개발 환경, 스크립트, PR 절차 |
| 예제 | 라즈베리 파이 카메라, 테스트용 가짜 스트림 |
이슈와 PR을 환영합니다. pnpm install && pnpm dev로 시드 데이터가 들어간 전체 스택이 뜹니다 — 나머지는 CONTRIBUTING.md를 보세요. PR 제목은 conventional commits를 따릅니다. 행동 강령을 지킵니다.