Skip to content

Commit f6e9144

Browse files
yakimenko73yakimenko73
committed
feat: add static page for developer instructions
0 parents  commit f6e9144

11 files changed

+403
-0
lines changed

‎css/style.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
body {
2+
background-color: #ffffff;
3+
padding: 40px 40px 40px 40px;
4+
}
5+
6+
.wrapper {
7+
background-color: #ffffff;
8+
}
9+
10+
/* Main Content */
11+
.main-content {
12+
padding-left: 200px;
13+
padding-top: 80px;
14+
padding-right: 200px;
15+
padding-bottom: 80px;
16+
max-width: 1000px;
17+
18+
}
19+
20+
/* Title h1 */
21+
.h1 {
22+
color: #123752;
23+
font-size: 42px;
24+
font-family: 'Inter', sans-serif;
25+
font-weight: 800;
26+
line-height: 1.35;
27+
text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
28+
font-style: inherit;
29+
margin-top: 20px;
30+
margin-bottom: 15px;
31+
box-sizing: border-box;
32+
}
33+
/* Title h2 */
34+
.h2 {
35+
color: #123752;
36+
font-size: 36px;
37+
font-family: 'Montserrat', sans-serif;
38+
font-weight: 700;
39+
line-height: 1.2;
40+
margin-top: 20px;
41+
margin-bottom: 15px;
42+
font-style: inherit;
43+
box-sizing: border-box;
44+
}
45+
/* Title h3 */
46+
.h3 {
47+
color: #4c4d4a;
48+
font-size: 26px;
49+
font-family: 'Montserrat', sans-serif;
50+
font-weight: 700;
51+
line-height: 1.35em;
52+
margin-top: 20px;
53+
margin-bottom: 20px;
54+
font-style: inherit;
55+
box-sizing: border-box;
56+
}
57+
/* Paragraph */
58+
.p {
59+
font-family: 'Inter', sans-serif;
60+
font-size: 18px;
61+
font-weight: 400;
62+
line-height: 1.75em;
63+
color: #4C4D4A;
64+
margin-top: 20px;
65+
margin-bottom: 1.5em;
66+
word-wrap: break-word;
67+
box-sizing: border-box;
68+
}
69+
/* List */
70+
.li {
71+
72+
line-height: 1.75;
73+
}
74+
.li-item {
75+
color: #4c4d4a;
76+
font-size: 14px;
77+
font-family: 'Inter-normal', sans-serif;
78+
font-weight: 400;
79+
line-height: 1.75;
80+
}
81+
82+
.pre {
83+
margin: 0;
84+
padding: 0;
85+
white-space: pre-wrap;
86+
}
87+
88+
/* Two images */
89+
.image-container {
90+
display: flex;
91+
justify-content: space-between;
92+
gap: 10px;
93+
width: 45%;
94+
height: auto;
95+
margin-right: 90px;
96+
}
97+
98+
code {
99+
color: red;
100+
font-family: monospace;
101+
}
102+
103+
img {
104+
max-width: 100%;
105+
height: auto;
106+
display: block;
107+
margin: 0 auto;
108+
}
109+
110+
@media only screen and (max-width: 768px) {
111+
.image-container {
112+
flex-direction: column;
113+
align-items: center;
114+
}
115+
116+
img {
117+
max-width: 100%;
118+
height: auto;
119+
}
120+
}
121+
122+
@media only screen and (max-width: 480px) {
123+
img {
124+
max-width: 100%;
125+
height: auto;
126+
}
127+
}

‎img/Code example_1.png‎

69.2 KB
Loading

‎img/Code example_2.png‎

46.5 KB
Loading

‎img/Code example_3.png‎

85.5 KB
Loading

‎img/WebTrit contact center.png‎

125 KB
Loading

‎img/WebTrit contact center_2.png‎

276 KB
Loading

‎img/WebTrit screenshot.jpg‎

34.1 KB
Loading

‎img/WebTrit screenshot_2.jpg‎

48 KB
Loading

‎img/one-time password.png‎

139 KB
Loading

