Dashboard Sample which makes use of OpenTok Insights GraphQL API
-
Clone the repository.
-
Install dependencies:
npm install
. -
Copy
.env.template
to.env
and edit the environment variables. -
Run the server and the client app:
npm start
. This will run both the server (server.js) and the client app (react-scripts).
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.
{
project(projectId: ${YOUR_API_KEY}) {
projectData(
start: ${moment().subtract(10, 'days')},
interval: DAILY
) {
resources {
intervalStart,
intervalEnd,
usage {
streamedPublishedMinutes,
streamedSubscribedMinutes
}
}
}
}
}
{
project(projectId: ${YOUR_API_KEY}) {
projectData(
start: ${moment().subtract(10, 'days')},
groupBy: SDK_TYPE,
sdkType: [JS, ANDROID, IOS]
) {
resources {
sdkType,
usage {
streamedSubscribedMinutes
}
}
}
}
}
{
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
}
}
}
}
}
}
{
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
}
}
}
}
}
}