Technical Writer
Renae SowaldWelcome back to our blog series on integrating the Video Conference AppKit. In this final part of the series, we will look at how to incorporate AppKit with the Angular framework. AppKit is the Stencil component library behind SignalWire's Programmable Video Conferences. We developed this library to simplify using our prebuilt Video Rooms with front-end frameworks. Angular is the most robust framework in this series, but that does not have to make using AppKit more complicated. If you have an Angular project, it will not surprise you that there is simply more configuration to do than with other libraries and frameworks. Let's look at the essential changes we need for this integration.
The Development
We started a new Angular project with ng new using Angular's CLI version 14.1, though you can make these additions to an existing application's files as well. In this post, we will focus on additions to four essential files: tsconfig.json in the root folder as well as app.component.html, app.component.ts, and app.module.ts in the src/app folder.
As always, we will start by installing npm packages. The AppKit npm package is installed with npm install @signalwire/app-kit. To access the types required to use TypeScript in this project, we will also need to install some dependencies with the following command: npm install @stencil/store @types/jest. For development purposes, you may also want to use npm install @stencil/core --save-dev. After the packages are installed, you will import AppKit in app.component.ts.
Then we can add our <sw-video-conference> component to the HTML in app.component.html, making sure to include an access token. You can either copy this token value from the settings page of the Video Room you would like to use on your SignalWire dashboard or get it via a REST API call, as explained in our guide to Managing Video Rooms with APIs. There are two types of tokens for each Video Room, a moderator and a guest token. If you instantiate the Video Conference in your application with a moderator token, all participants will have moderator permissions to control the room and other participants. Prefer a guest token on a publicly accessible page to limit controls to a participant's own settings.
In addition to the required token, this example also includes all of the available attributes on <sw-video-conference> with their default values. For a detailed description of each attribute, see the AppKit technical reference.
Next, we will turn our attention to configuration issues. First, we need to update compiler options in tsconfig.json. We will set "strict": false, and add "allowSyntheticDefaultImports": true. This will allow us to import the necessary objects even if they are not set as default exports. To learn more about Angular's TypeScript configuration file, see Angular's documentation.
The final file we need to touch on is app.module.ts. In this file, we need to tell the application that we are using custom schemas because AppKit is a third-party library.
With that, you should have a Programmable Video Conference running in your Angular application. For the full file structure and additional configuration details for testing and environments, see our full demo on GitHub.
There is one more useful property of the <sw-video-conference> component to discuss: the setupRoomSession callback. This callback is included in AppKit to enable you to access the roomSession object to do things like subscribe to room session events or build a layout selector. To execute this callback at the appropriate time before the component is rendered, we introduce the Angular lifecycle hook ngOnInit() to app.component.ts.
In this example, we use the room session object we obtained to log the Video Room name and mute the video. See the Room Session technical documentation for more information on its available properties and events.
As you can see from the code above, we access the callback function by referencing videoComponent, so we must set that component name in the HTML. For brevity, we will not include all of the component attributes below.
Wrap Up
By following the steps above, you can incorporate a SignalWire Video Room into your Angular application. Our Programmable Video Conferences are developed to include all of the features and UI elements you need in a video conference. With the setupRoomSession callback, you can even programmatically access the Room Session object behind the component to extend your room with custom code. Our goal is to simplify using Video Rooms with front-end frameworks, so we hope this post and the whole series have helped you create powerful, dynamic applications with video conferencing.
