Insights Dashboard Sample

Dashboard Sample which makes use of OpenTok Insights GraphQL API

Preview

Local Installation

1. Clone the repository.

2. Install dependencies: npm install.

3. Copy .env.template to .env and edit the environment variables.

4. Run the server and the client app: npm start. This will run both the server (server.js) and the client app (react-scripts).

Configuration options

Configuration can be done using environment variables. You can create an .env file for easier config.

Environment Variable Names and Description:

• REACT_APP_INSIGHTS_URL (Required): The URL for the OpenTok Insights API.
• REACT_APP_API_KEY (Required): Your OpenTok API Key.
• API_SECRET (Required): Your OpenTok API Secret.
• SERVER_PORT (Required): The port number for your server to run on.
• REACT_APP_SERVER_URL (Required): The URL for your server app.
• APP_CLIENT_URL (Required): The URL for your client app.

Notice that all the environment variables used by the client start with REACT_APP_. This ensures that only those are accessible by the client, protecting your API secret.

Charts - Query samples

Usage by Day

Query to Insights API (Sample)

{
  project(projectId: ${YOUR_API_KEY}) {
    projectData(
      start: ${moment().subtract(10, 'days')},
      interval: DAILY
    ) { 
      resources {
        intervalStart,
        intervalEnd,
        usage {
          streamedPublishedMinutes,
          streamedSubscribedMinutes
        }
      }
    }
  }
}

SDK Distribution

Query to Insights API (Sample)

{
  project(projectId: ${YOUR_API_KEY}) {
    projectData(
      start: ${moment().subtract(10, 'days')},
      groupBy: SDK_TYPE,
      sdkType: [JS, ANDROID, IOS]
    ) {
      resources {
        sdkType,
        usage {
          streamedSubscribedMinutes
        }
      }
    }
  }
}

Failures by Browser

Query to Insights API (Sample)

{
  project(projectId: ${YOUR_API_KEY}) {
    projectData(
      start: ${moment().subtract(10, 'days')},
      groupBy: BROWSER_NAME,
      browserName: [CHROME, FIREFOX, IE]
    ) { 
      resources {
        browserName,
        errors {
          guidConnect {
            failures
          },
          guidPublish {
            failures
          },
          guidSubscribe {
            failures
          }
        }
      }
    }
  }
}

Bitrate by Country

Query to Insights API (Sample)

{
  project(projectId: ${YOUR_API_KEY}) {
    projectData(
      start: ${moment().subtract(10, 'days')},
      groupBy: COUNTRY,
      country: [AR, BR, ES, FR, MX, US]
    ) {
      resources {
        country,
        quality {
          subscriber {
            videoBitrateAvg
          }
        }
      }
    }
  }
}