Add Video Conferencing to Your Gatsby Site

Jayson DeLancey

There are several really good video conferencing apps available that many folks know and use every day. In addition to any business costs associated with adopting one of those tools, you help market their app whenever you want to meet with your customers. If you have a website built using Gatsby, you can drop in the Voxeet UXKit to add conferencing or webinar capabilities directly into your own app and not rely on these third-party tools to host meetings.

In this article we’ll look at the changes you’d make to the Gatsby Default Starter project to use the Voxeet UXKit. This gives you a React component that provides a collapsible side-bar with all the features you’d typically want including audio, video, recordings, and chat.

You can use the underlying Voxeet Web SDK or React Components to add your own customizations, but even the default layout can get you up and running quickly.

Initializing a Gatsby Project

If you are already familiar with Gatsby, this section should be nothing new.  We’re going to start with the 

The first thing to do is start a new project. You can install and use the `gatsby` CLI or since this is a quick one-off command you can use `npx`.

gatsby-starter-default project to keep things simple. If this is your first time encountering Gatsby, it is a free and open-source framework based on React to build a website. It helps structure your project with best practices for progressive web apps, SEO, and tooling. You’ll need a few dependencies available in your development environment to use it including node, npm, npx, and yarn.

npx gatsby new gatsby-voxeet

When you run this command, you’ll have a basic project ready to go. You can test this by running `npx gatsby develop`.

npx gatsby develop
 
...
 
You can now view Gatsby-starter-default in the browser.
 
  http://localhost:8000/

Fire up your browser to view http://localhost:8000/ and you should see something like this:

Adding Dependencies

There are three dependencies you will need to enable the Voxeet UXKit. You should install these dependencies by running `yarn`.

yarn add @voxeet/voxeet-web-sdk@1.9.6 @voxeet/react-components @voxeet/react-redux-5.1.1@5.1.1 –save
  • The voxeet-web-sdk is a JavaScript client library that provides you functions for controlling the control flow and behavior available in a conferencing session. You can find more details in the Client SDK reference documentation.
  • The react-components dependency provides re-usable user-interface widgets that are combined to construct the Voxeet UXKit.
  • The react-redux package has the state-management behavior associated with user interactions and conferencing application behaviors.

Initializing the Voxeet UXKit

The gatsby-default-starter project has a src folder with the following structure:

.
├── components
│   ├── header.js
│   ├── image.js
│   ├── layout.css
│   ├── layout.js
│   └── seo.js
├── images
│   ├── gatsby-astronaut.png
│   └── gatsby-icon.png
└── pages
├── 404.js
├── index.js
├── index.worked.js
└── page-2.js

The src/pages/index.js is where we’ll integrate the video conferencing capabilities for this demo. You might want to make a stand-alone support page, put it behind a webinar paywall, or include it in a global layout for conferencing throughout your site.

Redux

In order to match user behavior with the desired experience, the Voxeet UXKit uses Redux to store state and dispatch actions. Let’s review a few of the key concepts as we provide the scaffolding to the index.js page. You’ll be adding imports from the redux and redux-thunk libraries.

import React from "react"
import { Link } from "gatsby"
 
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
 
// Add redux and redux-thunk dependencies and import the Voxeet reducer
import {createStore, combineReducers, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'
import { reducer as voxeetReducer } from '@voxeet/react-components';

A *store* is a data structure for managing the state tree of an application.  Every UI element that can be toggled like muting the microphone, activated such as turning on the camera, or edited like changing the name of a participant requires maintaining this state in reaction to a user *action*. There may be some metadata associated with an action such as a Boolean of on/off or a text string. We’ll use the createStore method to create the object representing the complete state of all elements.

A *reducer* is a function that takes the current state with a user action in order to change the state in the store. We want to use the combineReducers method because the Voxeet UXKit will want to maintain a slice of the state in the *voxeet* namespace. You may also want to use other reducers for the rest of your application.

In redux, *middleware* is a composable chain of functions that can respond to requests and provide a response. It is a convenient way to maintain consistency and predictability when actions are dispatched. This is where a *thunk* or wrapper around a function is used to look at every action and asynchronously dispatch to an appropriate function that adds behavior to the action.

With concepts out of the way, we’ll add the Voxeet reducer and create a store for the application which will be used by the underlying UXKit.

// Use the Voxeet reducer in the voxeet namespace
const reducers = combineReducers({
voxeet: voxeetReducer
});
 
// Create a store that includes all the reducers and middleware
const configureStore = () => createStore(
reducers,
applyMiddleware(thunkMidleware)
)

React

There are two components from the Voxeet UXKit library that you’ll include in your application. It is also important to import the styling in order to lay things out properly.

// Import the components we’ll need and styling
import { ConferenceRoom, VoxeetProvider } from '@voxeet/react-components'
import '@voxeet/react-components/dist/voxeet-react-components.css';

If you haven’t created one already, you need a Voxeet Developer Account. It is *free* to sign-up and get 3000 minutes so that you evaluate the functionality to make sure it meets your needs. From the Dashboard you’ll need to retrieve your **consumerKey** and **consumerSecret** which will need to be included in you app.

// Paste your key and secret here.  Each conference also gets a name.
const settings = {
consumerKey: 'YOUR_CONSUMER_KEY',
consumerSecret: 'YOUR_CONSUMER_SECRET',
conferenceAlias: ‘Gatsby’
}

Finally, you can add the new components to the JSX for the Voxeet UXKit.

// The IndexPage now includes a ConferenceRoom
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Voxeet UXKit</h1>
<p>Welcome to your new Gatsby site with the Voxeet Web SDK.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<VoxeetProvider store={configureStore()}>
<ConferenceRoom
autoJoin
consumerKey={settings.consumerKey}
consumerSecret={settings.consumerSecret}
conferenceAlias={settings.conferenceAlias}
/>
</VoxeetProvider>
</Layout>
)

If you still have `gatsby develop` running you should be able to load the app running on localhost and see the conference window popup. You’ll need to allow media access to the microphone and video camera to see the full result.

Customization

That’s it. With just the few changes mentioned in this article you can add a video conferencing widget to your Gatsby site. This is just the beginning of course and you’ll likely want to add some additional customizations. Review the Voxeet UXKit properties for more examples of what you can do with these components.

Power your app with Voxeet

The best API for live voice and video calling. Period.