Welcome back to our blog series on integrating the Video Conference AppKit. In part two, we explored an integration with Vue 3 built with Vite. In this third part of the series, we will strip away the Vue 3 framework and look at how AppKit can be used even without any front-end framework at all, i.e., with vanilla JavaScript only. Vite is a modern rapid development tool for scaffolding and bundling projects. It is most often used to create lightning-fast development environments. It can also be used as a handy tool to build applications written in different frameworks, as we saw in our Vue 3 example. However, you may also leverage Vite in a vanilla JavaScript or TypeScript application. Let's see how you can create a SignalWire Video Conference in less than 20 lines of code.
The Development
We begin by running npm create vite@latest which starts a series of prompts to name the project, choose between 5 frameworks or vanilla, and a TypeScript or JavaScript variant. For this demo, we began with vanilla JavaScript. If you want more information on the options, see Vite's Getting Started guides. This scaffolding option starts us with a blank HTML page with some links, a simple click counter, and a link to a script module called main.js. In this file, we can simply import AppKit with import "@signalwire/app-kit" and drop our component in the existing setup as follows:
As in our previous demos, this example 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. As you can see from the code above, the component is inserted into the HTML file with the Element property innerHTML and could have just as easily been put directly into the index.html file and linked to a CDN to access the AppKit library. That is all you need to start developing with a video conference room in a hot reloading development environment. Or, if you do not want to add additional functionality, you can even build and run this fully functional video conference room with Vite in production. However, if you have been following our series so far, you know we want to take one more step to access the Room Session object with the setupRoomSession callback available in AppKit.
From previous posts in this series, you are probably familiar with the setupRoomSession callback. As explained in the React integration post, this callback is included in AppKit to enable you to access the roomSession object to do things like subscribing to room session events. However, we need to execute this callback before the component is rendered. This is even more straightforward with Vite and vanilla JavaScript than it was in the React integration or Vue 3 integration. We can change the main.js code that we used above to use the document.createElement method to create the component element and access its callback before appending it to the HTML.
For this demo, we are just using the room session to log the room name, but you can find all of the properties and events available on the Room Session object in the technical documentation.
Wrap Up
Vite is most often used as a development environment to support other frameworks, but we demonstrated in this blog how to use AppKit with Vite-powered vanilla JavaScript. This library makes it a simple process to stand up a fully functional video conference room in any environment. How much or little you choose to customize it is up to you, and we will continue to develop more tools to help you do that.
