voicebase-player-react

VoiceBase Player React ^beta

The VoiceBase React Player is a component for interactive visualization of VoiceBase transcripts and analytics that may be embedded into your user experience. Media and transcripts may be retreived from a VoiceBase account or optionally from a remote URL.

This version of the player requires React. Don't want to use React? Try the Vanilla JS version!

Currently, the player is in beta and the code may change significantly from the current version before a stable release. It is reccomended that you use the player as described below and avoid modifying the player base code in order to be able to take advantage of updates as they are released.

Features

The VoiceBase Player is intended to provide a UI for the the most common playback scenarios including:

• Playback of web supported audio and video formats with live transcripts
• Cue audio by clicking on transcript words
• Display Knowledge Discovery and Phrase Spotting Groups
• Show Agent Quality Metrics for a given recording
• Display Predictions for a given recording
• Higlight regions of audio relevant for any detectors that were enabled for transcription

Usage

1) Add the VoiceBase Player to your React project:

npm install --save voicebase-player-react

2) Choose the version of the player you need based on your given use case

The player comes in two different media modes (platformApi or url).

platformApi media mode

This mode connects the player to a voicebase compatible api to gather the required analytics data and media. When operating a platformApi mode of the player, you are required to supply the following properties:

• token (required): The bearer token for authentication against the Platform API.
• mediaId (required): The id of the media which the player should be playing.
• apiUrl (default: https://apis.voicebase.com/v3): The endpoint of the Platform API.
• analyticsFormat (default: ANALYTICS_SCHEMA_VERSION_V3): The format of the analytics returned from the API.

url media mode

This mode allows the player to play a given url for the analytics data and media. You are required to supply the following properties for a url mode version of the player:

• analyticsUrl: The url location of the data for the player to use.
• mediaUrl: The url location of the media for the player to use.
• analyticsFormat (default: ANALYTICS_SCHEMA_VERSION_V3): The format of the analytics returned from the API.

3) Import the required version of the player based on your use case with styling

Based on the media mode and redux mode you wish to use, you can import the required player from voicebase-player-react.

The format for players is in the form {ReduxMode}{MediaMode}Player. For instance, if you wish to use the standalone version of the url media player, you would import StandaloneUrlPlayer. In this case your import would appear as:

import { StandaloneUrlPlayer } from 'voicebase-player-react'
import 'voicebase-player-react/styles.css'

4) Examples of each player

StandalonePlatformApiPlayer (default export)

import { StandalonePlatformApiPlayer } from 'voicebase-player-react'
import 'voicebase-player-react/styles.css'

<StandalonePlatformApiPlayer
  token={TOKEN}
  mediaId={MEDIA_ID}
  // Overwrite the analyticsFormat if required
  // analyticsFormat={ANALYTICS_SCHEMA_VERSION_V3}
  // Overwrite the platform api endpoint if required
  // apiUrl={'https://apis.voicebase.com/v3'}
/>

StandaloneUrlPlayer

import { StandaloneUrlPlayer } from 'voicebase-player-react'
import 'voicebase-player-react/styles.css'

<StandaloneUrlPlayer
  analyticsUrl={ANAYLTICS_URL}
  mediaUrl={MEDIA_URL}
  // Overwrite the analyticsFormat if required
  // analyticsFormat={ANALYTICS_SCHEMA_VERSION_V3}
/>

5) Schema versions

With each player, you can stipulate what analytics data you will be populating the player with. In future, it would be a good design decision for this to be identified within the given data, but for the current time, we need to explicitly define this in order for the player to work.

ANALYTICS_SCHEMA_VERSION_V2

This is the format returned from media queries against the platform api on the v2-beta version.

ANALYTICS_SCHEMA_VERSION_V2_CALLBACK

This is the format returned from platform api callbacks which are in a different form to those returned from typical v2-beta api queries.

ANALYTICS_SCHEMA_VERSION_V3

This is the format of the v3 API.

Requirements

• Node.js >=5.0.0
• react, react-dom >=15.5
• redux >=3.5.2
• react-redux >=4.4.5