2020 API AWARDS WINNER - BEST IN MEDIA APIs LEARN MORE
developer
interactivity
Add Video Conferencing to Your Gatsby Web 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.

Side-by-side conferencing view with Gatsby Default Starter.

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 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.

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.

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:

gatsby default starter unchanged

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';

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.

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.

starting a call example

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.

Tags: javascript, uxkit
RELATED POSTS
DEVELOPER
MEDIA
Get Started with Media Processing APIs Using Postman

Get started with Media Processing APIs using the new Postman collections.

Katie Gray
|
enhance
DEVELOPER
MEDIA
Processing Collections of Archival Audio Recordings

This project looks at how to automate an analysis of a collection of audio in order to remove noise from archival footage.

Jayson DeLancey
|
analyze
enhance
python
INTERACTIVITY
PRODUCT
Dolby.io Supports InputHealth’s 600% Increase in Usage During Covid-19

Top quality audio visual solutions provide premium patient care in the ‘new normal’.

Stephane Giraudie
|
case-study
interactivity
We're happy to chat about our APIs, SDKs...or magic.