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 Dolby Communications 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 Dolby Communications 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 Dolby Communications 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-voxeetWhen 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.
https://localhost:8000/Fire up your browser to view https://localhost:8000/ and you should see something like this:
Adding Dependencies
There are three dependencies you will need to enable the Dolby Communications UXKit. You should install these dependencies by running yarn.
$ yarn add @voxeet/[email protected] @voxeet/react-components @voxeet/[email protected] –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 Dolby Communications UXKit.
- The react-redux package has the state-management behavior associated with user interactions and conferencing application behaviors.
Initializing the Dolby Communications 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.jsThe 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 Dolby Communications 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 Dolby Communications 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 Dolby Communications 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 Dolby Communications reducer and create a store for the application which will be used by the underlying UXKit.
// Use the Dolby Communications 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 Dolby Communications 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 Dolby Communications 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 Dolby Communications 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 Dolby Communications UXKit properties for more examples of what you can do with these components.
