HTML/JS 클라이언트 소스 코드를 기반으로 MB GnuRTC 플러그인(이하 MB GnuRTC)의 동작 원리, 설치·설정, 메시지 규약, 운영/보안 권장사항 및 실무적 적용 포인트를 개발자 관점에서 정리한 공식 설명서입니다. 또한 Message Bridge(메시지 브릿지) 소켓 서버를 이용한 아키텍처 특징과 실시간 화상 채팅이 제공하는 장점들을 명확히 기술합니다

본 플러그인은 WebRTC 기반 실시간 통신 기능을 제공하는 기술적 도구이며,
불법 서비스(음란물, 불법 도박, 미성년자 유해 서비스 등) 개발에 사용될 수 없습니다.
해당 용도로의 사용 시 책임은 전적으로 사용자에게 있습니다.

개요

* 플러그인명: MB GnuRTC 
* 형태: 브라우저 기반 WebRTC 클라이언트 플러그인 (싱글 HTML/JS 파일 형태)
* 시그널링: Message Bridge 소켓서버(웹소켓)를 사용
* 네트워크: STUN/TURN 지원(서버로부터 `turn` 메시지로 자격 전달)
* 대상: 그누보드(GnuBoard) 등 PHP 기반 게시판 시스템에 플러그인으로 간단히 통합 가능

핵심 가정

* 시그널링은 Message Bridge(아래 MB) 소켓서버가 담당하며, 클라이언트는 MB에 JSON 메시지를 송수신합니다.
* MB는 방(group) 단위 라우팅을 지원하고, 메시지를 특정 타겟으로 전달하거나 브로드캐스트할 수 있어야 합니다.

아키텍처 (요약)

1. 클라이언트(브라우저)

   * 로컬 미디어(카메라/마이크) 캡처
   * RTCPeerConnection 생성/관리(참가자별로 Peer 생성)
   * WebSocket(MB)에 시그널링 메시지 송수신
   * UI 렌더링: 원격 비디오 썸네일, 로컬 PIP, 전체화면 토글 등

2. Message Bridge(시그널링 서버)

   * WebSocket 연결 관리
   * 그룹(room) 기반 메시지 라우팅
   * TURN 자격증명 발급/전달(또는 외부 TURN 자격을 브리지 통해 전달)
   * 유저 리스트, 입장/퇴장 알림 브로드캐스트

3. TURN/STUN

   * P2P 연결 실패 시 중계 역할
   * 권장: coturn 운영, 자격증명은 동적으로 발급

4. (선택) 백엔드(그누보드 연동)

   * 사용자 인증/권한 판단, 회의 로그 저장, 방정보 관리

동작 흐름(시퀀스 예시)

1. 사용자 A가 페이지 접속 → `myUserId` 생성/표시
2. 사용자 A가 ‘통화 시작’ → `getUserMedia()`로 로컬 스트림 확보 → `join` 메시지 전송
3. MB는 방의 기존 사용자(예: B, C)에게 `join` 메시지를 브로드캐스트
4. 기존 사용자들은 A에게 `createOffer`를 통해 Offer 전송(타겟이 A)
5. A는 Offer를 받고 Answer 생성 → 해당 사용자에게 전송
6. ICE 후보는 양쪽에서 교환되어 최종 P2P 연결 수립
7. 사용자가 나가면 `user_left`로 알림 → 피어 및 UI 정리

MB GnuRTC의 핵심 기능 목록

* 브라우저 기반의 다자간 WebRTC (각 참가자별 P2P 연결)
* Message Bridge(WebSocket) 기반의 시그널링
* STUN/TURN 지원을 통한 NAT/방화벽 돌파
* 자동 ICE 큐잉: remoteDescription 전 수신된 ICE 후보를 큐에 저장 후 재처리
* H.264 우선화 훅(`forceH264`) — 필요 시 SDP 재작성 가능
* UI: 로컬 PIP, 원격 그리드, 클릭시 전체화면(expanded) 토글
* 간단한 ID 관리(localStorage 기반)으로 빠른 데모 가능

MB GnuRTC의 장점 (실시간 화상 채팅 관점)

1. 낮은 지연 (Low Latency)

   * 브라우저의 P2P 연결로 미디어가 직접 교환되어 라운드트립 지연이 작음(중계 서버 없이).

