SignalWire's driving mission has always been to empower you to build whatever you can imagine utilizing software-defined telecom capabilities. We have built robust APIs and SDKs to help developers reach their goals. This year, we have been focusing on products that could be used out of the box even by customers with little or no development background. The first such product was Programmable Video Conference (PVC). There have been many publications about PVC, but they were all focused on integrating and using this fully built product. We did include the promise that you could customize the code behind it to suit your needs. To help you do that, we are introducing the Video Conference AppKit. AppKit is the Stencil component library behind PVC. Over the next several weeks, we will post a blog series demonstrating how to integrate AppKit with popular front-end frameworks. Today, we will start with React.
The Development
Start by installing the npm package with npm install @signalwire/app-kit.
Then, in your React application's App.js file, we import the npm package @signalwire/app-kit. The AppKit is comprised of many components, but the main component (and the one you will likely interact with the most) is <sw-video-conference>. You can use the attributes of this component to enable and disable child component features. Here is a basic example of an App.js file in a brand-new React application. All of the available attributes are documented in the AppKit technical reference, but we will quickly cover them here as well.
user-name:
A custom user name for the user joining the room. The default is undefined, so if this attribute is not included, the user will be prompted to enter a user name on the pre-join screen.
theme:
Set a specific color scheme. Allowed values are 'light' | 'dark' | 'auto'. The default value is auto, which will use the operating system's dark-mode setting.
audio:
Audio constraints to use for the devices. Set it to false if you don't want to use audio devices. The default is true.
video:
Video constraints to use for the devices. Set it to false if you don't want to use video devices. The default is true.
member-list:
Set this value to false if you do not want to display the participant list. The default is true.
chat:
Set this value to false if you do not want to display the chat. The default is true.
device-picker:
Set this value to false if you want to allow only default devices to be used (e.g. the user's default camera). If false, this will skip the pre-join steps for device selection and remove the ability for the user to change devices after joining the room. The default is true.
When accessing these attributes as properties, you should use camelCase. Let's see an example using the setupRoomSession callback. This callback is included in the AppKit to enable you to access the roomSession object to do things like subscribe to room session events or build a layout selector. For more information on properties and events available on the Room Session object, see the technical documentation. To execute this callback at the appropriate time before the component is rendered we will use the useLayoutEffect React hook.
If you want to enhance your React UI further with simple, useful hooks, visit the SignalWire Community React library. The components and hooks in this library are developed to leverage React's unique capabilities and simplify your development of advanced use cases. For example, if you want to track and change the current layout, you can utilize useLayouts as described in our guide to Using Video API with React. Or perhaps you want to enable room previews with the RoomPreview component or view local and remote streams with LocalStream and RemoteStream, respectively. This is a community-supported library so please add to it if you have contributions of your own.
The Conclusion
We hope AppKit will empower you to build your video conferencing applications with as much customization as you want and need. We are still actively developing this library, so keep an eye on it for even more building options. Over the next few weeks, also watch for posts demonstrating AppKit integrations with Vue, Angular, and Vite frameworks.