‎index.html‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>WebTrit Demo</title>
8+
<link rel="stylesheet" href="css/style.css"/>
9+
<style>
10+
@media only screen and (max-width: 768px) {
11+
.wrapper {
12+
padding: 10px;
13+
}
14+
15+
.main-content {
16+
padding: 10px;
17+
}
18+
19+
h1 {
20+
font-size: 1.5em;
21+
}
22+
23+
h2,
24+
h3 {
25+
font-size: 1.2em;
26+
}
27+
28+
.Paragraph {
29+
font-size: 1em;
30+
}
31+
32+
.image-container {
33+
flex-direction: column;
34+
align-items: center;
35+
}
36+
37+
.image {
38+
width: 100%;
39+
max-width: 400px;
40+
}
41+
42+
.pre {
43+
font-size: 0.9em;
44+
word-wrap: break-word;
45+
}
46+
}
47+
48+
@media only screen and (max-width: 480px) {
49+
h1 {
50+
font-size: 1.3em;
51+
}
52+
53+
h2,
54+
h3 {
55+
font-size: 1em;
56+
}
57+
58+
.Paragraph {
59+
font-size: 0.9em;
60+
}
61+
62+
.pre {
63+
font-size: 0.8em;
64+
}
65+
}
66+
</style>
67+
<script src="scripts/main.js"></script>
68+
</head>
69+
70+
<body>
71+
<!-- Wrapper -->
72+
<div class="wrapper">
73+
<!-- Main content -->
74+
<div class="main-content">
75+
<h1 class="h1">How to connect to WebTrit demo environment to jump-start the development of your WebRTC voice or
76+
video chat application</h1>
77+
<h2 class="h2">Sign up for WebTrit demo account</h2>
78+
<p class="Paragraph">Please create a free account via <a href="https://signup.webtrit.com/"
79+
target="_blank">https://signup.webtrit.com/</a>.
80+
</p>
81+
<p class="Paragraph">Once you have logged into the WebTrit self-care portal, you will see the button “Send me
82+
the
83+
developer’s credentials” - click on it and the parameters for accessing WebTrit back-end from your
84+
application
85+
(such as the URL of the API server, tenant_id, your username + password, etc.) will be delivered to your
86+
email.
87+
That email will have the content very similar to the text below, but with the properly populated URL and
88+
other
89+
parameters, so it makes sense to follow there. 🙂</p>
90+
<p class="Paragraph">In the examples in the rest of this document we will use <code>{CORE_HOST}</code>
91+
as the API server, but please use the actual API server address provided in the
92+
email, since it may change in the future.
93+
</p>
94+
<h3 class="h3"> What is tenant ID and why do you need it?</h3>
95+
<p class="Paragraph"> You will be using our demo system, shared between multiple companies, so in order to
96+
separate you from the other customers we create isolated environments, called tenants. You can read more
97+
details
98+
about this in the “Multitenancy in WebTrit” article. Make sure you add tenant ID into the API URL, so if
99+
your
100+
tenant ID is ABCD123 and you want to call /session method to login - the URL should look like
101+
https://{CORE_HOST}/tenant/ABCD123/session.</p>
102+
<H2 class="h2">Verify that your account works</H2>
103+
<h3 class="h3">Test using WebDialer</h3>
104+
<p class="Paragraph">You can open WebTrit dialer for tests using<a
105+
href="https://dialer.demo.webtrit.com/login?tenant=<tenant_id>&email=<email>" target="_blank">
106+
https://dialer.demo.webtrit.com/login?tenant=
107+
<tenant_id>&email=&lt;email&gt;
108+
</a>. The one-time password (OTP)
109+
will be sent to your email.
110+
</p>
111+
<img src="img/one-time%20password.png" alt="WebTrit dialer" class="img">
112+
<p class="Paragraph">Once logged in you can call WebTrit contact center</p>
113+
<img src="img/WebTrit%20contact%20center.png" alt="WebTrit contact center" class="img">
114+
<p class="Paragraph">The great thing about the WebTrit Dialer is that you can use explore <a
115+
href="https://bit.ly/WebDialerSourceCode" target="_blank">the source code</a> and monitor the
116+
communication
117+
between the application and WebTrit back-end, so you can use it as an example for your own application.</p>
118+
<img src="img/WebTrit%20contact%20center_2.png" alt="WebTrit contact center" class="img">
119+
<p class="Paragraph">Alternatively, you download the WebTrit app for smartphones and test the functionality on
120+
the
121+
mobile device:</p>
122+
<ul>
123+
<li class="li-item"><a href="https://bit.ly/WebTritDemoIphone"
124+
target="_blank">https://bit.ly/WebTritDemoIphone</a></li>
125+
<li class="li-item"><a href="https://bit.ly/WebTritDemoAndroid"
126+
target="_blank">https://bit.ly/WebTritDemoAndroid</a></li>
127+
</ul>
128+
<h2 class="h2">Authenticate with WebTrit back-end and obtain a session token</h2>
129+
<p class="Paragraph">The first thing your application has to do is to establish an authenticated session with
130+
WebTrit back-end - this is done by sending an HTTP POST request to the /session endpoint of <a
131+
href="https://bit.ly/WebTritCoreAPI" target="_blank">WebTrit core API</a>. Make sure you insert the
132+
appropriate values into tenant_id, username and password. Also, create your own name for your application
133+
and
134+
use it as the value for the identifier parameter.</p>
135+
<pre class="pre">
136+
curl -X 'POST' \
137+
'https://<span style="color: red;">{CORE_HOST}</span>/tenant/<span style="color: red;">{TENANT_ID}</span>/api/v1/session' \
138+
-H 'accept: application/json' \
139+
-H 'X-Request-ID: demo-test' \
140+
-H 'Content-Type: application/json' \
141+
-d '{
142+
"bundle_id": "com.webtrit.app",
143+
"identifier": "<span style="color: red;">change-and-use-your-own-name</span>",
144+
"password": "<span style="color: red;">&lt;password&gt;</span>",
145+
"type": "web",
146+
"user_ref": "<span style="color: red;">{USERNAME}</span>"
147+
}'
148+
</pre>
149+
<p class="Paragraph">Example:</p>
150+
<img src="img/Code%20example_2.png" alt="code example" class="img">
151+
<p class="Paragraph">When authentication is successful, you will receive the access token to be used to
152+
authenticate further requests to the Core API - as well as requests to Signaling API.</p>
153+
<h2 class="h2">Test the core API
154+
</h2>
155+
<p class="Paragraph">This API is used for communication with WebTrit back-end to display the data about the user
156+
and the cloud PBX environment (for instance the list of cloud PBX contacts - other configured extensions in
157+
the
158+
PBX). To test it, we will send GET requests to /user (basic user information) and /user/contacts (the list
159+
of
160+
PBX extensions).
161+
</p>
162+
<p class="Paragraph">When sending your requests, make sure that you replace the value of
163+
<tenant_id> with the
164+
correct value - and of course you have to use a valid token in the “Authorization” field.
165+
</p>
166+
<pre class="pre">
167+
curl -X 'GET' \
168+
'https://<span style="color: red;">{CORE_HOST}</span>/tenant/<span style="color: red;">{TENANT_ID}</span>/api/v1/user' \
169+
-H 'accept: application/json' \
170+
-H 'Authorization: Bearer <span style="color: red;">&lt;token&gt;</span>'
171+
172+
curl -X 'GET' \
173+
'https://<span style="color: red;">{CORE_HOST}</span>/tenant/<span style="color: red;">{TENANT_ID}</span>/api/v1/user/contacts' \
174+
-H 'accept: application/json' \
175+
-H 'Authorization: Bearer <span style="color: red;">&lt;token&gt;</span>'
176+
</pre>
177+
<img src="img/Code%20example_1.png" alt="code example" class="img">
178+
<h2 class="h2">Jump-start your development using the WebTrit dialer</h2>
179+
<p class="Paragraph">
180+
If you want to develop a web application for WebRTC voice/video calling - you do not have to start from
181+
scratch.
182+
There is <a href="https://bit.ly/WebDialerSourceCode" target="_blank">WebTrit dialer GitHub project</a> with
183+
the
184+
source code for a fully working web dialer application - just download it and put the correct server URL
185+
<code>{CORE_HOST}</code> as a value for <code>VUE_APP_WEBTRIT_CORE_URL</code> parameter in the
186+
<code>.env</code> file. More information about the available parameters and how to start a local copy of the
187+
Web
188+
Dialer for development is described in the <a
189+
href="https://github.com/webTrit/webtrit_dialer?tab=readme-ov-file#webtrit-dialer"
190+
target="_blank">README.md</a>.
191+
</p>
192+
<p class="Paragraph">
193+
Additionally, you might encounter an issue with dependency relying on an obsolete version of SSL. This can
194+
be
195+
resolved by specifying an option when starting the dialer: <i>NODE_OPTIONS=--openssl-legacy-provider</i>.
196+
</p>
197+
<h2 class="h2">Connect to WebTrit signaling API
198+
</h2>
199+
<p class="Paragraph"> Using the access token you obtained after the authentication - you can now use the <a
200+
href="https://github.com/WebTrit/webtrit_docs/blob/main/signaling/index.md" target="blank">WebTrit
201+
Signaling
202+
API</a> (WSTP). Note, that just like with the WebTrit Core API you need to insert the
203+
<code>{TENANT_ID}/tenant/</code> into the API URL.
204+
</p>
205+
<p class="Paragraph">WTSP URL structure:
206+
</p>
207+
<pre class="pre">
208+
wss://<span style="color: red;">{CORE_HOST}</span>[:&lt;WebTrit Core port&gt;]/tenant/{TENANT_ID}/signaling/v1?token=&lt;token&gt;&amp;force=&lt;true&gt;
209+
</pre>
210+
<p class="Paragraph">For instance:
211+
</p>
212+
<pre class="pre">
213+
wss://<span style="color: red;">{CORE_HOST}</span>/tenant/b7b8c725-0342-4b26-ab03-f47d0a69064f/signaling/v1?token=XCP.fzEQZz8Ni_sElW5JWQOW09XNmvG8r5lqZoTOh0N9O_z0lLWdK6Gi-CDsQUo07-yeKu8vzjdDPxKKIhgQJp5Nij-4BQIDn4O-lygCDdWBqmN49kvR70J3e0HgICth7FgttuQ
214+
</pre>
215+
<img src="img/Code%20example_3.png" alt="code example" class="img">
216+
<h2 class="h2">Initiate a phone call</h2>
217+
<p class="Paragraph">After the session to <a
218+
href="https://github.com/WebTrit/webtrit_docs/blob/main/signaling/index.md" target="_blank">WebTrit
219+
Signaling
220+
API</a> has been established - let’s make a phone call.</p>
221+
<p class="Paragraph">Whom to call? You can always call the12060000033 number - it is a friendly IVR, so the call
222+
always will be answered. When you have the basic calling working, you can (either in the app itself or on
223+
signup.webtrit.com) invite your friends / colleagues / your alter-ego with a different email address. Every
224+
user, registered on the demo server, will be automatically assigned a “virtual” phone number (you may have
225+
seen
226+
12065551350 in the screenshots above). These numbers look like real ones, but you can only call it within
227+
the
228+
demo server. This number is visible in the “My Account”, accessible by clicking on the round icon in the
229+
upper
230+
right corner of the app.
231+
</p>
232+
<!-- Two images -->
233+
<div class="image-container">
234+
<img src="img/WebTrit%20screenshot.jpg" alt="WebTrit screenshot">
235+
<img src="img/WebTrit%20screenshot_2.jpg" alt="WebTrit screenshot">
236+
</div>
237+
<h2 class="h2">Logging out</h2>
238+
<p class="Paragraph">When you are finished, it is strongly recommended to explicitly close the session - since
239+
if
240+
you do not do it and just stop your application, the session between WebTrit back-end and cloud PBX still
241+
will
242+
be active; WebTrit will maintain SIP registration to the VoIP PBX. In the long run this can create a
243+
resource
244+
overload.
245+
</p>
246+
<pre class="pre">
247+
curl -X 'DELETE' \
248+
'https://<span style="color: red;">{CORE_HOST}</span>/tenant/<span style="color: red;">{TENANT_ID}</span>/api/v1/session' \
249+
-H 'accept: */*' \
250+
-H 'Authorization: Bearer <span style="color: red;">&lt;token&gt;</span>'
251+
</pre>
252+
253+
</div>
254+
</div>
255+
</body>
256+
257+
</html>

0 commit comments

Comments
 (0)