Skip to content
This repository was archived by the owner on Feb 10, 2022. It is now read-only.

Commit 7cec6f7

Browse files
git-babelgit-babel
committed
Add sample app
1 parent 40ebecc commit 7cec6f7

37 files changed

Lines changed: 9301 additions & 2 deletions

‎README.md‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,62 @@
1-
# quickstart-calls-js
2-
This public repository provides a calls sample with Node and let you know how to integrate SendBird's voice & video SDK.
1+
# SendBird Calls—QuickStart Guide for JavaScript
2+
3+
## Introduction
4+
SendBird provides `SendBirdCall` framework for your app enabling `VoIP` communication among your users. This sample introduces an applications based on `SendBirdCall`.
5+
6+
## Prerequisites
7+
- Node
8+
- npm (or yarn)
9+
- Modern browser, supporting WebRTC APIs.
10+
11+
## Creating a SendBird application
12+
1. Login or Sign-up for an account at [dashboard](https://dashboard.sendbird.com/).
13+
2. Create or select an application on the SendBird Dashboard.
14+
3. Note the `Application ID` for future reference.
15+
4. [Contact sales](https://sendbird.com/contact-sales) to get the `Calls` menu enabled in the dashboard. (Self-serve coming soon.)
16+
17+
## Creating test users
18+
1. In the SendBird dashboard, navigate to the `Users` menu.
19+
2. Create at least two new users, one that will be the `caller`, and one that will be the `callee`.
20+
3. Note the `User ID` of each user for future reference.
21+
22+
## Installing and running the sample application
23+
1\. Clone this repository
24+
```shell script
25+
$ git clone git@github.com:sendbird/quickstart-calls-js.git
26+
```
27+
2\. Install dependencies
28+
```shell script
29+
$ cd quickstart-calls-js
30+
$ npm install
31+
```
32+
3\. In `envs.js`, replace the value of `TEST_APP_ID` with your `Application ID`.
33+
```javascript
34+
export const TEST_APP_ID = 'YOUR_APP_ID';
35+
```
36+
4\. Build
37+
```shell script
38+
$ npm run build
39+
```
40+
5\. Start sample app
41+
```shell script
42+
# Start with webpack-dev-sever
43+
$ npm run start:dev
44+
45+
# Start with express server
46+
$ npm run start
47+
```
48+
6\. If two devices are available, repeat these steps to install the sample application on both the primary device and the secondary device.
49+
50+
## Making calls
51+
1. On each devices, open browser and go to sample page. The default url is `localhost:9000`
52+
2. On each browsers, choose any sample type to use (full-screen sample or widget sample).
53+
3. On primary browser, log in to the sample application with the ID of the user designated as the `caller`.
54+
4. On secondary browser, log in to the sample application with the ID of the user designated as the `callee`.
55+
5. On primary browser, specify the user ID of the `callee` and initiate a call.
56+
6. If all steps have been followed correctly, an incoming call notification will appear on the `callee` user’s browser.
57+
7. Reverse roles, and initiate a call from the other browser.
58+
8. If the `caller` and `callee` devices are near each other, use headphones to prevent audio feedback.
59+
9. The SendBird Calls JavaScript Sample has been successfully implemented.
60+
61+
## Reference
62+
[SendBird Calls JS SDK Readme](https://github.com/sendbird/sendbird-calls-javascript/blob/master/README.md)

‎app.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const express = require('express');
2+
const app = new express();
3+
const port = 9000;
4+
5+
app.use(express.static('dist'));
6+
app.use(express.static('./'));
7+
8+
app.get('/', (req, res) => {
9+
res.sendfile('index.html');
10+
});
11+
12+
app.listen(port, () => {
13+
console.log(`SAMPLE SERVER LISTENING ON 127.0.0.1:${port}`);
14+
});

‎babel.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
['@babel/preset-env', {
4+
modules: false,
5+
targets: {
6+
'browsers': '> 1% and not op_mini all and not dead, ie 11'
7+
},
8+
corejs: 3,
9+
useBuiltIns: "usage"
10+
}]
11+
]
12+
};

‎css/global.css‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
:root {
2+
--navy-50: #f6f8fc;
3+
--navy-100: #dee2f2;
4+
--navy-200: #c9d0e6;
5+
--navy-900: #212242;
6+
--white: #ffffff;
7+
--purple-300: #825eeb;
8+
--green-300: #1fcca1;
9+
--green-400: #00998c;
10+
--red-300: #f24d6b;
11+
--red-400: #d92148;
12+
--mute-gray: rgba(255, 255, 255, 0.2);
13+
}
14+
15+
body {
16+
margin: 0 auto;
17+
}
18+
19+
.center {
20+
align-items: center;
21+
justify-content: center;
22+
}
23+
24+
.column {
25+
display: flex;
26+
flex-direction: column;
27+
}
28+
29+
.row {
30+
display: flex;
31+
flex-direction: row;
32+
}
33+
34+
.row-reverse {
35+
display:flex;
36+
flex-direction: row-reverse;
37+
}
38+
39+
.btn {
40+
display: flex;
41+
cursor: pointer;
42+
align-items: center;
43+
justify-content: center;
44+
text-decoration: none;
45+
border-radius: 4px;
46+
font-family: Avenir Next;
47+
font-size: 14px;
48+
font-weight: normal;
49+
font-stretch: normal;
50+
font-style: normal;
51+
line-height: 1.43;
52+
letter-spacing: normal;
53+
text-align: center;
54+
height: 40px;
55+
}
56+
57+
.btn-circle {
58+
width: 64px;
59+
height: 64px;
60+
border-radius: 50%;
61+
cursor: pointer;
62+
}
63+
64+
.btn-circle::before {
65+
content: '';
66+
display: block;
67+
width: 64px;
68+
height: 64px;
69+
border-radius: 50%;
70+
}
71+
72+
.btn-circle:hover::before {
73+
background-color: rgba(255, 255, 255, 0.2);
74+
}
75+
76+
.btn-primary {
77+
background-color: var(--purple-300);
78+
color: var(--white);
79+
}
80+
81+
.btn.btn-big {
82+
width: 180px;
83+
height: 50px;
84+
margin-left: 16px;
85+
margin-right: 16px;
86+
}
87+
88+
.btn.btn-mid {
89+
width: 80px;
90+
height: 40px;
91+
}
92+
93+
.btn-block {
94+
width: 100%;
95+
}
96+
97+
.title {
98+
height: 32px;
99+
font-family: Avenir Next;
100+
font-size: 24px;
101+
font-weight: normal;
102+
font-stretch: normal;
103+
font-style: normal;
104+
line-height: 1.33;
105+
letter-spacing: -0.25px;
106+
color: inherit;
107+
}
108+
109+
.input-title {
110+
display: inline-block;
111+
margin-top: 6px;
112+
height: 12px;
113+
font-family: Avenir Next;
114+
font-size: 12px;
115+
font-weight: 500;
116+
font-stretch: normal;
117+
font-style: normal;
118+
line-height: 1;
119+
letter-spacing: normal;
120+
color: var(--navy-900);
121+
margin-bottom: 6px;
122+
}
123+
124+
.input-title:first-of-type {
125+
margin-top: 38px;
126+
}
127+
128+
.desc {
129+
font-family: Avenir Next;
130+
font-size: 14px;
131+
font-weight: 500;
132+
font-stretch: normal;
133+
font-style: normal;
134+
line-height: 1.43;
135+
letter-spacing: -0.1px;
136+
color: inherit;
137+
}
138+
139+
.desc-light {
140+
font-family: Avenir Next;
141+
font-size: 14px;
142+
font-weight: normal;
143+
font-stretch: normal;
144+
font-style: normal;
145+
line-height: 1.43;
146+
letter-spacing: normal;
147+
text-align: center;
148+
color: var(--white);
149+
}
150+
151+
.label-btn {
152+
font-family: Avenir Next;
153+
font-size: 14px;
154+
font-weight: 300;
155+
font-stretch: normal;
156+
font-style: normal;
157+
line-height: 1.43;
158+
letter-spacing: -0.15px;
159+
text-align: center;
160+
color: inherit;
161+
}
162+
163+
.wrapper {
164+
display: flex;
165+
width: 100vw;
166+
height: 100vh;
167+
}
168+
169+
.container {
170+
display: flex;
171+
width: 100%;
172+
height: 100%;
173+
}
174+
175+
.backdrop {
176+
-webkit-backdrop-filter: blur(2px);
177+
backdrop-filter: blur(2px);
178+
}
179+
180+
.bg-white {
181+
background-color: var(--white);
182+
color: var(--navy-900);
183+
}
184+
185+
.bg-light {
186+
background-color: var(--navy-50);
187+
color: var(--navy-900);
188+
}
189+
190+
.bg-dark {
191+
background-color: var(--navy-900);
192+
color: var(--white);
193+
}
194+
195+
.bg-white .desc {
196+
color: #595e8a;
197+
}
198+
199+
.bg-light .desc {
200+
color: #595e8a;
201+
}
202+
203+
.bg-dark .desc {
204+
color: var(--white);
205+
}
206+
207+
.hidden {
208+
display: none;
209+
}
210+
211+
212+
213+
button label {
214+
cursor: inherit;
215+
}

0 commit comments

Comments
 (0)