Erste Schritte mit Anrufen von JavaScript-Paketen der Benutzeroberflächenbibliothek für Azure Communication Services an die Teams-Anrufwarteschleife und automatische Telefonzentrale
Wichtig
Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau.
Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Einige Features werden möglicherweise nicht unterstützt oder bieten nur eingeschränkte Funktionalität.
Weitere Informationen finden Sie in den ergänzenden Nutzungsbestimmungen für Microsoft Azure-Vorschauversionen.
Um die Kundenkommunikation zu unterstützen, bietet die UI-Bibliothek für Azure Communication Services JavaScript-Pakete, um plattformübergreifende Lösungen für die Verwendung der UI-Bibliothek zu testen. Dieses Tutorial ist die schnellste Möglichkeit, mithilfe der UI-Bibliothek und Teams in einen Anruf zu gelangen.
In diesem Tutorial werden folgende Schritte erläutert:
- eine Anruferfahrung auf einer beliebigen Webseite tätigen, die Ihre Kunden mit Ihrem Unternehmen verbindet.
- eine Anruferfahrung in anderen Plattformen als React erstellen
Voraussetzungen
Die folgenden Schritte müssen abgeschlossen werden, bevor Sie die gesamte Erfahrung abschließen können. Wenden Sie sich an Ihren Teams-Administrator, wenn Sie Fragen zum Einrichten der Teams-Voice-Anwendungen oder des Teams-Mandantenverbunds haben.
- Visual Studio Code auf einer der unterstützten Plattformen
- Node.js, Active LTS- und Maintenance LTS-Versionen Node 20 LTS wird empfohlen. Verwenden Sie den Befehl
node --version, um Ihre Version zu überprüfen. - Eine Azure Communication Services-Ressource. Erstellen Sie eine Kommunikationsressource.
- Führen Sie die Teams-Mandanteneinrichtung für Interoperabilität mit Ihrer Azure Communication Services-Ressource durch.
- Arbeiten mit Teams-Anrufwarteschleifen und Azure Communication Services.
- Arbeiten mit automatischen Teams-Telefonzentralen und Azure Communication Services.
Überprüfen auf Knoten- und VS-Code
Sie können mithilfe des folgenden Befehls überprüfen, ob Node ordnungsgemäß installiert wurde.
node -v
Die Ausgabe informiert Sie über die installierte Version. Der Befehl schlägt fehl, wenn Node nicht installiert und zu Ihrem PATH hinzugefügt wurde. Genau wie bei Node können Sie mit dem folgenden Befehl überprüfen, ob Visual Studio Code installiert wurde.
code --version
Wie bei Node schlägt dieser Befehl fehl, wenn ein Problem beim Installieren von VS Code auf Ihrem Computer aufgetreten ist.
Erste Schritte
Wir erstellen dieses Projekt mithilfe von 4 einfachen Schritten.
- Erstellen des Projekts
- Abrufen des Codes
- Einrichten von Azure Communication Services und Teams
- Ausführen der Anwendung
1. Erstellen des Projekts
Zunächst erstellen wir einen neuen Ordner für das Projekt. Dafür, führen wir den folgenden Befehl im Terminal oder in der Eingabeaufforderung aus.
Verwenden Sie für die Eingabeaufforderung unter Windows den folgenden Befehl:
mkdir ui-library-js-test-application; cd ui-library-js-test-application
Verwenden Sie für Terminal unter macOS den folgenden Befehl:
mkdir ui-library-js-test-application && cd ui-library-js-test-application
Diese Skripts erstellen einen neuen Ordner und rufen ihn auf.
Als Nächstes möchten wir eine neue Datei namens index.html erstellen. Dies ist die Webseite, an die wir die Anruferfahrung anfügen.
2. Abrufen des Codes
Laden Sie zunächst das JavaScript-Paket aus der JavaScript-Datei „Outbound Call Composite“ herunter. Platzieren Sie dieses Paket im selben Verzeichnis wie Ihre index.html.
Öffnen Sie dann index.html in VS Code, und fügen Sie das folgende Codeschnipsel hinzu.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Embedded call composite basic example</title>
<style>
/* These styles are something we provide for the calling experience, please update for your needs */
/* these apply to the calling experience you will need to style your button how your desire */
#outbound-call-composite-container-ready {
height: 22rem;
width: 32rem;
position: absolute;
bottom: 1rem;
right: 1rem;
box-shadow: 0 0 0.5rem 0;
border-radius: 1rem;
padding: 0.5rem;
z-index: 5;
}
</style>
</head>
<body>
<div id="outbound-call-composite-container"></div>
<button id="start-call-button">Your calling button</button>
<!-- replace with https://github.com/Azure/communication-ui-library/releases/latest/download/outboundCallComposite.js for development and prototyping -->
<script src="./outboundCallComposite.js"></script>
<script type="module">
const createCallingExperience = async () => {
const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";
const callAdapter = await outboundCallComposite.loadCallComposite(
{
userId: userId,
token: token,
displayName: displayName,
targetCallees: [
{ teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" },
], // Provide the identifier you want to call, can be flat as a string.
},
document.getElementById("outbound-call-composite-container"),
{
options: {
callControls: {
cameraButton: true,
screenShareButton: false,
moreButton: true,
peopleButton: false,
raiseHandButton: false,
displayType: "compact",
},
localVideoTile: { position: "floating" },
},
}
);
window.onbeforeunload = () => {
callAdapter.dispose();
};
// Update the container id to trigger the styles we set above
const container = document.getElementById("outbound-call-composite-container");
container.setAttribute("id", "outbound-call-composite-container-ready");
};
const startCallButton = document.getElementById("start-call-button");
startCallButton.onclick = createCallingExperience;
</script>
</body>
[WICHTIG] Beachten Sie, dass sich die Datei index.html und das JavaScript-Bündel outboundCallComposite.js im selben Ordner befinden müssen, wenn Sie keinen der Importe in dieser Datei bearbeiten möchten.
3. Einrichten von Azure Communication Services und Ihrer Teams-Voice-Anwendung
Als Nächstes möchten wir die Identität des lokalen Benutzers erstellen, damit wir sie verwenden können, um unseren lokalen Benutzer zu authentifizieren und den Anruf zu starten. Sobald Sie diese Werte für die id und das token für den Benutzer haben, möchten wir einige Änderungen in der zuvor erstellen Datei index.html vornehmen.
const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";
Wir möchten diese Informationen mit der userId und dem token aktualisieren, die Sie über das Azure-Portal oder die Azure CLI erhalten haben. Sie müssen außerdem Ihren displayName festlegen.
Als Nächstes möchten wir eine Bearbeitung vornehmen, um die Ressourcenkonto-ID für Ihre Teams-Voice-Anwendung festzulegen, die Sie zuvor beim Herstellen eines Verbunds mit Ihrer Azure Communication Services-Ressource abgerufen haben. Wenden Sie sich an Ihren Teams-Administrator, falls dies noch nicht geschehen ist.
const callAdapter = await outboundCallComposite.loadCallComposite(
{
userId: userId,
token: token,
displayName: displayName,
targetCallees: [
{ teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, // <- update this teamsAppId value.
],
},
document.getElementById("outbound-call-composite-container")
);
4. Ausführen der Anwendung
Nachdem wir nun das gesamte Setup abgeschlossen haben, können wir die Anwendung ausführen.
Öffnen Sie ein Terminal- oder Eingabeaufforderungsfenster in diesem Verzeichnis, und führen Sie den folgenden Befehl aus.
npx http-server@latest -p 3000
Dieses Skript startet mithilfe von Node einen HTTP-Server und hostet die Datei index.html und das JavaScript-Paket. Öffnen Sie http://localhost:3000. in einem Browser. Es sollte eine weiße Seite mit einer Schaltfläche angezeigt werden. Wenn Sie darauf klicken, sollte der folgende Bildschirm angezeigt werden.
[WICHTIG] Beachten Sie, dass Ihre Anruferfahrung aus Sicherheitsgründen nicht funktioniert, wenn Sie ohne Verwendung des lokalen Hosts versuchen, die Seite aufzurufen.
Klicken Sie auf die Schaltfläche start call, die in der UI-Bibliothek CallComposite angezeigt wird, um einen Anruf an Ihre Teams-Voice-App zu initiieren.
In die Produktion bringen
Derzeit befinden sich dieses Tutorial und die JS-Pakete in der öffentlichen Vorschauversion. Wenn Sie sich von „Click to Call“ begeistert sind und herausfinden möchten, wie Sie CallComposite verwenden können, um umgehend „Click to Call“-Erfahrungen für ihr Produkt zu erstellen, haben wir einen Diskussionsbeitrag in unserem GitHub-Repository bereitgestellt, der Ihnen zeigt, wie Sie die UI-Bibliothek in andere Node-Frameworks integrieren können. Die Schritte des Tutorials, das Sie gerade abgeschlossen haben, lassen sich direkt auf das in diesem Beitrag beschriebene Vorgehen zum Laden der UI-Bibliotheks-Composites in andere Frameworks als React übertragen.
Nächste Schritte
Weitere Informationen zu Teams-Voice-Anwendungen finden Sie in unserer Dokumentation zu automatischen Teams-Telefonzentralen und Teams-Anrufwarteschlangen. Alternativ können Sie sich auch unser Tutorial ansehen, um eine umfassendere Erfahrung mithilfe von React zu erstellen.
Schnellstart: Verknüpfen Ihrer Anruf-App mit einer Teams-Anrufwarteschlange
Schnellstart: Verknüpfen Ihrer Anruf-App mit einer automatischen Teams-Telefonzentrale