사이드바에서 룸을 클릭하여 참가하고, 다시 클릭하여 나갑니다. 기본적으로 모든 미디어는 WebRTC를 통해 P2P로 전송되며, Discourse 서버는 시그널링만 처리하고 미디어는 처리하지 않습니다. 더 큰 규모의 통화가 필요한 사이트는 LiveKit 미디어 서버(라이브킷 클라우드 또는 셀프호스팅)를 통해 룸을 라우팅할 수 있습니다. 설치 시 커뮤니티가 즉시 대화를 시작할 수 있도록 기본 “Watercooler” 룸이 생성됩니다.
주요 기능
사이드바 중심 UX — Discord 스타일처럼 사이드바에 룸과 실시간 참가자 아바타를 표시하며, 말하고 있는 사용자를 나타내는 애니메이션 인디케이터를 제공합니다
비디오 및 화면 공유 — 전체 룸 페이지, 타일/프레젠테이션 레이아웃, 전체 화면 지원을 갖춘 선택적 카메라 비디오 및 화면/탭 공유
영속적 통화 위젯 — 포럼을 둘러보는 동안 따라다니는 도킹형, 크기 조절 가능한 미니 통화 위젯(비디오 포함)
음성 및 비디오 설정 — 기기 선택기, 실시간 마이크 테스트, 입력 감도 게이트, WebAssembly 노이즈 서프레션(DTLN), MediaPipe 배경 흐림 — 모두 브라우저에서 로컬로 처리됩니다
룸 채팅 — 각 룸은 실제 Discourse 채팅 채널과 스레드를 기반으로 한 텍스트 채팅을 제공합니다
스테이지 룸 — AMA 및 커뮤니티 콜을 위해 발언 요청 대기열이 있는 발표자/청중용 룸
룸 권한 — 공개, 그룹 제한, 비공개 룸을 지원하며, 사이드바에 잠금 배지와 룸 해시태그를 제공하여 게시물에서 룸을 링크할 수 있습니다
참가자 제어 — 사용자별 볼륨, 음소거, 귀 막기, 추방 기능을 가진 컨텍스트 메뉴; AFK 자동 음소거/연결 해제 및 자동 사용자 상태 제공
룸 관리 — 그룹 기반 사용자 룸 생성 제한, 스태프 CRUD UI, 프로그래매틱 제어를 위한 완전한 REST API
기본 인프라 제로 — SFU/MCU 없이 DTLS-SRTP 암호화를 사용하는 순수 브라우저 WebRTC
선택적 LiveKit 통합 — 개별 룸을 옵트인하거나 대규모 통화를 위해 모든 것을 LiveKit Cloud 또는 자체 LiveKit 서버를 통해 라우팅할 수 있으며, 관리자 헬스 패널과 웹훅 기반 조정 기능을 제공합니다
상태
수 주 동안 내부 회의용으로 사용해 왔으며, 소규모 그룹에서는 매우 잘 작동합니다. 더 큰 그룹은 LiveKit와 함께 배포하는 것이 좋지만, 최대 10명까지의 일반적인 크기는 기본 메시 구성에서 매우 잘 작동합니다.
포럼이나 채팅 토론을 음성 대화로 손쉽게 전환해야 하는 문제를 아름답게 해결해 줍니다. 그동안 다른 플랫폼으로 전환해야 하는 불편함이나, 리소스를 많이 사용하는 통합 영상 회의(시도) 사이에서 고생해 왔거든요.
더 발전시켜 나가실 계획이라면, 채팅과 통합되도록 설계해 주셨으면 좋겠습니다. 채팅 멤버들을 위해 채팅에서 바로 개인 음성 방을 열 수 있다면 정말 완벽할 것 같습니다. (사용 후 깔끔하게 정리되는 기능도 포함된다면 더욱 좋습니다.) 그리고 채팅은 여전히 추가적인 댓글, 파일, 링크 등을 공유하는 최적의 장소로 남아 있을 것입니다.
물론, 그 위에 더 걸작이 될 수 있는 기능은 다음과 같습니다:
영상 옵션 (이렇게 가벼운 기술로는 기술적으로 가능하지 않을 가능성이 높습니다)
관련 주제와 채팅을 지능적으로 통합할 수 있는 AI 전사 기능. 이는 회의 기록원으로서 정말 놀라운 기능이 될 것입니다.
// 이 코드를 JS 탭 또는 /javascripts/discourse/api-initializers/... 에 넣으세요
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer(api => {
api.replaceIcon("microphone-lines", "bottle-water");
});
/* Resenha 사이드바에서 bottle-water 아이콘을 upside down으로 뒤집기 - Common에 넣으세요 */
.sidebar-section.sidebar-section-wrapper [class*="d-icon-microphone-lines"] {
transform: rotate(180deg);
/* 필요 시 세로 정렬을 조정하세요 */
display: inline-block;
}