webrtc-house.ts icon


webrtc-house.ts demo

Clubhouse clone using WebRTC and TypeScript

This script is a simple Clubhouse clone made just for studying purposes.

It uses Websocket, WebRTC and JSX. Also works with React and Vanilla js while maintaning just one source of truth for the templates.

Live demo: https://on.ramon.codes/3uZMe3I

React sample: https://on.ramon.codes/2SdkbiD

How to use


const client = RTChouse();

Add events:

client.on('action', function (event) {
  // event.type could be: "mute" - could also be extended by something like "raise-hand"
  // this event is used to trigger room member actions

client.on('user', function (event) {
  // event.type could be: "update"
  // event.detail.stream is the video/audio stream 
  // this event is triggered when the user joined or disconnected from room

client.on('media', function (event) {
  // event.type could be "add" or "remove"
  // event.detail is the media stream
  // this event is used to add/remove the stream object from the page

client.on('disconnect', function () {
  // user is disconnected

client.on('room:member', function (event) {
  // event.type could be: "add", "remove" or "update"
  // event.detail is the member data
  // this event is used to add/remove/update a room member detail

You can check the types or the demo to get more details. There’s also some ready to use ui components which can be customized.


Peer to peer streams work well with a low number of connections, but the performance will decrease as more people join a room. To extend it to support a high number of participants a WebRTC media server is needed - which would require a new adapter on this library.

Useful links

  • Pion - A performant WebRTC media server
  • Dogehouse - A full featured Clubhouse open-source alternative


This package is licensed under the Creative Commons Attribution-NonCommercial 4.0 License.

Strokes guy