You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Aug 30, 2024. It is now read-only.
Want to learn more? Check out the [Video Call App Project Gallery page](https://docs.dolby.io/communications-apis/docs/video-call).
22
-
23
-
## Getting Started
24
-
25
-
The following steps will quickly get you started testing the Dolby.io Communications APIs capabilities.
26
-
27
-
### Pre-requisites
28
-
29
-
To get started building this app you will need a Dolby.io account and access token. You will also need the following -
30
-
31
-
- NPM v8.11
32
-
- Yarn v 1.22.19
33
-
- Node v16
25
+
Want to learn more? Check out the [Video Call App Project Gallery page](https://dolby.io/project-gallery/video-call-sample-apps/).
34
26
35
27
### Supported Browsers
36
28
@@ -41,20 +33,61 @@ The Video Call App supports the following browsers
41
33
- Firefox 100+
42
34
- Edge 100+
43
35
44
-
#### How to get a Dolby.io account
36
+
## Run the demo directly
37
+
38
+
You can deploy the Dolby.io Video Call app without needing to clone and build the app using the `Deploy to Netlify` button. You will need:
39
+
40
+
- A Netlify account to which you're logged into
41
+
- Your Dolby.io App key and secret
42
+
43
+
Refer to [this guide](#how-to-get-a-dolbyio-account) on how to obtain your Dolby.io tokens.
44
+
45
+
[](https://app.netlify.com/start/deploy?repository=https://github.com/dolbyio-samples/comms-app-react-videocall)
46
+
47
+
## Getting Started
48
+
49
+
The following steps will quickly get you started testing the Dolby.io Communications Platform.
50
+
51
+
### Pre-requisites
52
+
53
+
To get started building this app you will need a Dolby.io account and access token. You will also need the following -
54
+
55
+
-[Node v18.0.0 or higher](https://nodejs.org/en/download)
56
+
-[NPM v8.11 or higher](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
To setup your Dolby.io account, go to [Dolby.io dashboard](https://dashboard.dolby.io) and complete the form. After confirming your email address, you will be logged in.
47
62
48
-
#### How to obtain access token
63
+
> If you did not receive a verification email, check your Spam or Junk email folders.
64
+
65
+
#### Setting up your [Dolby.io](https://dashboard.dolby.io) app
66
+
67
+
To set up your app, you will need to go to the _Dashboard_. Inside the `Communications and Media` tab, click `add new app` if you do not have an existing app. 
68
+
69
+
### Repo structure
49
70
50
-
You will need to generate a client access token to run this app. Follow the steps to obtain a token.
71
+
- The `videocall/src/` directory contains all the front-end code for the video calling app. Within this directory
51
72
52
-
1. Go to the Dashboard, and find the _Applications_ menu item..
53
-
73
+
-`hooks/` contains wrapper functions around our SDK for re-usable functionality.
74
+
-`components/` contains UI components that encapsulate and provide functionality.
75
+
-`utils/` provides some generic helper functions.
76
+
-`context/` contains the React Context for the side drawer and the main component window.
54
77
55
-
2. On the next screen, there is a token field where you can copy the client access token to your clipboard. The generated token is active for the indicated amount of time.
78
+
- The `backend/` contains the code for the proxy server.
56
79
57
-
80
+
This project is built with the [Comms UI Kit for react](https://github.com/dolbyio/comms-uikit-react) library for simplicity and re-use of standard Communications API based components.
81
+
82
+
### Setup the `.env` file
83
+
84
+
Create a new file called `.env` in the `videocall` folder, and copy the contents of `.env.example` into it.
85
+
You will need to provide the values for `KEY` and `SECRET` from your dolby.io app. To obtain your key and secret from the Dolby.io dashboard,
86
+
87
+
1. Go to the _Dashboard_, and click on the `API Keys` next to your application.
88
+
89
+
2. On the next screen, copy the `App key` and `App secret` and paste them in your `.env` file against the marked variables.
90
+
58
91
59
92
## How to run the Video Conferencing app
60
93
@@ -70,22 +103,6 @@ Open a terminal window in the root directory of your project folder. Install the
70
103
yarn
71
104
```
72
105
73
-
### Paste the token
74
-
75
-
Open file [src/App.tsx](./src/App.tsx), find line 23 and replace `{YOUR_TOKEN}` with your access token string, prepared previously in [this step](#how-to-obtain-access-token). It should look like this:
Execute the following command to run the application locally.
@@ -96,23 +113,14 @@ yarn dev
96
113
97
114
### Open the app in a browser
98
115
99
-
After the appropriate message appears in the terminal window, open <http://localhost:3000> in the browser. The application will launch at this address.
100
-
101
-
## How to build the Video Conferencing app
116
+
After the appropriate message appears in the terminal window, open <http://localhost:3000> in the browser. The application will launch at this address. You should be able to see the welcome screen.
102
117
103
-
Follow the steps of installing dependencies and token configuration from the "How to run the Video Conferencing app" section.
104
-
105
-
After installing the dependencies, execute the following command:
106
-
107
-
`yarn build`
108
-
109
-
This command generates distribution packages in the `/dist` directory.
118
+
110
119
111
120
### Additional configuration
112
121
113
-
Please see the [additional configuration options](additional-configurations.md) guide to learn more about additional settings such as music mode.
114
-
122
+
Please see the [additional configuration options](additional-configurations.md) guide to learn more about additional settings such as music mode.
115
123
116
-
## More resources
124
+
## More resources
117
125
118
-
Looking for more sample apps and projects? Head to the [Project Gallery]()
126
+
Looking for more sample apps and projects? Head to the [Project Gallery](https://dolby.io/project-gallery).
# Additional Configuration Options for the Video Call App
1
+
# Additional Configuration and customization Options for the Video Call App
2
+
3
+
## Changing the labels in the app
4
+
5
+
To change the labels in the app, you can modify [en.json](src/translations/en.json) and change the labels as necessary.
6
+
To add a new string, add a new key-value pair to the JSON file. You can then reference that new key in the code as follows:
7
+
8
+
```javascript
9
+
10
+
// en.json
11
+
{
12
+
//... other keys
13
+
"yourNewKey":"your new value",
14
+
}
15
+
16
+
// your own code file
17
+
import {Text} from'@dolbyio/comms-uikit-react';
18
+
19
+
<Text labelKey="yourNewKey" type="H2"/>
20
+
21
+
```
2
22
3
23
## Base URL configuration
4
24
@@ -18,56 +38,32 @@ Additional information about Base URL configuration can be found [here](https://
18
38
VITE_MUSIC_MODE=true
19
39
```
20
40
21
-
2. To start the application run the following command in the **root** directory
41
+
You can learn more about music mode on our [docs pages](https://docs.dolby.io/communications-apis/docs/guides-music-mode)2. To start the application run the following command in the **root** directory
22
42
23
43
```bash
24
44
yarn dev
25
45
```
26
46
27
47
## Using live streaming features
28
48
29
-
In order to use live streaming features, you need to run an additional proxy server so that POST methods can be properly handled. An example of such a server is placed in the [/api](api/) folder.
49
+
In order to use live streaming features, you need to run an additional proxy server so that POST methods can be properly handled. An example of such a server is placed in the [/backend](backend/) folder.
30
50
31
51
> If your application has been started in previous steps, please kill the process and proceed with instructions below.
32
52
33
53
### Setting up live streaming
34
54
35
-
1. In the project root folder, create an `.env` file and add the following variables
55
+
1. In the project root folder's `.env` file set the following variable
36
56
37
57
```env
38
-
VITE_API_PROXY=localhost
39
-
VITE_PROXY_PORT=4000
40
-
VITE_PROXY_PROTOCOL=http
41
-
VITE_STREAMING=true
42
-
```
43
-
44
-
2. In the `/api` directory, create an `.env` file and fill it with the following properties.
45
-
46
-
```bash
47
-
PORT=4000
48
-
KEY=APP_KEY
49
-
SECRET=APP_SECRET
50
-
HOSTNAME=localhost
51
-
```
52
-
53
-
Your `APP_KEY` and `APP_SECRET` can be found in your Dolby.io dashboard, under the app section. **Do not** wrap them in quote marks.
54
-
55
-
56
-
57
-
3. Staying inside the `/api` directory, install all dependencies by running the following command
58
-
59
-
```bash
60
-
yarn
58
+
VITE_RTMP_STREAMING=true
61
59
```
62
60
63
-
1. To start both the server and application together, run the following command in the **root** directory:
61
+
> You can set any value for port and hostname in the .env files, as long as they are the same.
64
62
65
-
```bash
66
-
yarn run dev-proxy
67
-
```
63
+
## Customizing the App Theme
68
64
69
-
>You can set any value for port and hostname in the .env files, as long as they are the same.
65
+
The app theme is controlled by the [Dolby.io UI Kit](https://www.npmjs.com/package/@dolbyio/comms-uikit-react). Refer to [this guide](https://github.com/DolbyIO/comms-uikit-react/blob/main/documentation/providers/ThemeProvider.md) on how to stylize your app.
70
66
71
-
## Adding Custom layouts to your live stream
67
+
## Customizing the viewer layout
72
68
73
-
Please visit this [blog post](https://dolby.io/blog/creating-a-custom-mixer-layout-for-streaming-a-conference/)if you want to explore adding a custom layout to your live stream.
69
+
You can re-arrange the rendered layout for your live stream viewers by configuring the Communications API Mixer app. A mixer app is a web app based on the Dolby.io communications APIs that composes multiple streams of videos into a single stream and passes that on to any RTMP or webRTC based consumer. Refer to this [blog](https://dolby.io/blog/creating-a-custom-mixer-layout-for-streaming-a-conference/)for more details.
0 commit comments