First Steps for Voice and Video Interactivity in Your Web App

Having a video conference is not as novel as it was a decade ago. As a staple in the operations of most businesses, you’ve likely experienced communications with colleagues day-to-day separated by a camera and microphone. What makes Dolby.io’s Interactivity APIs different?

We’ll answer that question and look at the steps involved in building your own video conferencing web application.

Why Use Dolby.io Interactivity APIs

Audio Quality
Audio quality is kind of a big deal for us. It’s not something easy to achieve without control over the physical equipment and environment, but it is in our corporate DNA. With the power of Dolby Voice, we can deliver spectacular communications experiences with solutions for noise suppression, audio correction, and spatial capabilities that are a significant improvement over what can be found in other real-time communications platforms.

In-Flow Integration
While stand-alone apps can be good for internal business conversations, it doesn’t make a great experience when you need to speak with customers and partners. Instead of requiring users to download software, we want to enable you to integrate our APIs directly into your own app. Instead of using a third-party cloud services product, you can connect others while still using your own brand, preferred layout, and overall experience. We call this in-flow because your end-users can communicate while in the flow of using your website or application. This creates a richer and continuous experience

For Developers
The SDKs are built for developers to create their own web and native mobile applications. You can use these SDKs to have near-complete control over the look-and-feel, the connection flow, and in-call functionality without worrying about the underlying voice and video components. We have provided a User Experience Toolkit (UXKit) that allows you to get a complete experience out of the box more quickly. With UXKit the audio / video connections, icons, and user interactivity has been implemented already to help you go from idea to done more quickly.

Getting Started with UXKit for React

In the documentation you can find tutorials for JavaScript (Web), Swift (iOS), and Java (Android). We’ve also provided guidance for cross-platform solutions like Cordova and React-Native. If you don’t use React, you may want to start with the Create a Basic Audio Conference Application instead.

For this project, we’ll build a basic React web application and add a side-bar conferencing component. Here’s a mockup of what this might look like:

Create React App

We have a client UX Kit built to work with the popular React JavaScript library. As long as you have node installed you can call:

npx create-react-app my-dolbyio-app

Once complete you should be able to change into that directory and run yarn start. Your app will load in a browser running on your localhost and should look something like this:

Add Voxeet Project Dependencies

The Dolby.io Interactivity SDKs can be found under the @voxeet namespace. You’ll need to add these to your application.

If you do not have yarn installed you can find installation instructions on yarnpkg.com.

yarn add @voxeet/voxeet-web-sdk --save
yarn add @voxeet/react-components --save
yarn add @voxeet/react-redux-5.1.1@5.1.1 --save

The voxeet-web-sdk is the underlying web sdk that is used to initialize the connection and control flow for maintaining a conferencing session. See the Client SDK docs more more details.

The react-components provides the reusable user-interface components that can be combined to construct a UI. The react-redux package handles state-management associated with the user interactions.

Create a Dolby.io Developer Account

If you haven’t created one yet, you’ll need a Dolby.io developer account. From the dashboard you will be able to create apps that are assigned a unique consumerKey and consumerSecret. NOTE: For purposes of this demo we’ll define these settings in the client code, but you’ll want to review our tokenized access methods described in the documentation.

In src/App.js you can define these credentials before the App() function:

const settings = {
    consumerKey: 'your-dolbyio-consumerkey',
    consumerSecret: 'your-dolbyio-consumerSecret',
    conferenceAlias: 'Welcome-to-Dolby-Interactivity'
}

function App() {
    ...
}

Add a Conferencing Shelf

The shelf by default will appear to the right of the screen once we make a few changes to our React application. You need to add a few dependencies as listed below after the react import block.

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { reducer as voxeetReducer } from "@voxeet/react-components"
import thunkMidleware from "redux-thunk"
import { combineReducers, createStore, applyMiddleware } from "redux"
import { ConferenceRoom, VoxeetProvider } from "@voxeet/react-components"
import "@voxeet/react-components/dist/voxeet-react-components.css"

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 Interactivity 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 those dependencies accounted for we can initialize them which you can do right after all of the imports and before the App() function definition:

const reducers = combineReducers({
  voxeet: voxeetReducer,
})

const configureStore = () =>
  createStore(reducers, applyMiddleware(thunkMidleware))

Add UXKit Component

Finally we can add our component to the app. In this example we’ve included the autoJoin feature to start the conference right away and pass in the credentials.

    <div className="App">
      <VoxeetProvider store={configureStore()}>
        <ConferenceRoom
          autoJoin
          consumerKey={settings.consumerKey}
          consumerSecret={settings.consumerSecret}
          conferenceAlias={settings.conferenceAlias}
        />
      </VoxeetProvider>

If all goes well you should see a shelf that expands and closes to have a video conversation.

What's Next

If you are looking to build a prototype or proof-of-concept we hope you found this guide helpful. With your developer account on Dolby.io you have access to a range of APIs and SDKs to help you with your audio and video projects. You may find the rest of the Client SDK documentation useful as it covers in more detail the steps of authentication, initializing, conferencing, presenting, and working with recordings.