Skip to content

Commit b9f373d

Browse files
conshusconshus
committed
updates tutorial code
1 parent 626f947 commit b9f373d

File tree

7 files changed

+221
-128
lines changed

7 files changed

+221
-128
lines changed

‎app-to-app-js/client_alice.html

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,69 @@
33

44
<head>
55
<script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
6+
<style>
7+
input, button {
8+
font-size: 1rem;
9+
}
10+
#call, #hangup {
11+
display: none;
12+
}
13+
</style>
614
</head>
715

816
<body>
917
<h1>Outbound App Call (Alice)</h1>
1018
<button type="button" id="call">Call</button>
1119
<button type="button" id="hangup">Hang Up</button>
12-
<script>
1320

21+
<script>
22+
const callButton = document.getElementById("call");
23+
const hangUpButton = document.getElementById("hangup");
1424
const token = 'ALICE_JWT';
1525
const client = new vonageClientSDK.VonageClient();
16-
const config = new vonageClientSDK.ClientConfig(
17-
vonageClientSDK.ConfigRegion.US
18-
);
19-
client.setConfig(config);
20-
2126
let callId = null;
22-
client.createSession(token).then((sessionId) => {
23-
console.log(sessionId);
2427

25-
const callButton = document.getElementById("call");
26-
const hangUpButton = document.getElementById("hangup");
28+
client.createSession(token)
29+
.then((sessionId) => {
30+
console.log("Id of created session: ", sessionId);
31+
callButton.style.display = "inline";
32+
})
33+
.catch((error) => {
34+
console.error("Error creating session: ", error);
35+
});
36+
37+
client.on('legStatusUpdate', (callId, legId, status) => {
38+
if (status.name === "ANSWERED") {
39+
callButton.style.display = "none";
40+
hangUpButton.style.display = "inline";
41+
}
42+
if (status.name === "COMPLETED") {
43+
callButton.style.display = "inline";
44+
hangUpButton.style.display = "none";
45+
}
46+
});
2747

28-
callButton.addEventListener("click", () => {
29-
console.log("Calling Bob...");
30-
client.serverCall({ to: 'Bob' }).then((_callId) => {
48+
callButton.addEventListener("click", () => {
49+
console.log("Calling Bob...");
50+
client.serverCall({ to: 'Bob' })
51+
.then((_callId) => {
3152
callId = _callId;
53+
})
54+
.catch((error)=>{
55+
console.error(`Error making call: ${error}`);
3256
});
33-
});
34-
35-
hangUpButton.addEventListener("click", () => {
36-
console.log("Hanging up...");
37-
client.hangup(callId);
38-
});
57+
});
3958

40-
}).catch((error) => {
41-
console.error(error);
59+
hangUpButton.addEventListener("click", () => {
60+
console.log("Hanging up...");
61+
client.hangup(callId)
62+
.then(() => {
63+
hangupButton.style.display = "none";
64+
callButton.style.display = "inline";
65+
})
66+
.catch(error => {
67+
console.error("Error hanging up call: ", error);
68+
});
4269
});
4370
</script>
4471
</body>

‎app-to-app-js/client_bob.html

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,60 @@
33

44
<head>
55
<script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
6+
<style>
7+
input, button {
8+
font-size: 1rem;
9+
}
10+
#answer {
11+
display: none;
12+
}
13+
</style>
614
</head>
715

816
<body>
917
<h1>Inbound App Call (Bob)</h1>
1018
<p id="notification">Lines are open for calls...</p>
1119
<br />
12-
<button id="button">Answer</button>
13-
<script>
20+
<button id="answer">Answer</button>
1421

22+
<script>
23+
const answerButton = document.getElementById("answer");
24+
const notification = document.getElementById("notification");
1525
const token = 'BOB_JWT';
1626
const client = new vonageClientSDK.VonageClient();
17-
const config = new vonageClientSDK.ClientConfig(
18-
vonageClientSDK.ConfigRegion.US
19-
);
20-
client.setConfig(config);
21-
2227
let callId = null;
23-
client.createSession(token).then((sessionId) => {
24-
console.log(sessionId);
25-
26-
const answerButton = document.getElementById("button");
27-
const notification = document.getElementById("notification");
28-
29-
client.on('callInvite', (_callId) => {
30-
callId = _callId;
31-
notification.textContent = "You are receiving a call";
32-
// Answer the call.
33-
answerButton.addEventListener("click", () => {
34-
client.answerCall(callId);
35-
notification.textContent = "You are on a call";
36-
});
37-
});
3828

39-
client.on('callHangup', (callId, callQuality, reason) => {
40-
callId = null;
41-
notification.textContent = "Lines are open for calls...";
29+
client.createSession(token)
30+
.then((sessionId) => {
31+
console.log(sessionId);
32+
})
33+
.catch((error) => {
34+
console.error(error);
4235
});
43-
}).catch((error) => {
44-
console.error(error);
36+
37+
client.on('callInvite', (_callId) => {
38+
callId = _callId;
39+
notification.textContent = "You are receiving a call";
40+
answerButton.style.display = "inline";
41+
});
42+
43+
client.on('callHangup', (callId, callQuality, reason) => {
44+
callId = null;
45+
notification.textContent = "Lines are open for calls...";
46+
answerButton.style.display = "none";
47+
});
48+
49+
// Answer the call.
50+
answerButton.addEventListener("click", () => {
51+
client.answer(callId)
52+
.then(() => {
53+
console.log("Success answering call.");
54+
notification.textContent = "You are on a call";
55+
answerButton.style.display = "none";
56+
})
57+
.catch(error => {
58+
console.error("Error answering call: ", error);
59+
});
4560
});
4661
</script>
4762
</body>

‎app-to-app-js/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"dependencies": {
1313
"express": "4.18.2",
1414
"localtunnel": "2.0.2",
15-
"@vonage/client-sdk": "1.0.3"
15+
"@vonage/client-sdk": "1.*"
1616
}
1717
}

‎app-to-phone-js/client_js.html

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
input, button {
88
font-size: 1rem;
99
}
10-
#hangup {
10+
#call, #hangup {
1111
display: none;
1212
}
1313
</style>
@@ -20,56 +20,62 @@ <h1>Call Phone from App</h1>
2020
<button type="button" id="call">Call</button>
2121
<button type="button" id="hangup">Hang Up</button>
2222
<div id="status"></div>
23+
2324
<script>
24-
25-
let token = 'ALICE_JWT';
25+
const callButton = document.getElementById("call");
26+
const hangUpButton = document.getElementById("hangup");
27+
const statusElement = document.getElementById("status");
28+
const token = 'ALICE_JWT';
2629
const client = new vonageClientSDK.VonageClient();
27-
const config = new vonageClientSDK.ClientConfig(
28-
vonageClientSDK.ConfigRegion.US
29-
);
30-
client.setConfig(config);
31-
3230
let callId = null;
33-
client.createSession(token).then((sessionId) => {
34-
console.log(sessionId);
3531

36-
const callButton = document.getElementById("call");
37-
const hangUpButton = document.getElementById("hangup");
38-
const statusElement = document.getElementById("status");
32+
client.createSession(token)
33+
.then((sessionId) => {
34+
console.log("Id of created session: ", sessionId);
35+
callButton.style.display = "inline";
36+
})
37+
.catch((error) => {
38+
console.error("Error creating session: ", error);
39+
});
40+
41+
client.on('legStatusUpdate', (callId, legId, status) => {
42+
if (status.name === "ANSWERED") {
43+
callButton.style.display = "none";
44+
hangUpButton.style.display = "inline";
45+
}
46+
if (status.name === "COMPLETED") {
47+
callId = null;
48+
callButton.style.display = "inline";
49+
hangUpButton.style.display = "none";
50+
}
51+
});
3952

40-
callButton.addEventListener("click", event => {
41-
let destination = document.getElementById("phone-number").value;
42-
if (destination !== "") {
43-
client.serverCall({ to: destination }).then((_callId) => {
53+
callButton.addEventListener("click", event => {
54+
const destination = document.getElementById("phone-number").value;
55+
if (destination !== "") {
56+
client.serverCall({ to: destination })
57+
.then((_callId) => {
4458
callId = _callId;
59+
})
60+
.catch((error)=>{
61+
console.error(`Error making call: ${error}`);
4562
});
46-
} else {
47-
statusElement.innerText = 'Please enter your phone number.';
48-
}
49-
});
63+
} else {
64+
statusElement.innerText = 'Please enter your phone number.';
65+
}
66+
});
5067

51-
hangUpButton.addEventListener("click", () => {
52-
client.hangup(callId).then(() => {
53-
callButton.style.display = "inline";
68+
hangUpButton.addEventListener("click", () => {
69+
client.hangup(callId)
70+
.then(() => {
5471
hangupButton.style.display = "none";
55-
});
56-
});
57-
58-
client.on('legStatusUpdate', (callId, legId, status) => {
59-
if (status === vonageClientSDK.LegStatus.ANSWERED) {
60-
callButton.style.display = "none";
61-
hangUpButton.style.display = "inline";
62-
}
63-
if (status === vonageClientSDK.LegStatus.COMPLETED) {
6472
callButton.style.display = "inline";
65-
hangUpButton.style.display = "none";
66-
}
67-
});
68-
69-
}).catch((error) => {
70-
console.error(error);
73+
})
74+
.catch(error => {
75+
console.error("Error hanging up call: ", error);
76+
});
7177
});
7278
</script>
7379
</body>
7480

75-
</html>
81+
</html>

‎app-to-phone-js/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"dependencies": {
1313
"express": "4.18.2",
1414
"localtunnel": "2.0.2",
15-
"@vonage/client-sdk": "1.0.3"
15+
"@vonage/client-sdk": "1.*"
1616
}
1717
}

0 commit comments

Comments
 (0)