Skip to content

Commit 797dbb3

Browse files
author
ci-bot
committed
RC 1.4.4
1 parent f3dfcc0 commit 797dbb3

File tree

165 files changed

+16766
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

165 files changed

+16766
-1
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2022 Dolby.io Samples
3+
Copyright (c) 2022 Dolby Laboratories
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# Dolby.io Communications Video Conference Call React App
2+
3+
## Video Conference Call App
4+
5+
The application available in this repository demonstrates the capabilities of Dolby.io's video conferencing solution for browser applications, built using React.
6+
7+
This repository will demonstrate how to develop the core Dolby.io features and will also provide an understanding of how our service works. If you run into problems, the full Dolby.io React SDK documentation can be found at <https://docs.dolby.io/communications-apis/docs/js-overview>
8+
9+
The application provided allows you to evaluate solutions offered by Dolby.io Comms API. You can download the repository yourself, run the application locally and verify that it meets your requirements. If you are interested in more details about Dolby.io’s video conference call capabilities, more information can be found here:
10+
<https://dolby.io/products/video-call/>
11+
12+
Its scope covers:
13+
14+
- Initialization of Dolby.io SDK
15+
- Creating and joining a conference
16+
- Camera, microphone and audio output configuration
17+
- Full conference view with grid display of user streams
18+
- Basic video conferencing interactions (muting, camera switching)
19+
20+
## Getting Started
21+
22+
The steps below will quickly get you started testing Dolby.io’s capabilities
23+
24+
### How to get a Dolby.io account
25+
26+
Dolby.io Comms API requires you to create a Dolby.io account.
27+
To set it up, you need to go to <https://dashboard.dolby.io/signup/> and complete the form. After confirming your email address, you will be logged in.
28+
29+
### Dolby.io dashboard
30+
31+
After logging in, you get access to the full dashboard where you can manage your account.
32+
33+
From this page <https://dashboard.dolby.io/dashboard/applications/summary> you can manage your profile and billing.
34+
35+
### How to obtain access token
36+
37+
To run the application, you need to generate a special access token and paste it into the source code of the app. Go to the _Dashboard_, and find the _Launch Demos_ button. On the next screen, will be a token field where you can copy the client access token to your clipboard. The generated token is active for 12 hours.
38+
39+
## How to run the Video Conferencing app
40+
41+
Below is a list of steps necessary to run the application locally.
42+
43+
### Clone repository
44+
45+
Use git to clone the repository with
46+
`git clone [email protected]:dolbyio-samples/comms-app-react-videoconference.git`
47+
or simply download using the green button on the top of this page and unzip the repository
48+
49+
### Install dependencies
50+
51+
Open the main directory with the terminal. If you are using [Yarn](https://yarnpkg.com/), install dependencies with command
52+
53+
```bash
54+
yarn
55+
```
56+
57+
and if you are using [NPM](https://www.npmjs.com/), type command
58+
59+
```bash
60+
npm install
61+
```
62+
63+
### Paste the token
64+
65+
Open file [src/App.tsx](https://github.com/dolbyio-samples/comms-app-react-videoconference/blob/main/src/App.tsx), find line 42 and replace `{YOUR_TOKEN}` with your access token string, prepared previously in [this step](#how-to-obtain-access-token). It should look like this:
66+
67+
```javascript
68+
return (
69+
<TranslationProvider>
70+
<ConferenceCreateProvider>
71+
<CommsProvider token="bGciOiJIUzUxMiJ9.eyJOTQxMywic3V...23r2fsdvsdfsfdsvfd">
72+
<...>
73+
</CommsProvider>
74+
</ConferenceCreateProvider>
75+
</TranslationProvider>
76+
);
77+
```
78+
79+
### Start the app
80+
81+
After installing the dependencies, execute the command
82+
83+
```bash
84+
yarn dev
85+
```
86+
87+
or
88+
89+
```bash
90+
npm run dev
91+
```
92+
93+
to run the application locally.
94+
95+
### Open the app in a browser
96+
97+
After printing the appropriate message in the terminal window, open <http://localhost:3000> in the browser. The application will launch at this address.
98+
99+
#### Base URL configuration
100+
101+
In case you need to fully configure the application path (e.g. extend localhost:3000/ to localhost:3000/videoconference/) please add the `/.env.production` file with such content:
102+
103+
```
104+
BASE_URL=<YOUR BASE URL PATH>
105+
```
106+
107+
Change the BASE_URL environment variable and restart the application.
108+
109+
## How to build the Video Conferencing app
110+
111+
Follow the steps of installing dependencies & token configuration from "How to run" section
112+
113+
After installing the dependencies, execute the command
114+
`yarn build`
115+
This command generated distribution packages in `/dist` directory.
116+
117+
## Known issues & limitations
118+
119+
- Speaker selection available only on Chrome
120+
- Copy conference link works only for root directories by default
121+
- In some cases entering conference may take more than 3 seconds
122+
- On Safari 15.4 and below local user can hear echo
123+
124+
## Requirements & supported platforms
125+
126+
### Video Conference Call App supports 4 main browsers:
127+
128+
- Chrome 100+
129+
- Safari 15+
130+
- Firefox 100+
131+
- Edge 100+

‎documentation/components/Avatar.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Avatar
2+
3+
The Avatar component is a graphical representation of an object or an entity, for example, a person or an organization.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| -------------------- | ----------------------- | ------- | --------------------------------------------------------- |
9+
| `participant` | Participant | - | The Participant object. |
10+
| `size`? | 'xs' / 's' / 'm' / 'l' | 'l' | The size of the avatar. |
11+
| `borderColor`? | ColorKey | - | The color of the avatar's border. |
12+
| `testID`? | string | - | The unique E2E test handler. |
13+
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
14+
15+
## Examples
16+
17+
### React
18+
19+
```javascript
20+
return <Avatar participant={part} size={l} />;
21+
```

‎documentation/components/Badge.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Badge
2+
3+
The Badge component generates a small label that can contain additional description.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| -------------------- | ----------------------- | ---------- | --------------------------------------------------------- |
9+
| `content`? | ReactNode | - | The content of the badge. |
10+
| `backgroundColor`? | ColorKey | 'grey.700' | The background color of the badge. |
11+
| `contentColor`? | ColorKey | 'white' | The color of the badge's content. |
12+
| `testID`? | string | | The unique E2E test handler. |
13+
| `...HTMLDivElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the div element. |
14+
15+
## Examples
16+
17+
### React
18+
19+
```javascript
20+
return <Badge content="12" />;
21+
```

‎documentation/components/Button.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Button
2+
3+
The Button component is responsible for square and rectangular buttons.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| ----------------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------ |
9+
| `children` | ReactElement | - | The content of the button. |
10+
| `variant` ? | 'primary' / 'secondary' / 'tertiary' | - | The variant of style that allows you to distinguish between actions of different importance in the UI. |
11+
| `onClick` ? | Function | - | The event handler property for processing click events on the button. |
12+
| `testID` ? | string | - | The unique E2E test handler. |
13+
| `...HTMLButtonElement`? | Partial(HTMLDivElement) | - | Props that will be passed to the root of the button element. |
14+
15+
## Examples
16+
17+
### React
18+
19+
```javascript
20+
return <Button variant="secondary">Text</Button>;
21+
```

‎documentation/components/CameraSelect.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# CameraSelect
2+
3+
The CameraSelect component displays a select list of available camera devices that a user can select. The component offers a built-in method that allows changing the currently used device.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| ----------------- | -------- | ------- | ------------------------------------------------------- |
9+
| `labelColor` | ColorKey | - | The color of the label. |
10+
| `textColor` | ColorKey | - | The color of text. |
11+
| `backgroundColor` | ColorKey | - | The background color of the select element. |
12+
| `placeholder` | string | - | The default text to display when no option is selected. |
13+
| `label` | string | - | The text to display above the component. |
14+
| `testID` ? | string | - | The unique E2E test handler. |
15+
16+
## Examples
17+
18+
### React
19+
20+
```javascript
21+
return <CameraSelect testID="CameraSelect" label="Camera" placeholder="Camera" />;
22+
```

‎documentation/components/Conference.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Conference
2+
3+
The Conference component is responsible for creating and joining conferences on component mount with given props.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| ---------- | --------------- | ------- | --------------------------------------------------------------------------- |
9+
| `alias` | string | - | The name of the conference. |
10+
| `audio` | boolean | - | A boolean that indicates whether audio should be enabled in the conference. |
11+
| `video` | boolean | - | A boolean that indicates whether video should be enabled in the conference. |
12+
| `children` | React.ReactNode | - | A children element. |
13+
14+
## Examples
15+
16+
### React
17+
18+
```javascript
19+
return (
20+
<Conference>
21+
<div>children element</div>
22+
</Conference>
23+
);
24+
```

‎documentation/components/ConferenceName.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# ConferenceName
2+
3+
The ConferenceName component is responsible for displaying the name of the current conference.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| --------------- | ------------------ | ------- | ------------------------------------------------------------ |
9+
| `...TextProps`? | Partial(TextProps) | - | Props that will be passed to the root of the Text component. |
10+
| `testID` ? | string | - | The unique E2E test handler. |
11+
12+
## Examples
13+
14+
### React
15+
16+
```javascript
17+
return <ConferenceName />;
18+
```

‎documentation/components/CopyConferenceLinkButton.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# CopyConferenceLinkButton
2+
3+
The CopyConferenceLinkButton component is responsible for copying the conference URL to a user's clipboard.
4+
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| --------------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------- |
9+
| `url` | string | - | The conference URL that will be copied to clipboard after clicking. |
10+
| `tooltipText` | string | - | The informative text to display inside the Tooltip component. |
11+
| `successText` | string | - | The text to display for one second in the Tooltip component after a successful completion of the copy action. |
12+
| `tooltipPosition`? | TooltipProps['position'] | top | The position of the Tooltip element. |
13+
| `...IconButtonProps`? | Partial(IconButtonProps) | - | Props to pass to the IconButton component. |
14+
| `testID` ? | string | - | The unique E2E test handler. |
15+
16+
## Examples
17+
18+
### React
19+
20+
```javascript
21+
const [isLoading, setIsLoading] = useState(false);
22+
23+
const onSuccess = () => {
24+
navigate('conference');
25+
};
26+
27+
if (isLoading) {
28+
return <Loader />;
29+
}
30+
31+
return <CopyConferenceLinkButton onStart={setIsLoading} onSuccess={onSuccess} text="Copy" testID="CopyButton" />;
32+
```

0 commit comments

Comments
 (0)