Dashboard Sample which makes use of OpenTok Insights GraphQL API
-
Clone the repository.
-
If you are using nvm, run
nvm useto use the version of Node from the .nvmrc file. -
Install dependencies:
npm install. -
Copy
.env.templateto.envand 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).
Open http://localhost:3000 in your browser.
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 server.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
}
}
}
}
}
Here is the generic query to Insights API to get specified tier related insights:
{
project(projectId: ${apiKey}) {
projectData(
start: ${moment(startDate)},
end: ${moment(endDate)},
interval: DAILY
) {
resources {
intervalStart,
intervalEnd,
usage {
participantMinutes{
from1To2Publishers
from3To6Publishers
from7To8Publishers
from9To10Publishers
from11To35Publishers
from36To40Publishers
from41PlusPublishers
}
}
}
}
}
}
However, you can add or remove more tiers according to your rate plan by adjusting
the ppmDisplaySettings property in the src/charcts/UsageByParticipantTier.js file:
const ppmDisplaySettings = [
{
label: '1 - 2 publishers',
backgroundColor: 'rgba(6, 186, 119, 0.4)',
key: 'from1To2Publishers'
},
{
label: '3 - 6 publishers',
backgroundColor: 'rgba(153, 65, 255, 0.4)',
key: 'from3To6Publishers'
}
];
This examples is used to generate a GraphQL query similar to the sample query shown above and populate the stacked area chart.
{
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
}
}
}
}
}
}
{
project(projectId: ${YOUR_API_KEY}) {
sessionData {
sessionSummaries(start: ${moment().subtract(10, 'days')}) {
totalCount
resources {
sessionId
}
}
}
}
}
You can then get the stream statistics (such as the video bitrate) for for publishers and subscribers in a session:
{
project(projectId: ${YOUR_API_KEY}) {
sessionData {
sessions(sessionIds: ["${YOUR_SESSION_ID}"]) {
resources {
publisherMinutes
meetings {
resources {
publishers {
totalCount
resources {
stream {
streamId
}
streamStatsCollection {
resources {
videoBitrateKbps
createdAt
}
}
}
}
}
}
}
}
}
}
}
{
project(projectId: ${YOUR_API_KEY}) {
sessionData {
sessionSummaries(
start: ${moment().subtract(10, 'days')}
endCursor: "${END_CURSOR}"
) {
totalCount
pageInfo {
endCursor
}
resources {
sessionId
}
}
}
}
}
Note that you use the endCursor value of the returned pageInfo data as the
input endCursor parameter to obtain the next page of data. For more information, see
Using Pagination in Queries.
{
project(projectId: ${YOUR_API_KEY}) {
sessionData {
sessions(sessionIds: ["${YOUR_SESSION_ID}"]) {
resources {
sessionId
publisherMinutes
subscriberMinutes
meetings {
totalCount
}
}
}
}
}
}
Additionally, you can get the publisherMinutes and subscriberMinutes of each one of the meetings in the session.
{
project(projectId: ${YOUR_API_KEY}) {
sessionData {
sessions(sessionIds: ["${YOUR_SESSION_ID}"]) {
resources {
meetings {
resources {
meetingId
publisherMinutes
subscriberMinutes
}
}
}
}
}
}
}
This query returns the daily total minutes that Experience Composer publishes to a video session (independent of an archiver or broadcast composer), Experience Composer publishes to a video session being archived, and Experience Composer publishes to a video session being sent to a live-streaming broadcast:
{
project(projectId: ${YOUR_API_KEY}) {
projectData(
start: ${moment(startDate)},
end: ${moment(endDate)},
interval: DAILY
) {
resources {
intervalStart,
intervalEnd,
usage {
experienceComposer,
experienceComposerArchive,
experienceComposerBroadcast
}
}
}
}
}
Interested in contributing? We ❤️ pull requests! See the Contribution guidelines.
We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:
- Open an issue on this repository
- See https://support.tokbox.com/ for support options
- Tweet at us! We're @VonageDev on Twitter
- Or join the Vonage Developer Community Slack
- Check out the Developer Documentation at https://tokbox.com/developer/
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent