JavaScript
Create the code to make an in-app voice call
For this tutorial, Alice
will be calling Bob
.
Create an HTML file called client_alice.html
in your project directory and add the following code, making sure to paste Alice's JWT you generated in the earlier step to the aliceJWT
constant:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
</head>
<body>
<h1>App from App Call (Alice)</h1>
<button id="btn-call" type="button">Call</button>
<button id="btn-hangup" type="button">Hang Up</button>
<script>
const aliceJWT = "PASTE ALICE JWT HERE";
const btnCall = document.getElementById("btn-call");
const btnHangUp = document.getElementById("btn-hangup");
new NexmoClient({ debug: true })
.login(aliceJWT)
.then(app => {
btnCall.addEventListener("click", () => {
console.log("Calling Bob...");
app.callServer("Bob", "app");
});
app.on("member:call", (member, call) => {
btnHangUp.addEventListener("click", () => {
console.log("Hanging up...");
call.hangUp();
});
});
})
.catch(console.error);
</script>
</body>
</html>
This is your client application that uses the Client SDK to make a voice call to the destination user (Bob) .
There are several key components to this code:
- Code that logs the user (Alice) into the Client SDK (a JWT is used for authentication) using
.login(aliceJWT)
. - The function to make the call is
callServer(username, type)
, wheretype
in this case is "app", as the destination is the specified user (Bob). > NOTE: Another way to make Voice Calls is withinAppCall(username)
which uses peer-peer call functionality. More info oninAppCall()
- When a call is made, a button handler is loaded. When the
Hang Up
button is clickedcall.hangUp()
terminates the call.
Making an app to app voice call
You make a phone call from a web app to another web app.
Also available on:
Steps
10