Video Conference AppKit

AppKit allows you to include Video Conferences with prebuilt UI into your applications, in the form of Web Components.

Installation

npm

npm install @signalwire/app-kit

Yarn

yarn add @signalwire/app-kit

pnpm

pnpm add @signalwire/app-kit

<sw-video-conference>

This component represents a Video Conference.

Properties

Property	Attribute	Type	Description
audio	audio	MediaTrackConstraints | boolean	Audio constraints to use for the devices. Set to false if you do not want to use audio devices. Default: true
chat	chat	boolean	Set to false to disable the chat. Default: true
devicePicker	device-picker	boolean	Set to false to allow only default devices to be used. If false, this will disable pre-join steps for device selection and remove the ability for the user to change devices after joining the room. Default: true
memberList	member-list	boolean	Set to false to disable the member list. Default: true
setupRoomSession	--	(roomSession: RoomSession) => void	A callback which will be invoked as soon as a RoomSession object is ready. The RoomSession.join method will be called automatically after executing this callback. Default: undefined
theme	theme	"auto" | "dark" | "light"	Set a specific color scheme. Auto will use the operating system's dark-mode setting. Default: "auto"
token	token	string	The Video Conference token to access the room. Starts with vpt_. Default: undefined
userName	user-name	string	A custom user name for the user joining the room. Default: ""
video	video	MediaTrackConstraints | boolean	Video constraints to use for the devices. Set to false if you do not want to use video devices. Default: true
layouts	layouts	boolean	Set to false to disable the layout selection. Default: true

Using setupRoomSession

Please note that the setupRoomSession callback function must be initialized before the component is rendered to the DOM. For an example, see it implemented below or with React in the blog AppKit Integration with React.

Examples

Basic Instantiation

<sw-video-conference
  token="vpt_ef2d...e1c"
  user-name="guest"
  chat
  member-list
  device-picker="false"
/>

Extending with Custom Code

You must initialize setupRoomSession before it is rendered to the DOM. In plain JavaScript, you can do this by using createElement on the sw-video-conference component before appending it to the document body.

import "@signalwire/app-kit";

function addElement() {
  const roomSession = document.createElement("sw-video-conference");

  roomSession.setAttribute("token", "vpt_25e67aace53a906f8387f2f499e9d8dd");
  roomSession.setAttribute("user-name", "Joe");
  roomSession.setAttribute("device-picker", "false");
  roomSession.setupRoomSession = (rs) => {
    console.log("Setting up Room Session", rs);
    rs.on("room.joined", (e) => {
      console.log("Joined room:", e.room.display_name);
      rs.videoMute();
    });
  };

  document.getElementById("app").append(roomSession);
}

if (document.getElementById("app")) {
  addElement();
} else {
  document.addEventListener("DOMContentLoaded", addElement);
}