Erstellen einer clientseitigen Anwendung
Erstellen Sie eine HTML-Datei mit dem Namen client_js.html in Ihrem Projektverzeichnis. Fügen Sie den folgenden Code ein, aber achten Sie darauf, dass Sie den JWT, den Sie für den Benutzer generiert haben, in das Feld früherer Schritt in diesem Lernprogramm in die USER_JWT konstant:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
<style>
input, button { font-size: 1rem; }
#hangup { display:none; }
</style>
</head>
<body>
<h1>Call Phone from App</h1>
<label for="phone-number">Your Phone Number:</label>
<input type="text" name="phone-number" value=""
placeholder="i.e. 14155550100" id="phone-number" size="30">
<button type="button" id="call">Call</button>
<button type="button" id="hangup">Hang Up</button>
<div id="status"></div>
<script>
const USER_JWT = "PASTE YOUR JWT HERE";
const callButton = document.getElementById("call");
const hangupButton = document.getElementById("hangup");
const statusElement = document.getElementById("status");
new NexmoClient({ debug: true })
.createSession(USER_JWT)
.then(app => {
callButton.addEventListener("click", event => {
event.preventDefault();
let destination = document.getElementById("phone-number").value;
if (destination !== ""){
app.callServer(destination);
} else {
statusElement.innerText = 'Please enter your phone number.';
}
});
app.on("member:call", (member, call) => {
hangupButton.addEventListener("click", () => {
call.hangUp();
});
});
app.on("call:status:changed",(call) => {
statusElement.innerText = `Call status: ${call.status}`;
if (call.status === call.CALL_STATUS.STARTED){
callButton.style.display = "none";
hangupButton.style.display = "inline";
}
if (call.status === call.CALL_STATUS.COMPLETED){
callButton.style.display = "inline";
hangupButton.style.display = "none";
}
});
})
.catch(console.error);
</script>
</body>
</html>
Dies ist Ihre Webseite, die das Client SDK verwendet, um einen Sprachanruf über Vonage an das Zieltelefon zu tätigen.
Dieser Kodex besteht aus mehreren Schlüsselkomponenten:
- Eine Benutzeroberfläche, über die Sie eine Telefonnummer eingeben und dann auf die Schaltfläche
Callum den Sprachanruf zu tätigen. - Code, der den Benutzer anmeldet (ein JWT wird für die Authentifizierung verwendet).
- Die aufzurufende Funktion
callServer(number), wobeinumberist die Zielrufnummer in E.164 Format.
Sobald Sie die Telefonnummer eingegeben und auf die Schaltfläche Call drücken, hören Sie eine Stimme, die Ihnen den Anrufstatus mitteilt, entsprechend der ersten NCCO-Anweisung, die vom Webhook-Server, den Sie in einem der vorherigen Schritte erstellt haben, zurückgesendet wurde:
{
"action": "talk",
"text": "Please wait while we connect you."
}
Dann wird der Anruf verbunden und Sie können ihn annehmen und über die App ein Gespräch führen.
In-App-Sprachanrufe tätigen
Tätigen Sie einen Sprachanruf von einer Web-App zu einem Telefon.