2. 대역폭 효율성

   * 중앙 SFU가 없는 경우 각 참가자는 다른 참가자에게 직접 미디어를 전송하여 중복 트래픽이 발생하지만, 일대일에서는 서버 대역폭 부담이 매우 낮음. 

3. 확장성과 유연성(시그널링 분리)

   * 시그널링은 MB에 위임되어 있어 애플리케이션 서버와 미디어 경로를 분리할 수 있음. 이를 통해 기존 그누보드 시스템과 손쉽게 통합 가능.

4. 보안/프라이버시

   * 미디어가 직접 교환되므로(가능한 경우) 중앙 서버에 미디어가 저장되지 않아 프라이버시 측면에서 유리.

5. 브라우저 호환성

   * 표준 WebRTC API 사용 및 `playsinline`, `muted` 등 모바일 Safari 대응 설정 포함.

제약 및 고려사항

* 큰 규모 회의에는 부적합 : 모든 참가자가 각 참가자에게 미디어를 송신하는 Mesh 구조는 참가자 수가 늘면 업로드 대역폭과 CPU 부하가 기하급수적으로 증가합니다. 2명 이상에서는 SFU(예: mediasoup, Janus) 적용 고려.
* NAT/방화벽 : 공용 TURN 서버 미설정 시 P2P 실패 가능성 높음.
* 브라우저 정책 변화 : 자동 재생/권한 관련 정책은 브라우저별로 다름.

설치 및 배포 가이드 (요약)

1. 파일 배포 : 플러그인 HTML 파일을 웹 서버(호스팅)에 업로드(https 권장).

사용방법

모바일 두대건, PC 모바일이건 카메라있고, 마이크 되는 기기에서 2대로 테스트 가능. (지인과 통화할때도 OK) 

문제점

멀티 가능하지만, 두 대이상 접속시 멈추거나, 한 명은 안보입니다. 기술 나눔이 필요합니다.

결론

MB GnuRTC는 Message Bridge 기반으로 빠르게 연동 가능한 WebRTC 클라이언트 플러그인입니다. 소규모 그룹 화상 채팅에 적합하며, 그누보드 등 기존 웹 서비스에 손쉽게 결합할 수 있는 장점이 있습니다. 대규모 회의나 고가용성/녹화/통계가 중요한 환경에서는 SFU 또는 서버측 미디어 처리 아키텍처를 병행할 것을 권장합니다.

## 필독 공지 ##

지금부터는 JS 파일에서 절대 변경해서는 안 되는 핵심 설정에 대해 설명드리겠습니다.
이 부분은 메시지 브릿지 전체 기능의 기반이 되는 요소이므로, 반드시 끝까지 읽어주시길 바랍니다.

dx_plugin/core/head.sub.js.php 파일 안에는 메시지 브릿지 서버와 연결하기 위한 중요한 설정이 포함되어 있습니다.
특히 다음 소스에 포함된 빨간색 표시된것은 시스템이 올바르게 작동하기 위해 반드시 필요한 고정값이며, 단 한 글자라도 수정하면 안 됩니다.

이 값들은 메시지 브릿지를 이루는 중앙 WebSocket 서버 주소, 세션 그룹 고유 구분자, 실시간 인증 구조와 연결되어 있습니다,

ws = new WebSocket(`wss://designonex.com:14147/?group=이곳은어디`);

이 URL에서 group= 뒤의 값은 메시지 브릿지에서 공간을 구분하는 고유 식별자 역할을 합니다.
즉, 이 부분은 사용자가 속한 ‘방(room)’입니다.

예를 들어, group 값에 내가 a를 할당하면, 다른 사용자가 같은 a를 사용할 경우 동일한 공간을 공유하게 됩니다.
따라서 내 계정과 세션만을 위한 ‘개인 공간’을 만들고 싶다면 유일한 값을 지정해야 합니다.

클라이언트에서는 보안을 위해서 토큰을 만들어야 안전한 서비스를 사용할 수 있습니다.

개발, 확장, 보안은 각각 클라이언트의 몫입니다.

메시지 브릿지(Message Bridge) 설명 : https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=4
메시지 브릿지는 무료 서비스: https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=9
메시지 브릿지 이용약관 : https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=5
메시지 브릿지 무료 사용 약관 : https://designonex.com/bbs/board.php?bo_table=real_time_bridge&wr_id=10