Mit dem Benutzeroberflächen-Framework von Azure Communication Services ist es für Sie einfach, moderne Benutzeroberflächen für die Kommunikation zu entwickeln. Sie können auch die Benutzeroberfläche-Bibliothek verwenden, um eine Verbindung mit Open AI oder einem anderen Modell herzustellen. Unsere SDK gibt Ihnen eine Bibliothek mit für die Produktion geeigneten Benutzeroberflächenkomponenten, die Sie in Ihre Anwendungen einfügen können:
Hinweis
Eine ausführliche Dokumentation zur UI-Bibliothek finden Sie im Web UI-Bibliothek Storybook. Dort finden Sie zusätzliche konzeptionelle Dokumentation, Schnellstarts und Beispiele.
Zusammensetzungen.
Diese Komponenten sind schlüsselfertige Lösungen, die gängige Kommunikationsszenarien implementieren. Sie können Ihren Anwendungen schnell Videoanrufe oder Chats (derzeit nur über die Web-UI-Bibliothek verfügbar) hinzufügen. Zusammensetzungen sind Open-Source-Komponenten höherer Ordnung, die mithilfe von UI-Komponenten erstellt wurden.
UI-Komponenten
Diese Komponenten sind Open-Source-Bausteine, mit denen Sie benutzerdefinierte Kommunikationserfahrungen erstellen können. Es werden sowohl Komponenten für Anruf- als auch für Chatfunktionen angeboten, die für die Entwicklung von Benutzeroberflächen kombiniert werden können.
Für diese Clientbibliotheken für Benutzeroberflächen werden jeweils die Fluent-Entwurfssprache von Microsoft und die zugehörigen Objekte verwendet. Fluent-UI stellt eine grundlegende Ebene für die UI-Bibliothek zur Verfügung und wird aktiv in Microsoft-Produkten verwendet.
In Verbindung mit den UI-Komponenten stellt die UI-Bibliothek eine zustandsbehaftete Clientbibliothek für Anruf- und Chatfunktionen zur Verfügung.
Dieser Client ist unabhängig von einem bestimmten Framework für Zustandsverwaltung und kann in allgemeine Zustands-Manager wie Redux oder React Context integriert werden.
Diese zustandsbehaftete Clientbibliothek kann mit den UI-Komponenten verwendet werden, um Eigenschaften und Methoden für die UI-Komponenten zum Rendern von Daten zu übergeben. Weitere Informationen finden Sie unter Zustandsbehafteter Client: Übersicht.
Hinweis
Da in der UI-Bibliothek die gleichen Komponenten und zusammengesetzten Komponenten wie im Design-Kit für Figma verfügbar sind, können Sie schnell mit dem Entwerfen Ihrer Anruf- und Chaterfahrungen und dem Erstellen von Prototypen beginnen.
Übersicht über Zusammensetzungen
Zusammensetzungen sind Komponenten auf höherer Ebene, die aus UI-Komponenten bestehen, die mithilfe von Azure Communication Services schlüsselfertige Lösungen für allgemeine Kommunikationsszenarien bereitstellen.
Entwickler können die Zusammensetzung ganz einfach mithilfe eines Azure Communication Services-Zugriffstokens und der erforderlichen Konfiguration instanziieren, die für Anruf- oder Chatfunktionen erfolgt.
Kombinieren Sie Anruf- und Chatfeatures, damit Benutzer einen Anruf oder Chatthread starten bzw. an einem Anruf oder Chatthread teilnehmen können. Auf der entsprechenden Benutzeroberfläche haben Benutzer die Möglichkeit, per Sprach- und Videoanruf zu kommunizieren, und haben Zugriff auf einen funktionsreichen Chatthread, in dem Nachrichten zwischen Teilnehmern ausgetauscht werden können. Sie enthält Unterstützung für Teams-Interoperabilität.
Anrufbenutzeroberfläche, mit der Benutzer einen Anruf starten oder ihm beitreten können. Innerhalb der Benutzeroberfläche können Benutzer ihre Geräte konfigurieren, am Anruf mit Video teilnehmen und andere Teilnehmer sehen, einschließlich der Teilnehmer mit aktivierten Videofunktionen. Für Teams Interop ist eine Wartebereichfunktion enthalten, mit der Benutzer auf ihre Zulassung warten können.
Chatbenutzeroberfläche, mit der Benutzer Nachrichten senden und empfangen können. Threadereignisse wie Eingaben, Lesevorgänge und Teilnehmer, die dem Chat beitreten oder ihn verlassen, werden dem Benutzer als Teil des Chatthreads angezeigt.
Übersicht über die UI-Komponenten
Reine UI-Komponenten, die von Entwicklern verwendet werden können, um Kommunikationsbenutzeroberflächen zu erstellen, vom Zusammenfügen von Videokacheln in einem Raster bis hin zum Präsentieren von Remoteteilnehmern und Organisieren von Komponenten, damit diese Ihren Anwendungsspezifikationen entsprechen.
UI-Komponenten unterstützen Anpassung, um den Komponenten das richtige Erscheinungsbild und Aussehen zu verleihen, damit sie einem Anwendungsbranding bzw. -stil entsprechen.
Allgemeine Komponente zum Rendern einer Anrufer- oder Chatteilnehmerliste, einschließlich Avatar und Anzeigename.
Installieren der Web-UI-Bibliothek
Zustandsbehaftete Clients sind Teil des @azure/communication-react-Pakets.
Bash
npm i --save @azure/communication-react
Welches UI-Artefakt ist für mein Projekt am besten geeignet?
Wenn Sie sich mit den folgenden Anforderungen vertraut machen, können Sie die richtige Clientbibliothek auswählen:
Welchen Anpassungsgrad streben Sie an? Die zentralen Azure Communication Services-Clientbibliotheken weisen keine Benutzeroberfläche auf und sind so konzipiert, dass Sie die Benutzeroberfläche nach Ihren Vorstellungen erstellen können. Mit den Komponenten der UI-Bibliothek werden UI-Ressourcen auf Kosten verringerter Anpassungsmöglichkeiten bereitgestellt.
Welche Plattformen sollen verwendet werden? Verschiedene Plattformen verfügen über unterschiedliche Funktionen.
Ausführliche Informationen zur Verfügbarkeit von Features in der UI-Bibliothek finden Sie hier. Eine Zusammenfassung der wichtigsten Nachteile finden Sie in der nächsten Tabelle.
Composites sind schlüsselfertige Lösungen, die gängige Kommunikationsszenarien implementieren. Sie können Ihren Anwendungen Videoanrufe hinzufügen. Composites sind Open-Source-Komponenten höherer Ordnung, die Entwickler nutzen können, um Entwicklungszeit und technische Komplexität zu reduzieren.
Anrufbenutzeroberfläche, mit der Benutzer einen Anruf starten oder ihm beitreten können. Innerhalb der Erfahrung können Benutzer ihre Geräte konfigurieren, am Anruf mit Video teilnehmen und andere Teilnehmer sehen, einschließlich derjenigen mit aktivierten Videofunktionen. Um Teams-Interoperabilität zu verwenden, enthält CallComposite die Wartebereichsfunktionalität, damit Benutzer warten können, bis sie zugelassen werden.
ChatComposite bietet Benutzern eine Umgebung für Echtzeit-Textnachrichten. Insbesondere können Benutzer eine Chatnachricht mit Ereignissen aus Eingabeindikatoren und Lesebestätigung senden und empfangen. Darüber hinaus können Benutzer auch Systemnachrichten erhalten, etwa über hinzugefügte oder entfernte Teilnehmer und Änderungen am Chattitel.
Zusammengesetzte Szenarien für Anrufe
Beitritt zu einem Video-/Audioanruf
Benutzer können einem Anruf über die URL der Teams-Besprechung beitreten oder einen Azure Communication Services-Anruf einrichten. Dieser Ansatz bietet eine einfachere Oberfläche, genau wie die Teams-Anwendung.
Erfahrung vor dem Anruf
Als Teilnehmer der Besprechung können Sie einen Namen angeben und eine Standardkonfiguration für Audio- und Videogeräte einrichten. Dann können Sie dem Anruf beitreten.
Anruferfahrung
Das Aufruf-Composite bietet eine End-to-End-Erfahrung, optimiert die Entwicklungszeit und konzentriert sich auf das saubere Layout.
Die Anruferfahrung bietet all diese Funktionen in einer zusammengesetzten Komponente und stellt so einen eindeutigen Pfad ohne komplexen Code zur Verfügung, was zu einer schnelleren Entwicklungszeit führt.
Weitere Informationen über mobile Composites für Anrufe finden Sie unter Anwendungsfälle.
Zusammengesetzte Szenarien für Chat
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.
ChatComposite bietet eine Umgebung für Textnachrichten in Echtzeit. Im Hinblick auf Flexibilität und Skalierbarkeit kann sich ChatComposite an unterschiedliche Layouts oder Ansichten von Ihren Anwendungen ohne Komplexität anpassen. Sie können sich außerdem entscheiden, die ChatComposite-Ansicht nicht anzuzeigen und nur Benachrichtigungen zu empfangen, um Ihre verschiedenen Geschäftsanforderungen zu erfüllen.
iOS
Android
Qualität und Sicherheit
Ähnlich wie CallComposite verwendet ChatComposite ebenfalls Azure Communication Services-Zugriffstoken. Zum Sicherstellen, dass nur Benutzer mit entsprechender Berechtigung auf den Chat zugreifen können, müssen ihre Benutzertoken vor dem Starten der Chatumgebung einem gültigen Chatthread hinzugefügt werden.
Weitere Informationen
Weitere Informationen über Mobile Composites für Chat finden Sie unter Anwendungsfälle.
Welches UI-Artefakt ist für mein Projekt am besten geeignet?
Diese Anforderungen helfen Ihnen, die richtige Clientbibliothek auszuwählen:
Welchen Anpassungsgrad streben Sie an? Die zentralen Azure Communication Services-Clientbibliotheken weisen keine Benutzeroberfläche auf und sind so konzipiert, dass Sie die Benutzeroberfläche nach Ihren Vorstellungen erstellen können. Mit den Komponenten der UI-Bibliothek werden UI-Ressourcen auf Kosten verringerter Anpassungsmöglichkeiten bereitgestellt.
Welche Plattformen sollen verwendet werden? Verschiedene Plattformen verfügen über unterschiedliche Funktionen.
Die Microsoft Teams JavaScript-Clientbibliothek kann Ihnen helfen, native Teams-Features direkt in Ihre Anwendung zu integrieren. In diesem Modul erfahren Sie, wie Sie die Teams-Chatfunktion mithilfe der Teams JavaScript-Clientbibliothek in Ihre App integrieren.
Demonstrieren Sie Fertigkeiten zum Konfigurieren, Bereitstellen, Überwachen und Verwalten von Microsoft Teams-Telefon, -Besprechungen und zertifizierten Geräten.
Erfahren Sie mehr über die UI-Bibliothek von Azure Communication Services und wie sie Ihnen beim Erstellen von Kommunikationsbenutzeroberflächen helfen kann.
Nutzen Sie die zusammengesetzten Komponenten der Benutzeroberflächenbibliothek von Azure Communication Services, mit denen Sie Ihre Anwendungen um Anruffunktionen erweitern können.
Enthält eine Übersicht über das Hero-Beispiel für Anrufe mit Azure Communication Services, damit Entwickler sich genauer über die Funktionsweise des Beispiels informieren können.
