Extending Rooms with Custom Code

If you are using video rooms with UI included, you don't need to write code: you get a basic video conference out-of-the-box. However, this doesn't stop you in case you need additional control via code. Let's see how.

Obtaining a reference to the RoomSession

The code snippet that you copy from your SignalWire Space looks like this:

<script>
  // ... code ...
  // ... code ...
  // ... code ...
  SignalWire.AppKit.VideoConference({
    token: "vpt_xxxxxxxxxxxxxxxxxxx",
    // userName: 'your-name',
  });
</script>

Notice how the final part of the snippet is a call which takes a set of parameters that you can use to initialize the room session. Find the full list of parameters in the documentation.

Here we are interested in the setupRoomSession parameter: this is a callback which will be invoked when a RoomSession object is ready. This normally happens right before the room is joined.

<script>
  // ... code ...
  // ... code ...
  // ... code ...
  SignalWire.AppKit.VideoConference({
    token: "vpt_xxxxxxxxxxxxxxxxxxx",
    setupRoomSession: (roomSession) => {
      console.log("A RoomSession object is now available.");
      console.log("The room is about to be joined.");
    },
  });
</script>

Using the RoomSession object

Once you obtained the reference to the RoomSession object, you can start subscribing to events and performing actions.

Say we want to mute the user as soon as they join the room. First, we would subscribe to the room.joined event, which will trigger right after the room has been joined. Then, we would invoke the videoMute method to mute the local user. For example:

<script>
  // ... code ...
  // ... code ...
  // ... code ...
  SignalWire.AppKit.VideoConference({
    token: "vpt_xxxxxxxxxxxxxxxxxxx",
    setupRoomSession: (roomSession) => {
      // Mute the video of the current user as soon as they join.
      roomSession.on("room.joined", () => roomSession.videoMute());
    },
  });
</script>

Wrap up

In video rooms with prebuilt UI, you can use the setupRoomSession parameter to access the underlying API which gives you full control on the room. Use it to subscribe to events or to perform actions in the room.

If, instead of a widget, you require a more advanced control on the room (such as a custom UI, or a custom authentication mechanism), take a look at First steps with Video. It will show you how to write a custom video application from scratch using our lower level APIs.