UXKit Voxeet React

The Voxeet UXKit is a quick way of adding premium audio, video chats, and other supported options.

Specifications

  • Supported browsers: Safari 12, Chrome (latest version), Firefox (latest version)
  • Frameworks: React, Redux, JavaScript

Create a React project

To use the Voxeet UXKit for React, you will need to first create a React application.

Open a terminal and write the following commands :

npx create-react-app my-app
cd my-app

Add redux and redux-thunk in order to initialize the redux store.

npm i redux redux-thunk --save
OR
yarn add redux redux-thunk --save

You can now start your project with :

npm start
OR
yarn start

At this point you have a React application up and running.

Initialize the Voxeet UXKit

Add the Voxeet UXKit to your project. To do it, stop your application (CTRL+C) and use the following command. 

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

Use the Voxeet UXKit

Before you start, find your Consumer Key and Consumer Secret by following these steps:

1. Select the SIGN IN link located in the upper right corner of the Dolby.io page. Log in using your email and password.
2. Click the DASHBOARD link visible in the upper right corner of the website.
3. Select your application from the APPLICATIONS category located on the left side menu.
4. Select the API Keys category from the drop-down menu visible under your application.
5. In the Interactivity APIs section, you can access your Consumer Key and Consumer Secret.

The conferenceAlias needed in this step is the alias of the conference you want to join.

Open the src/App.js file and replace its content by the following code:

import { reducer as voxeetReducer } from "@voxeet/react-components"
import React from "react"
import thunkMidleware from "redux-thunk"
import { combineReducers, createStore, applyMiddleware } from "redux"

import { ConferenceRoom, VoxeetProvider } from "@voxeet/react-components"

// Import Style
import "@voxeet/react-components/dist/voxeet-react-components.css"

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

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

const settings = {
  consumerKey: "YOUR_CONSUMER_KEY",
  consumerSecret: "YOUR_CONSUMER_SECRET",
  conferenceAlias: "Sample",
}

function App() {
  return (
    <VoxeetProvider store={configureStore()}>
      <ConferenceRoom
        autoJoin
        consumerKey={settings.consumerKey}
        consumerSecret={settings.consumerSecret}
        conferenceAlias={settings.conferenceAlias}
      />
    </VoxeetProvider>
  )
}

export default App

You can now restart your application with :

npm start
OR
yarn start

The UXKit will enter in a conference automatically when the page has done loading.

Available in English and French. The language is automatically chosen based on your browser language settings.

UXKit Properties

The following properties are available with the ConferenceRoom:

  • sdk Function - a function that enables the usage of an external Voxeet SDK.
  • consumerKey String - represents the consumer key.
  • consumerSecret String - represents the consumer secret.
  • oauthToken String - the OAuth2 token retrieved from your backend. Use it with the refreshTokenCallback properties of the widget.
  • refreshTokenCallback Function - function returning a Promise with the refreshed token when the current token expires.
  • conferenceAlias String - the alias of the conference.
  • logo String - displays a logo inside the react components.
  • displayActions Array - displays the desired action buttons. For example the displayActions={["mute", "video"]} command displays video and mute buttons. The following elements can be used in this array: (Strings : "mute", "video", "share", "recording", "live", "attendees", "chat"). By default the ["mute" ,"recording", "screenshare", "video"] buttons are enabled.
  • shareActions Array - if the 'share' button is enabled using displayActions, the shareActions displays additional action buttons inside it (such as ["screenshare" ,"filepresentation", "videopresentation"] displayed by default).
  • disableSounds Boolean - disables sounds during the conference (mute/unmute, record, conference join, conference left).
  • customLocalizedStrings Object - customizes strings described below.
  • autoRecording Boolean - records conference automatically when a user joins it (if it's not already started).
  • autoHls Boolean - starts Hls broadcast automatically when the conference is created.
  • preConfig Boolean - shows a pop-up window with a device configuration (audio, video) before entering a conference.
  • videoCodec String - specifies video codecs (H264 or VP8). The H264 is required on the Safari browser.
  • isListener Boolean - enables enteringn the conference as a listener.
  • pstnNumbers Array - customizes the PSTN numbers. All numbers are available on the website. Remove from this array numbers that are not useful.
  • liveRecordingEnabled Boolean - records a live conference and generates an mp4 video (use a webhook to retrieve it). By default, the value is set to false.
  • isWidget Boolean - indicates whether the component is used as a widget or embedded in your application. The default value is set to true.
  • invitedUsers Array - an array of people who can be invited to the conference. They need to subscribe to the conference to receive the invitation. Example: [{name: "USERNAME", externalId:"EXTERNAL_ID", title: "TITLE"}].
  • isWebinar Boolean - launches the widget in a webinar mode in which only the admin can speak (restriction in Tiles mode). The default value is set to false.
  • autoJoin Boolean - joins the conference automatically. The default value is set to false.
  • displayModes Array - indicates the allowed modes. They are displayed in the same order as in the array. The default value is: ["list", "tiles", "speaker"].
  • isManualKickAllowed Boolean - authorizes admin (conference creator) to remove users from the conference. The default value is set to false.
  • isAdmin Boolean - sets as the admin the user that joins a conference. The default value is set to false.
  • kickOnHangUp Boolean - removes all users from the conference when the admin (conference creator) leaves the conference. The default value is set to false.
  • userInfo Object - deliveres user information for the Voxeet SDK. Default object presents like this: {name: "Guest" + Math.floor((Math.random() * 100) + 1), externalId: '', avatarUrl: ''}.
  • conferenceReplayId String - replays the conference automatically.
  • constraints Object - the WebRTC constraints for the SDK. Default values are {audio: true, video: false}.
  • handleOnLeave Function - a function to call upon leaving the conference.
  • handleOnConnect Function - a function to call when the current user is connected to the conference.
  • actionsButtons Component - a React component that customizes the action buttons.
  • attendeesWaiting Component - displays information about waiting for other participants. It enables to put a desired waiting component.
  • loadingScreen Component - displays a loading screen. It enables to put a desired one.