사이드바의 룸을 클릭하여 참여하고, 다시 클릭하면 나옵니다. 기본적으로 모든 미디어는 WebRTC를 통해 피어투피어로 전송되며, Discourse 서버는 시그널링만 처리하고 미디어는 절대 처리하지 않습니다. 더 큰 규모의 통화가 필요한 사이트는 옵션으로 LiveKit 미디어 서버(라이브킷 클라우드 또는 셀프호스팅)를 통해 룸을 라우팅할 수 있습니다. 설치 시 기본 “Watercooler” 룸이 생성되어 커뮤니티가 즉시 대화를 시작할 수 있습니다.
기능
사이드바 우선 UX — Discord 스타일로 룸과 실시간 참가자 아바타를 사이드바에 표시하며, 애니메이션 기반 발화 표시기가 포함됩니다
비디오 및 화면 공유 — 전체 룸 페이지, 타일/프레젠테이션 레이아웃, 전체 화면 지원을 갖춘 선택적 카메라 비디오 및 화면/탭 공유
영속적 통화 위젯 — 포럼을 둘러보는 동안 따라다니며 비디오를 포함한 고정형 리사이즈 가능한 미니 통화를 제공합니다
음성 및 비디오 설정 — 장치 선택기, 실시간 마이크 테스트, 입력 감도 게이트, WebAssembly 노이즈 서프레션(DTLN), MediaPipe 배경 흐림 효과 등 모두 브라우저에서 로컬로 처리됩니다
룸 채팅 — 각 룸은 실제 Discourse 채팅 채널과 스레드를 기반으로 한 텍스트 채팅을 갖습니다
스테이지 룸 — AMAs와 커뮤니티 콜을 위해 발언 요청 큐를 갖춘 발표자/청중 룸
룸 권한 — 공개, 그룹 제한, 비공개 룸을 지원하며, 사이드바에 잠금 배지 및 게시물에서 룸을 링크할 수 있는 룸 해시태그를 제공합니다
참가자 제어 — 사용자별 볼륨, 음소거, 디afen, 추방 기능을 가진 컨텍스트 메뉴; 또한 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;
}