Erweitern der Anruffunktionalität
Sie können die vorkonfigurierte Benutzeroberfläche für virtuelle Termine verwenden, die über Microsoft Teams Virtual Appointment Booking oder über die Microsoft Graph Virtual Appointment-API erstellt wurde, um Consumern das Erlebnis der Teilnahme an einem von Microsoft gehosteten virtuellen Termin zu ermöglichen. Wenn Sie über Microsoft Teams Premium verfügen, können Sie die Benutzeroberfläche über das Besprechungsdesign weiter anpassen, mit dem Sie Bilder, Logos und Farben auswählen können, die in der gesamten Benutzeroberfläche verwendet werden. Azure Communication Services kann Entwicklerinnen und Entwicklern helfen, die die Lösung selbst hosten oder die Oberfläche anpassen möchten.
Azure Communication Services bietet drei Optionen für Anpassungen:
- Anpassen der Benutzeroberfläche über gebrauchsfertige Benutzeroberflächen-Verbundelemente.
- Erstellen eines eigenen Layout mithilfe der Komponenten und Verbundelemente der Benutzeroberflächenbibliothek.
- Erstellen einer eigenen Benutzeroberfläche mit Software Development Kits
Voraussetzungen
Beim Lesen dieses Artikels wird vorausgesetzt, dass man ein Verständnis der folgenden Themen mitbringt:
Anpassbare, gebrauchsfertige Benutzeroberflächenverbundelemente
Sie können gebrauchsfertige Verbundelemente für Besprechungen integrieren, die von der Azure Communication Service-Benutzeroberflächenbibliothek bereitgestellt werden. Dieses Verbundelement bietet vorkonfigurierte React-Komponenten, die in Ihre Webanwendung integriert werden können. Weitere Informationen zur Verwendung dieses Verbundelements mit verschiedenen Webframeworks finden Sie hier.
- Geben Sie zunächst Details zum Benutzer der Anwendung an. Erstellen Sie dazu Azure Communication CallAdapter-Argumente, um Informationen zu Benutzer-ID, Zugriffstoken, Anzeigename und Teams-Besprechungs-URL zu enthalten.
const callAdapterArgs = {
userId: new CommunicationUserIdentifier(<USER_ID>'),
displayName: “Adele Vance”,
credential: new AzureCommunicationTokenCredential('<TOKEN>'),
locator: { meetingLink: '<TEAMS_MEETING_URL>'},
endpoint: '<AZURE_COMMUNICATION_SERVICE_ENDPOINT_URL>';
}
- Erstellen Sie mit useAzureCommunicationCallAdapter einen benutzerdefinierten React-Hook, um einen CallAdapter zu erstellen.
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
- Geben Sie die React-Komponente CallComposite zurück, die die Besprechungsoberfläche bereitstellt.
return (
<div>
<CallWithChatComposite
adapter={callAdapter}
/>
</div>
);
Sie können die Benutzeroberfläche mit Ihrem eigenen Design zwecks Anpassung und Branding weiter anpassen oder das Layout für Desktop-PCs oder Mobilgeräte optimieren. Wenn Sie das Layout noch weiter anpassen möchten, können Sie bereits vorhandene Benutzeroberflächenkomponenten verwenden, wie im folgenden Abschnitt beschrieben.
Erstellen eines eigenen Layouts mit Benutzeroberflächenkomponenten
Die Azure Communication Services-Benutzeroberflächenbibliothek bietet Zugriff auf einzelne Komponenten, um die Benutzeroberfläche und ihr Verhalten anzupassen. In der folgenden Abbildung werden die einzelnen zur Verwendung verfügbaren Komponenten hervorgehoben.
In der folgenden Tabelle sind die einzelnen Komponenten aufgeführt:
| Komponente | BESCHREIBUNG |
|---|---|
| Rasterlayout | Rasterkomponente zum Organisieren von Videokacheln in einem NxN-Raster |
| Videokachel | Komponente, die den Videodatenstrom anzeigt, wenn verfügbar, und eine statische Standardkomponente, wenn dies nicht möglich ist. |
| Steuerleiste | Container zum Organisieren von DefaultButtons, um bestimmte Anrufaktionen wie Stummschaltung oder Bildschirmfreigabe zu ermöglichen. |
| Videokatalog | Schlüsselfertige Videokatalogkomponente, die sich dynamisch ändert, wenn Teilnehmer hinzugefügt werden. |
Sie können auch Ihr Chaterlebnis anpassen. In der folgenden Abbildung sind die einzelnen Komponenten des Chats hervorgehoben.
Die folgende Tabelle enthält Beschreibungen mit Links zu einzelnen Komponenten.
| Komponente | BESCHREIBUNG |
|---|---|
| Nachrichtenthread | Container zum Rendern von Chatnachrichten, Systemnachrichten und benutzerdefinierten Nachrichten. |
| Sendefeld | Texteingabekomponente mit eigenständigen Sendeschaltfläche. |
| Nachrichtenstatusanzeige | Komponente zur Anzeige des Nachrichtenstatus mit mehreren Zuständen, um den Status der gesendeten Nachricht anzuzeigen |
| Eingabeindikator | Textkomponente zum Rendern der Teilnehmer, die aktiv Eingaben in einem Thread vornehmen. |
Sehen wir uns an, wie die Komponente Steuerleiste verwendet wird, um nur Kamera- und Mikrofonschaltflächen in dieser Reihenfolge anzuzeigen und Aktionen zu steuern, die nach Auswahl dieser Schaltflächen ausgeführt werden.
export const AllButtonsControlBarExample: () => JSX.Element = () => {
return (
<FluentThemeProvider>
<ControlBar layout={'horizontal'}>
<CameraButton
onClick={() => { /*handle onClick*/ }}
/>
<MicrophoneButton
onClick={() => { /*handle onClick*/ }}
/>
</ControlBar>
</FluentThemeProvider>
)}
Um weitere Anpassungen vorzunehmen, können Sie weitere vordefinierte Schaltflächen hinzufügen und deren Farbe, Symbole oder Reihenfolge ändern. Wenn Sie über vorhandene Benutzeroberflächenkomponenten verfügen, die Sie verwenden möchten, oder wenn Sie mehr Kontrolle über das Benutzererlebnis haben möchten, können Sie die zugrunde liegenden Software Development Kits (SDKs) verwenden, um Ihre eigene Benutzeroberfläche zu erstellen.
Erstellen einer eigenen Benutzeroberfläche mit Software Development Kits
Azure Communication Services bietet Chat- und Anruf-SDKs, um Oberflächen für virtuelle Termine zu erstellen. Das Benutzererlebnis besteht aus drei Hauptteilen: Authentifizierung, Anruf und Chat. Wir haben dedizierte Schnellstart- und GitHub-Beispiele für jeden Teil, aber die folgenden Codebeispiele zeigen, wie Sie das Benutzererlebnis aktivieren können. Die Authentifizierung des Benutzenden erfordert das Erstellen oder Auswählen eines vorhandenen Azure Communication Services-Benutzenden und das Ausstellen eines Tokens. Sie können die Verbindungszeichenfolge verwenden, um den CommunicationIdentityClient zu erstellen. Wir empfehlen, diese Logik im Back-End zu implementieren, da die Freigabe der Verbindungszeichenfolge für Clients nicht sicher ist.
var client = new CommunicationIdentityClient(connectionString);
Erstellen Sie mit der Methode CreateUserAsync einen Azure Communication Services-Benutzenden, der Ihrer Azure Communication Services-Ressource zugeordnet ist.
var identityResponse = await client.CreateUserAsync();
var identity = identityResponse.Value;
Geben Sie ein Zugriffstoken aus, das dem Azure Communication Services-Benutzenden für den Chat- und Anrufbereich zugeordnet ist.
var tokenResponse = await client.GetTokenAsync(identity, scopes: new [] { CommunicationTokenScope.VoIP, CommunicationTokenScope.Chat });
var token = tokenResponse.Value.Token;
Nun verfügen Sie über einen gültige Azure Communication Services-Benutzenden und Zugriffstokens, die diesem Benutzenden zugewiesen sind. Sie können jetzt die Anrufoberfläche integrieren. Dieser Teil wird auf der Clientseite implementiert. Für dieses Beispiel wird davon ausgegangen, dass die Eigenschaften vom Back-End an den Client weitergegeben werden. Das folgende Tutorial zeigt, wie das geht. Erstellen Sie zunächst einen CallClient, der das SDK initiiert und Ihnen Zugriff auf den CallAgent und den Geräte-Manager ermöglicht.
const callClient = new CallClient();
Create CallAgent from the client and define the display name of the user.
tokenCredential = new AzureCommunicationTokenCredential(token);
callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'Adele Vance'})
Nehmen Sie an einer Microsoft Teams-Besprechung teil, die einem virtuellen Termin basierend auf der Teams-Besprechungs-URL zugeordnet ist.
var meetingLocator = new TeamsMeetingLinkLocator("<TEAMS_MEETING_URL>");
callAgent.join(meetingLocator , new JoinCallOptions());
Wenn Sie diese Schritten befolgen, können Sie an der Teams-Besprechung teilnehmen. Anschließend können Sie diese Schritte mit der Verwaltung von Lautsprechern, Mikrofonen, Kameras und einzelnen Videostreams erweitern. Dann können Sie optional auch den Chat in die Oberfläche für virtuelle Termine integrieren.
Erstellen Sie einen ChatClient, der das SDK initiiert und Ihnen Zugriff auf Benachrichtigungen und den ChatThreadClient ermöglicht.
const chatClient = new ChatClient(
endpointUrl,
new AzureCommunicationTokenCredential(token)
);
Abonnieren Sie den Empfang von Chatbenachrichtigungen in Echtzeit für den Azure Communication Services-Benutzenden.
await chatClient.startRealtimeNotifications();
Abonnieren Sie ein Ereignis, das auslöst, wenn eine Nachricht empfangen wird.
// subscribe to new message notifications
chatClient.on("chatMessageReceived", (e) => { /*Render message*/})
Erstellen Sie den ChatThreadClient, um den Client für Vorgänge im Zusammenhang mit einem bestimmten Chatthread zu initiieren.
chatThreadClient = await chatClient.getChatThreadClient(threadIdInput.value);
Senden Sie eine Chatnachricht im Teams-Besprechungschat, der dem virtuellen Termin zugeordnet ist.
let sendMessageRequest = { content: 'Hello world!' };
let sendMessageOptions = { senderDisplayName : 'Adele Vance' };
let sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
Während aller drei Phasen verfügen Sie über einen Benutzenden, der virtuellen Terminen mit Audio, Video, Bildschirmfreigabe und Chat beitreten kann. Dieser Ansatz gibt Ihnen die volle Kontrolle über die Benutzeroberfläche und das Verhalten einzelner Aktionen.
Nächste Schritte
- Hier erfahren Sie, welche Erweiterbarkeitsoptionen Sie für virtuelle Termine haben.
- Hier erfahren Sie, wie Sie vor und nach dem Termin Anpassungen vornehmen.
- Hier erfahren Sie, wie Sie das Benutzererlebnis vor dem Anruf anpassen.
- Hier erfahren Sie, wie Sie das Anruferlebnis anpassen.