https://github.com/opentok/insights-dashboard-sample
Sample React app utilizing the OpenTok Insights GraphQL API
https://github.com/opentok/insights-dashboard-sample
insights-api opentok sample
Last synced: 18 days ago
JSON representation
Sample React app utilizing the OpenTok Insights GraphQL API
- Host: GitHub
- URL: https://github.com/opentok/insights-dashboard-sample
- Owner: opentok
- License: other
- Created: 2018-11-19T15:53:09.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-08-29T21:09:22.000Z (9 months ago)
- Last Synced: 2024-08-29T23:24:36.342Z (9 months ago)
- Topics: insights-api, opentok, sample
- Language: JavaScript
- Homepage: https://tokbox.com/developer/guides/insights/
- Size: 1.95 MB
- Stars: 6
- Watchers: 23
- Forks: 14
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Insights Dashboard Sample
Dashboard Sample which makes use of OpenTok Insights GraphQL API
## Preview
## Local Installation
1. Clone the repository.
2. If you are using nvm, run `nvm use` to use the version of Node from the .nvmrc file.
3. Install dependencies: `npm install`.
4. Copy `.env.template` to `.env` and edit the environment variables.
5. 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 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 server.
- `REACT_APP_API_KEY` (Required): Your OpenTok API Key.
- `API_SECRET` (Required when using an OpenTok project): The OpenTok API secret (For OpenTok projects, only).
- `PRIVATE_KEY_PATH` (Required when using a Vonage application): The file path to the private key (for your Vonage application, only).
- `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
}
}
}
}
}
```
### Participant Pricing Model Usage
#### Query to Insights API (Sample)
Here is the generic query to Insights API to get specified tier related insights:
```
{
project(projectId: "${YOUR_API_KEY}") {
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.
### 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
}
}
}
}
}
}
```
### Publisher video bitrate for a meeting
#### Query to Insights API (Sample)
##### This query will return all your session IDs from the last 10 days.
```
{
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
}
}
}
}
}
}
}
}
}
}
}
```
### Publisher and Subscriber minutes by Session
#### Query to Insights API (Sample)
##### This query will return pages (50 results each) of your session IDs from the last 10 days:
```
{
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](https://tokbox.com/developer/guides/insights/#using-pagination-in-queries).
##### You can then get the total publisher and subscriber minutes for a single session as follows:
```
{
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
}
}
}
}
}
}
}
```
### Experience Composer Usage Data
#### Query to Insights API (Sample)
##### This query returns the daily total minutes that [Experience Composer](https://tokbox.com/developer/guides/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
}
}
}
}
}
```
## Development and Contributing
Interested in contributing? We :heart: pull requests! See the
[Contribution](CONTRIBUTING.md) guidelines.
## Getting Help
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 for support options
- Tweet at us! We're [@VonageDev](https://twitter.com/VonageDev) on Twitter
- Or [join the Vonage Developer Community Slack](https://developer.nexmo.com/community/slack)
## Further Reading
- Check out the Developer Documentation at