MB Profile Extend + MB WebRTC 플러그인 매뉴얼

DesignOneX · designonex.com DXCMS v8.8.0+

개요

두 플러그인은 함께 동작합니다.

필수 조건

설치

1. index.php 수정 (필수 — 안드로이드 크롬/삼성 브라우저 지원)

index.php 의 ob_start(); 바로 다음에 추가합니다.

ob_start();

// Permissions-Policy: 카메라/마이크 허용 (안드로이드 Chrome WebRTC 필수)
if (!headers_sent()) {
    header('Permissions-Policy: camera=*, microphone=*');
}

이 헤더가 없으면 아이폰 사파리는 동작하지만 안드로이드 크롬/삼성 브라우저에서 카메라/마이크가 차단됩니다.

2. 파일 업로드

압축 해제 후 루트에 그대로 덮어씁니다.

plugins/
├── dx-socket/
│   └── socket-core.js.php  ← 기존 파일 교체
├── mb-profile-extend/
│   ├── plugin.json
│   ├── plugin.php
│   └── README.md
└── mb-webrtc/
    ├── plugin.json
    ├── plugin.php
    └── README.md

3. 플러그인 활성화

관리자
→ 플러그인
→ MB Profile Extend → 활성화
→ MB WebRTC → 활성화

4. DX Socket API 키 확인

관리자
→ 실시간 소켓
→ API 키 관리
→ 현재 도메인에 dxk_ 로 시작하는 키가 있는지 확인
→ 없으면 키 발급

사용 방법

화상채팅 시작 (발신)

1. 게시판 글 목록 또는 댓글에서 다른 회원의 이름 클릭
2. 프로필 모달 → [더보기 ...] 버튼 클릭
3. [MB 화상채팅] 항목 클릭
4. 카메라/마이크 권한 팝업 → 허용
5. 상대방이 수락하면 화상통화 시작

화상채팅 수락 (수신)

1. 상단에 수신 모달 표시됨
2. [수락] 버튼 클릭 → 화상통화 시작
   [거절] 버튼 클릭 → 거절 처리

화면 구성

프로필 모달 (더보기 버튼 위치)

┌─────────────────────────────┐
│  [아바타]  회원이름  Lv.8   │
│  가입일 · 최근접속           │
│  게시글  댓글  친구  포인트   │
├─────────────────────────────┤
│  [1:1채팅] [메모] [더보기]  │  ← 더보기 버튼 추가됨
│  [친구추가]      [차단]      │
│  [회원글 검색]               │
└─────────────────────────────┘

더보기 모달

┌─────────────────────────┐
│  더보기 — 홍길동        │
│─────────────────────────│
│ 📹  MB 화상채팅         │  ← MB WebRTC 자동 등록
│ (추후 확장 항목들...)    │
└─────────────────────────┘

화상채팅 화면

┌──────────────────────────────────────┐
│ 📹 홍길동  [연결됨]         00:00 [종료] │
├──────────────────────────────────────┤
│                                      │
│         상대방 화면 (메인)            │
│                              ┌─────┐ │
│                              │내화면│ │  ← 탭하면 좌/우 이동
│                              └─────┘ │
├──────────────────────────────────────┤
│   [🎤]  [📷]  [🖥]      [📵종료]    │
│  마이크 카메라 화면공유              │
└──────────────────────────────────────┘

컨트롤 버튼

통화 흐름

발신자                    소켓 서버                   수신자
  │                          │                          │
  │── webrtc_invite ────────>│──────────────────────>  │
  │                          │           수신 모달 표시  │
  │  <── webrtc_invite_accept│<─────────────────────── │
  │                          │                          │
  │── webrtc_offer ─────────>│──────────────────────>  │
  │  <── webrtc_answer ──────│<─────────────────────── │
  │                          │                          │
  │<══════ P2P 직접 연결 (소켓 불필요) ══════════════════│
  │                          │                          │
  │── webrtc_end ───────────>│──────────────────────>  │

확장 개발

더보기 모달에 항목 추가

다른 플러그인에서 mb_profile_extend_items 훅으로 항목을 추가합니다.

// 다른 플러그인의 plugin.php 에 추가
dx_add_hook('mb_profile_extend_items', function($items, $memberId) {
    $items[] = array(
        'id'      => 'mb-remote',           // 고유 ID
        'icon'    => 'fa-solid fa-desktop', // Font Awesome 6 아이콘
        'label'   => 'MB 원격데스크톱',     // 표시 이름
        'color'   => '#3b82f6',             // 아이콘 색상
        'onclick' => 'mbRemoteOpen',        // JS 함수명
    );
    return $items;
});

// 해당 플러그인 JS 에 추가
window.mbRemoteOpen = function(memberId, label) {
    mbpCloseMore(); // 더보기 모달 닫기
    // 기능 실행
};

제공 전역 함수

브라우저 권한 안내

권한이 차단된 경우

화상채팅 버튼 클릭 시 권한 안내 모달이 표시됩니다.

안드로이드 시스템 설정

설정 → 개인 정보 보호
→ 카메라 액세스 → 켜기
→ 마이크 액세스 → 켜기

트러블슈팅

파일 구성

plugins/
├── dx-socket/
│   └── socket-core.js.php     ← 커스텀 이벤트 위임 코드 추가본
│
├── mb-profile-extend/
│   ├── plugin.json            ← 플러그인 메타정보
│   ├── plugin.php             ← 더보기 버튼 인터셉터 + 훅 시스템
│   └── README.md
│
└── mb-webrtc/
    ├── plugin.json            ← 플러그인 메타정보
    ├── plugin.php             ← WebRTC UI + 시그널링 JS
    └── README.md

라이선스 

 
🚫  plugin.php, core/, admin/ 디렉터리의 코드를 그대로 또는 일부 수정하여 재배포하거나 판매하는 행위는 엄격히 금지됩니다. 
🚫  DX CKEditor 4 Pro를 기반으로 제작한 에디터 서비스는 반드시 DesignOneX 라이선스 조건을 준수해야 합니다.
 
✅  상업적 프로젝트 제작 및 사용은 허용됩니다. (학습·개인 포트폴리오 포함)
✅  원천 소스를 90% 이상 수정한 경우 재배포·판매가 가능합니다.