Erste Schritte mit dem Webanrufbeispiel

Das Webanrufbeispiel ist eine Webanwendung, die als schrittweise exemplarische Vorgehensweise für die verschiedenen Funktionen des Communication Services Web Calling SDK fungiert.

Dieses Beispiel wurde für Entwickler erstellt und erleichtert Ihnen den Einstieg in Communication Services. Seine Benutzeroberfläche ist in mehrere Abschnitte unterteilt, die jeweils eine Schaltfläche „Show Code“ (Code anzeigen) aufweisen, mit der Sie Code direkt aus Ihrem Browser in Ihre eigene Communication Services-Anwendung kopieren können.

Erste Schritte mit dem Webanrufbeispiel

Halten Sie sich an „/Project/readme.md“, um das Projekt einzurichten und lokal auf Ihrem Computer auszuführen. Wenn das Webanrufbeispiel auf dem Computer ausgeführt wird, wird die folgende Landing Page angezeigt:

Web calling tutorial 1

Web calling tutorial 2

Benutzerbereitstellung und SDK-Initialisierung

Klicken Sie auf „Provisioning user and initialize SDK“ (Benutzer bereitstellen und SDK initialisieren), um das SDK mit einem Token zu initialisieren, das vom Back-End-Tokenbereitstellungsdienst bereitgestellt wird. Dieser Back-End-Dienst befindet sich in /project/webpack.config.js.

Klicken Sie auf die Schaltfläche „Show Code“ (Code anzeigen), um den Beispielcode anzuzeigen, den Sie in Ihrer eigenen Lösung verwenden können.

Nachdem das SDK initialisiert wurde, sollte Folgendes angezeigt werden:

User provisioning

Sie sind jetzt bereit, mit der Communication Services-Ressource Anrufe zu tätigen.

Tätigen und Annehmen von Anrufen

Das Communication Services Web Calling SDK ermöglicht 1:1-, 1:N- und Gruppenanrufe.

Bei ausgehenden 1:1- oder 1:N-Anrufen können Sie mehrere anzurufende Communication Services-Benutzeridentitäten angeben, indem Sie durch Trennzeichen getrennte Werte verwenden. Sie können auch anzurufende herkömmliche Telefonnummern (Public Switched Telephone Network, PSTN) angeben, indem Sie durch Komma getrennte Werte verwenden.

Wenn Sie PSTN-Telefonnummern anrufen, geben Sie Ihre alternative Anrufer-ID an. Klicken Sie auf die Schaltfläche „Place call“ (Anrufen), um einen ausgehenden Anruf zu tätigen:

Place a call

Geben Sie zum Beitreten zu einem Gruppenanruf die GUID ein, die den Anruf identifiziert, und klicken Sie auf die Schaltfläche „Join group“ (Gruppe beitreten):

Join a group call

Klicken Sie auf die Schaltfläche „Show code“ (Code anzeigen), um den Beispielcode für das Tätigen von Anrufen, das Empfangen von Anrufen und das Beitreten zu Gruppenanrufen anzuzeigen.

Ein aktiver Anruf sieht wie folgt aus:

Group call

Dieses Beispiel enthält auch Codeausschnitte für die folgenden Funktionen:

  • Klicken auf das Videosymbol zum Ein-/Ausschalten Ihrer Videokamera
  • Klicken auf das Mikrofonsymbol zum Ein-/Ausschalten des Mikrofons
  • Klicken auf das Wiedergabesymbol, um den Anruf zu halten bzw. das Halten aufzuheben
  • Klicken auf das Bildschirmsymbol zum Starten/Abbrechen der Bildschirmfreigabe
  • Klicken auf das Personensymbol, um dem Anruf einen Teilnehmer hinzuzufügen
  • Klicken auf „Remove participant“ (Teilnehmer entfernen) in der Teilnehmerliste, um einen bestimmten Teilnehmer aus dem Anruf zu entfernen

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln:

Zusätzliche Lektüre

  • Beispiele: In der Übersicht über Beispiele finden Sie weitere Beispiele.
  • Redux: Clientseitige Zustandsverwaltung
  • Fluent-UI: UI-Bibliothek von Microsoft
  • React: Bibliothek zum Erstellen von Benutzeroberflächen
  • ASP.NET Core: Framework für die Erstellung von Webanwendungen