MB Phone — 1:1 음성통화 플러그인 매뉴얼
DesignOneX · designonex.com DXCMS v8.8.3+
개요
MB Phone 은 DXCMS 회원 간 1:1 음성통화 플러그인입니다. DX Socket 을 시그널링 서버로 활용하며, WebRTC P2P 방식으로 직접 연결되어 서버 부하가 없습니다. MB Profile Extend 의 더보기 버튼에 자동 등록됩니다.
필수 조건
| 조건 | 설명 |
|---|---|
| DXCMS | v8.8.3 이상 |
| dx-socket | 활성화 + API 키 발급 필수 |
| mb-profile-extend | 더보기 버튼 연동 |
| HTTPS | WebRTC 는 HTTPS 환경 필수 |
| index.php 수정 | Permissions-Policy 헤더 추가 필수 |
설치
1. index.php 수정
ob_start(); 바로 다음에 추가합니다.
ob_start();
// Permissions-Policy: 마이크 허용 (안드로이드 Chrome 필수)
if (!headers_sent()) {
header('Permissions-Policy: camera=*, microphone=*');
}
2. 파일 업로드
압축 해제 후 루트에 그대로 덮어씁니다.
plugins/
└── mb-phone/
├── plugin.json
└── plugin.php
3. 플러그인 활성화
관리자 → 플러그인 → MB Phone → 활성화
4. DX Socket API 키 확인
관리자 → 실시간 소켓 → API 키 관리
→ 현재 도메인에 dxk_ 로 시작하는 키가 있는지 확인
→ 없으면 키 발급
더보기 모달 위치
프로필 모달 → [더보기 ...] 클릭
┌─────────────────────────┐
│ 더보기 — 홍길동 │
│─────────────────────────│
│ 📹 MB 화상채팅 │
│ 📞 MB 전화통화 │ ← MB Phone
│ 🖥 MB 화면공유 │
└─────────────────────────┘
사용 방법
전화 걸기
1. 게시판 또는 댓글에서 상대방 이름 클릭
2. 프로필 모달 → [더보기 ...] 클릭
3. [📞 MB 전화통화] 클릭
4. 마이크 권한 팝업 → 허용
5. 발신 대기 화면 → 상대방 수락 대기 (30초 타임아웃)
전화 받기
1. 수신 모달 자동 표시
2. [📞 수락] 또는 [거절] 선택
3. 수락 시 → 통화 시작
화면 구성
발신 대기 모달
┌──────────────────┐
│ [아바타] │
│ 홍길동 │
│ 전화 연결 중... │
│ • • • │
│ [✕ 취소] │
└──────────────────┘
수신 모달
┌──────────────────┐
│ [아바타] │
│ 홍길동 님 │
│ 전화가 왔습니다 │
│ [✕ 거절] [📞 수락] │
└──────────────────┘
통화 중 화면
┌─────────────────────────────────┐
│ [통화 중] │
│ [아바타] │
│ 홍길동 │
│ 00:00 │
│ ▁▂▃▄▅ 이퀄라이저 ▅▄▃▂▁ │
│ │
│ [🎤] [🔊] [📵] [⌨️] [➖] │
│ 마이크 스피커 종료 키패드 최소화 │
│ [🔴녹음]│
└─────────────────────────────────┘
컨트롤 버튼
| 버튼 | 기능 |
|---|---|
| 🎤 마이크 | 음소거 / 해제 토글 |
| 🔊 스피커 | 상대방 음소거 / 해제 |
| 📵 종료 | 통화 종료 |
| ⌨️ 키패드 | DTMF 키패드 표시/숨김 |
| ➖ 최소화 | 플로팅 버튼으로 최소화 |
| 🔴 녹음 | 녹음 시작/중지 |
이퀄라이저
통화 중 상대방 음성을 실시간 주파수 분석하여 시각화합니다.
연결 전: 파란색 물결 애니메이션 (대기 상태)
통화 중: 실시간 주파수 바 표시
조용할 때 → 파란색
보통 목소리 → 노란색
큰 목소리 → 빨간색
- WebAudio API
AnalyserNode+ Canvas 2D 렌더링 - 60fps 실시간 업데이트
녹음 기능
특징
- 서버 전송 없이 브라우저 로컬 저장
- 각 사용자가 자신의 브라우저에서 독립적으로 녹음
- 내 마이크 + 상대방 음성 동시 녹음 (믹싱)
- 저장 형식: WAV (무압축, 모든 기기 재생 가능)
파일명 형식
MB_Phone_홍길동_2026-08-20_00-00-00.wav
녹음 시작
[🔴 녹음] 버튼 클릭 → 헤더에 REC 표시 깜빡임 → 녹음 시작
녹음 중지 (통화 유지)
[🔴 녹음 중] 버튼 다시 클릭 → WAV 파일 자동 다운로드 → 통화 계속
녹음 중 통화 종료
[📵 종료] 클릭
→ 확인 모달:
"통화를 종료하면 녹음이 자동 저장됩니다."
[계속 통화] [저장 후 종료]
→ [저장 후 종료] 클릭 → WAV 저장 → 통화 종료
상대방이 먼저 끊는 경우
녹음 중 상대방 종료 → 자동으로 WAV 저장 후 통화 종료
최소화 기능
통화 중 다른 화면을 사용해야 할 때 사용합니다.
[➖ 최소화] 클릭 → 우측 하단 플로팅 버튼으로 전환
플로팅 버튼 클릭 → 통화 화면 복원
통화 흐름
발신자 소켓 서버 수신자
│ │ │
│── phone_invite ─────────>│──────────────────────> │
│ │ 수신 모달 │
│ <── phone_invite_accept │<─────────────────────── │
│ │ │
│── phone_offer ──────────>│──────────────────────> │
│ <── phone_answer ───────│<─────────────────────── │
│ <──── phone_ice ────────│<──> (양방향) │
│ │ │
│═══════════ P2P 직접 연결 (소켓 불필요) ══════════════│
│ │ │
│── phone_end ────────────>│──────────────────────> │
소켓 이벤트
| 이벤트 | 방향 | 설명 |
|---|---|---|
phone_invite |
발신 → 수신 | 통화 요청 |
phone_invite_accept |
수신 → 발신 | 수락 |
phone_invite_reject |
수신 → 발신 | 거절 |
phone_offer |
발신 → 수신 | WebRTC offer SDP |
phone_answer |
수신 → 발신 | WebRTC answer SDP |
phone_ice |
양방향 | ICE candidate |
phone_end |
양방향 | 통화 종료 |
트러블슈팅
| 증상 | 원인 | 해결 |
|---|---|---|
| 더보기에 전화통화 안 보임 | MB Phone 미활성화 | 플러그인 활성화 확인 |
| 소켓 미연결 | DX Socket 키 없음 | API 키 발급 |
| 마이크 권한 차단 | Permissions-Policy 헤더 없음 | index.php 수정 |
| 안드로이드에서 마이크 안 됨 | 시스템 권한 차단 | 설정 → 앱 → 브라우저 → 마이크 허용 |
| 30초 후 자동 취소 | 상대방 미응답 | 상대방 접속 확인 |
| 녹음 파일 없음 | 다운로드 차단 | 브라우저 다운로드 허용 확인 |
| 이퀄라이저 미동작 | WebAudio 미지원 | Chrome/Firefox 최신 버전 사용 |
브라우저 지원
| 브라우저 | 지원 |
|---|---|
| Chrome (PC/Android) | ✅ |
| Firefox | ✅ |
| Safari (iOS/Mac) | ✅ |
| Samsung Internet | ✅ |
| Edge | ✅ |
| IE | ❌ |
파일 구성
plugins/mb-phone/
├── plugin.json ← 플러그인 메타정보
└── plugin.php ← 메인 (UI + WebRTC + 녹음 + 이퀄라이저)
예정 기능
| 기능 | 설명 |
|---|---|
| 링톤 | MP3 파일 기반 수신 벨소리 |
| 통화 이력 | 발신/수신/부재중 목록 |
| 그룹 통화 | 다자간 음성통화 |
라이선스
| 항목 | 내용 |
|---|---|
| 라이선스명 | DesignOneX License (디자인원엑스 라이선스) |
| 원천 소유 | DesignOneX — designonex.com |
| 재배포·판매 | ❌ 금지 (원천 소스 90% 이상 수정 시 재배포·판매 가능) |
| 상업적 사용 | ✅ 상업적 프로젝트 제작에만 허용 (학습·개인 포트폴리오 포함) |
| 플러그인 원천 | plugin.php, core/, admin/ 자체의 재배포 및 판매 금지 |
| 보증 | 본 플러그인은 현재 상태 그대로 제공되며 어떠한 명시적·묵시적 보증도 없습니다. |
🚫 plugin.php, core/, admin/ 디렉터리의 코드를 그대로 또는 일부 수정하여 재배포하거나 판매하는 행위는 엄격히 금지됩니다.
🚫 MB Phone 을 기반으로 제작한 서비스는 반드시 DesignOneX 라이선스 조건을 준수해야 합니다.
✅ 상업적 프로젝트 제작 및 사용은 허용됩니다. (학습·개인 포트폴리오 포함)
✅ 원천 소스를 90% 이상 수정한 경우 재배포·판매가 가능합니다.
