Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# Einrichten von In-App-, Web-, Videoanruf- und Bildschirmfreigabe-Funktionen
<a name="inapp-calling"></a>

Die Funktionen für Amazon Connect In-App-, Web- und Videoanrufe ermöglichen es Ihren Kunden, Sie zu kontaktieren, ohne Ihre Web- oder Mobilanwendung verlassen zu müssen. Sie können diese Funktionen verwenden, um Kontextinformationen an Amazon Connect zu übergeben. Auf diese Weise können Sie den Kundenkomfort auf der Grundlage von Attributen wie dem Kundenprofil oder anderen Informationen, wie z. B. Aktionen, die zuvor in der App ausgeführt wurden, personalisieren.

## Wissenswertes
<a name="inapp-calling-important"></a>
+ Bei einem Videoanruf oder einer Bildschirmfreigabe sehen Kundendienstmitarbeiter das Video oder den geteilten Bildschirm des Kunden, auch wenn der Kunde in der Warteschlange ist. Es liegt in der Verantwortung des Kunden, die persönlich identifizierbaren Informationen entsprechend zu behandeln. Wenn Sie dieses Verhalten ändern möchten, können Sie ein benutzerdefiniertes CCP und ein Kommunikations-Widget erstellen. Weitere Informationen finden Sie unter [Native Integration von In-App-, Web- und Videoanrufen sowie Bildschirmfreigabe-Funktionen in Ihre mobile Anwendung](config-com-widget2.md).

## Kommunikations-Widget: Zentrale Konfiguration von Chat, Sprache und Video
<a name="one-page"></a>

Um In-App-, Web- und Videoanrufe einzurichten, verwenden Sie die Seite **Kommunikations-Widgets**. Diese unterstützt Chat-, Sprach-, Video- und Bildschirmfreigabe-Funktionen. Die folgende Abbildung zeigt den Bereich **Kommunikationsmöglichkeiten** der Seite, wenn dieser für all diese Optionen konfiguriert ist. 

![\[Bereich „Kommunikationsmöglichkeiten“ der Seite zum Erstellen eines Kommunikations-Widgets.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/comm-widget-all.png)


## Web-, In-App- und Videoanrufe für mehrere Benutzer
<a name="multi-user"></a>

Sie können bis zu vier weitere Benutzer zu einem laufenden oder geplanten Web-, In-App- oder Videoanruf hinzufügen, und zwar für insgesamt sechs Teilnehmer: den Kundendienstmitarbeiter, den ersten Benutzer und vier weitere Teilnehmer (Benutzer oder Kundendienstmitarbeiter).

Um beispielsweise den Abschluss einer Hypothekentransaktion zu erleichtern, können der Kundendienstmitarbeiter und der Kunde, der Ehepartner des Kunden, ein Übersetzer und sogar ein Supervisor (d. h. ein anderer Kundendienstmitarbeiter) gleichzeitig am Anruf teilnehmen, um jegliche Probleme schnell zu lösen.

Informationen zur Aktivierung von Web-, In-App- und Videoanrufen für mehrere Benutzer finden Sie unter [Aktivieren von In-App-, Web- und Videoanrufen für mehrere Benutzer](enable-multiuser-inapp.md).

## So richten Sie In-App-, Web- und Videoanrufe sowie die Bildschirmfreigabe ein
<a name="inapp-options"></a>

Es gibt zwei Möglichkeiten, Amazon Connect In-App-, Web- und Videoanrufe sowie Screensharing in Ihre Website oder mobile Anwendung einzubetten: 
+ Option 1: [Konfigurieren Sie ein out-of-the-box Kommunikations-Widget](config-com-widget1.md). Sie können den UI Builder verwenden, um die Schriftart und die Farben anzupassen und das Widget so zu sichern, dass es nur von Ihrer Website aus gestartet werden kann. 
+ Option 2: [Native Integration von In-App-, Web- und Videoanrufen in Ihre mobile Anwendung](config-com-widget2.md). Wählen Sie diese Option, um ein von Grund auf neues Kommunikations-Widget zu erstellen und in Ihre mobile Anwendung oder Website zu integrieren. Verwenden Sie den Amazon Connect APIs und Amazon Chime SDK-Client APIs , um ihn nativ in Ihre mobile Anwendung oder Website zu integrieren.

**Anmerkung**  
Wenn Sie über benutzerdefinierte Desktops für Kundendienstmitarbeiter verfügen, müssen Sie keine Änderungen für Amazon-Connect-In-App- und -Webanrufe vornehmen. Sie müssen jedoch [Videoanrufe und Bildschirmfreigabe-Funktionen integrieren](integrate-video-calling-for-agents.md).

# Konfigurieren Sie ein out-of-the-box Kommunikations-Widget in Amazon Connect
<a name="config-com-widget1"></a>

Verwenden Sie diese Option, um Kommunikations-Widgets für Desktop- und mobile [Browser](connect-supported-browsers.md#browsers-inapp) zu erstellen. Am Ende dieses Verfahrens generiert Amazon Connect einen benutzerdefinierten HTML-Codeausschnitt, den Sie in den Quellcode Ihrer Website kopieren.

1. Melden Sie sich auf der Amazon Connect Admin-Website mit einem Administratorkonto oder einem Benutzerkonto mit **Kanälen und Flows** an. Das **Widget „Kommunikation“ — Berechtigung erstellen** ist im Sicherheitsprofil enthalten.

1. Wählen Sie im Amazon Connect linken Navigationsmenü **Kanäle**, **Kommunikations-Widgets** aus. 

1. Der Assistent führt Sie durch die nächsten drei Schritte. 

## Schritt 1: Auswahl der Kommunikationskanäle
<a name="widgetdetails"></a>

1. Geben Sie auf der Seite **Kommunikations-Widgets** einen **Namen** und eine **Beschreibung** für das Kommunikations-Widget ein. 
**Anmerkung**  
Der Name muss für jedes Kommunikations-Widget, das in einer Amazon-Connect-Instance erstellt wurde, eindeutig sein.

1. Legen Sie im Abschnitt **Kommunikationsmöglichkeiten** fest, wie Ihre Kunden mit Ihrem Widget interagieren können. In der folgenden Abbildung sind die Optionen angegeben, mit denen Web- und Videoanrufe sowie die Bildschirmfreigabe für Kunden ermöglicht werden.   
![\[Die Seite „Kommunikations-Widget“, die für Web- und Videoanrufe sowie die Bildschirmfreigabe konfiguriert ist.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/comm-widget-page-call.png)

1. Wählen Sie im Bereich **Webanrufe** aus, ob Sie Videoanrufe und Bildschirmfreigabe-Funktionen für Ihre Kunden aktivieren möchten. Das vorherige Bild zeigt Optionen, mit denen Kunden die Videos der Kundendienstmitarbeiter ansehen und ihre Videos einschalten sowie Kundendienstmitarbeiter und Kunden ihre Bildschirme freigeben können. Informationen zum Festlegen von Einschränkungen bei der Bildschirmfreigabe finden Sie unter [Aktivieren der URL-Beschränkung für die Bildschirmfreigabe](screen-sharing-url-restriction.md).

1. Wählen Sie **Save and continue** aus.

## Schritt 2: Anpassen des Widgets
<a name="customizewidget"></a>

Bei der Auswahl dieser Optionen wird die Widget-Vorschau automatisch aktualisiert. Sie können also sehen, wie die Oberfläche für die Kunden aussehen wird.

![\[Die Vorschau des Kommunikations-Widgets.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/netra-call-preview.png)


**Definieren des Stils der Widget-Zugriffschaltflächen**

1. Wählen Sie die Farben für den Schaltflächenhintergrund aus. Geben Sie dazu Hexadezimalwerte ([HTML-Farbcodes](https://htmlcolorcodes.com/)) ein.

1. Wählen Sie **Weiß** oder **Schwarz** als Symbolfarbe aus. Die Farbe des Symbols kann nicht angepasst werden.

**Anpassen von Anzeigenamen und -stilen**

1. Geben Sie Werte für die Header-Nachricht und Farbe sowie für die Hintergrundfarbe des Widgets an. 

1. **Logo-URL**: Fügen Sie eine URL zu Ihrem Logo-Banner aus einem Amazon-S3-Bucket oder einer anderen Online-Quelle ein.
**Anmerkung**  
In der Vorschau des Kommunikations-Widgets auf der Anpassungsseite wird das Logo nicht angezeigt, wenn es aus einer anderen Online-Quelle als einem Amazon-S3-Bucket stammt. Das Logo wird jedoch angezeigt, wenn das benutzerdefinierte Kommunikations-Widget auf Ihrer Seite implementiert wird.

   Das Banner muss im .svg-, .jpg- oder .png-Format vorliegen. Das Bild kann 280 Pixel (Breite) mal 60 Pixel (Höhe) groß sein. Jedes Bild, das größer als diese Abmessungen ist, wird so skaliert, dass es in den Komponentenbereich des Logos von 280×60 passt.

   1. Anweisungen zum Hochladen einer Datei wie eines Logobanners auf S3 finden Sie unter [Hochladen von Objekten](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) im *Benutzerhandbuch zu Amazon Simple Storage Service*.

   1. Vergewissern Sie sich, dass die Bildberechtigungen richtig eingestellt sind, sodass das Kommunikations-Widget über Berechtigungen für den Zugriff auf das Bild verfügt. Informationen dazu, wie Sie ein S3-Objekt öffentlich zugänglich machen, finden Sie unter [Schritt 2: Hinzufügen einer Bucket-Richtlinie](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) im Thema *Berechtigungen für den Zugriff auf Websites einrichten*.

## Schritt 3: Hinzufügen Ihrer Domain für das Widget
<a name="widgetdomain"></a>

In diesem Schritt können Sie das Kommunikations-Widget so sichern, dass es nur von Ihrer Website aus gestartet werden kann.

1. Geben Sie die Website-Domains ein, in denen Sie das Kommunikations-Widget platzieren möchten. Das Kommunikations-Widget wird nur in Websites geladen, die Sie in diesem Schritt auswählen. 

   Wählen Sie **Domain hinzufügen** aus, um bis zu 50 Domains hinzuzufügen.  
![\[Die Option „Domain hinzufügen“.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/chatwidget-add-domain.png)
**Wichtig**  
Vergewissern Sie sich, dass Ihre Website URLs gültig ist und keine Fehler enthält. Geben Sie die vollständige URL beginnend mit https:// an.
Wir empfehlen die Verwendung von https:// für Ihre Produktionswebsites und -anwendungen.

1. Wählen Sie unter **Mehr Sicherheit für Ihre Kommunikations-Widget-Anfragen** die Option **Nein – Ich möchte diesen Schritt überspringen** aus, um die Einrichtung möglichst schnell durchzuführen.

   Wir empfehlen, **Ja** auszuwählen, um überprüfen zu können, ob der Benutzer authentifiziert ist. Weitere Informationen finden Sie unter [Personalisieren des Kundenerlebnisses für In-App-, Web- und Videoanrufe in Amazon Connect](optional-widget-steps.md). 

1. Wählen Sie **Save and continue** aus.

   Herzlichen Glückwunsch\$1 Ihr Widget wurde erstellt. Kopieren Sie den generierten Code und fügen Sie ihn auf jeder Seite Ihrer Website ein, auf der das Kommunikations-Widget erscheinen soll.

## Aktivieren von In-App-, Web- und Videoanrufen sowie der Bildschirmfreigabe für Kundendienstmitarbeiter
<a name="agent-cx-cw"></a>

Um Kundendienstmitarbeitern die Möglichkeit zur Nutzung von Videoanrufen und der Bildschirmfreigabe zu bieten, weisen Sie ihrem Sicherheitsprofil die Berechtigungen **Contact Control Panel (CCP)**, **Videoanrufe – Zugriff** zu.

Der Arbeitsbereich für Amazon Connect Agenten unterstützt Amazon Connect In-App-, Web- und Videoanrufe sowie Screensharing. Sie können dieselbe Konfiguration, Weiterleitung, Analyse und Kundendienstmitarbeiteranwendung wie bei Telefonanrufen und Chats verwenden. Für den Einstieg müssen Sie lediglich den Sicherheitsprofilen Ihres Kundendienstmitarbeiters die Berechtigungen für Videoanrufe und für die Bildschirmfreigabe zuweisen.

Für benutzerdefinierte Agenten-Desktops sind keine Änderungen für Amazon Connect In-App- und Webanrufe erforderlich. Weisen Sie den Sicherheitsprofilen Ihres Kundendienstmitarbeiters die Berechtigungen für Videoanrufe und für die Bildschirmfreigabe zu und folgen Sie der nachstehenden Anleitung zur Integration von Videoanrufen in den Desktop Ihres Kundendienstmitarbeiters.

## So leitet ein Client-Gerät einen In-App- oder Webanruf ein
<a name="diagram-option1"></a>

Das folgende Diagramm zeigt die Reihenfolge der Ereignisse, wenn ein Client-Gerät (mobile Anwendung oder Browser) einen In-App- oder Webanruf einleitet.

![\[Konzeptionelles Diagramm, das zeigt, wie ein Client-Gerät einen Anruf einleitet.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (Optional) Sie können auf der Website erfasste Attribute übergeben und mit dem JSON-Web-Token (JWT) validieren. 

1. Der Kunde klickt auf das Kommunikations-Widget auf Ihrer Website oder mobilen App. 

1. Das Kommunikations-Widget startet den Webaufruf an, Amazon Connect indem es die im JWT enthaltenen Attribute weitergibt. 

1. Der Kontakt erreicht den Flow, wird weitergeleitet und in die Warteschlange gestellt. 

1. Der Kundendienstmitarbeiter akzeptiert den Kontakt.

1. (Optional) Wenn Video für den Kunden und den Kundendienstmitarbeiter aktiviert ist, können sie ihr Video starten.

## Weitere Informationen
<a name="cw-more-resources"></a>

Weitere Informationen zu den Anforderungen für In-App-, Web- und Videoanruffunktionen finden Sie in den folgenden Themen:
+ [Anforderungen an die Workstation des Kundendienstmitarbeiters für App-, Web- und Videoanrufe in Amazon Connect](videocalling-networking-requirements.md)
+ [Unterstützte Browser und mobile Betriebssysteme für In-App-, Web- und Videoanruffunktionen](connect-supported-browsers.md#browsers-inapp) 

# Native Integration von In-App-, Web- und Videoanrufen sowie Bildschirmfreigabe-Funktionen in Ihre mobile Anwendung
<a name="config-com-widget2"></a>

So integrieren Sie In-App-, Web- und Videoanrufe sowie Bildschirmfreigabe-Funktionen von Amazon Connect in Ihre Anwendung:

1. Verwenden Sie die Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)Connect-API, um den Kontakt zu erstellen.

1. Verwenden Sie dann die vom API-Aufruf zurückgegebenen Details, um dem Anruf mithilfe der Amazon Chime Clientbibliothek für [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) oder beizutreten [JavaScript](https://github.com/aws/amazon-chime-sdk-js). 

Informationen zum Erstellen von weiteren Teilnehmern finden Sie unter [Aktivieren von In-App-, Web- und Videoanrufen für mehrere Benutzer](enable-multiuser-inapp.md). 

Beispielanwendungen finden Sie im folgenden Github-Repository: [amazon-connect-in-app-calling-examples](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples). 

**Topics**
+ [So leitet ein Client-Gerät einen In-App- oder Webanruf ein](#diagram-option2)
+ [Erste Schritte](#diagram-option2-gs)
+ [Optionale Schritte:](#optional-steps)

## So leitet ein Client-Gerät einen In-App- oder Webanruf ein
<a name="diagram-option2"></a>

Das folgende Diagramm zeigt die Reihenfolge der Ereignisse, wenn ein Client-Gerät (mobile Anwendung oder Browser) einen In-App- oder Webanruf einleitet.

![\[Konzeptionelles Diagramm, das zeigt, wie ein Client-Gerät einen Anruf einleitet.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/netra-gs-diagram.png)


1. Ihr Kunde verwendet die Client-Anwendung (Website oder Anwendung), um einen In-App- oder Webanruf zu starten.

1. Die Client-Anwendung (Website oder mobile Anwendung) oder der Webserver verwendet die Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API, um den Kontakt zu starten und übergibt Attribute oder Kontext an. Amazon Connect

1. Die Client-Anwendung nimmt mithilfe der [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)in Schritt 2 zurückgegebenen Details am Anruf teil.

1. (Optional) Der Client verwendet die [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API, um eine zu empfangen`ConnectionToken`, die zum Senden von DTMF über die [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)API verwendet wird.

1. Der Kontakt erreicht den Flow und wird basierend auf dem Flow weitergeleitet und in die Warteschlange gestellt.

1. Der Kundendienstmitarbeiter akzeptiert den Kontakt.

1. (Optional) Wenn Video für den Kunden und den Kundendienstmitarbeiter aktiviert ist, können sie ihr Video starten.

1. (Optional — nicht im Diagramm dargestellt) Zusätzliche Teilnehmer können mit dem [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html)und [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) APIshinzugefügt werden. 

## Erste Schritte
<a name="diagram-option2-gs"></a>

Im Folgenden sind die allgemeinen Schritte für den Einstieg aufgeführt:

1. Verwenden Sie die [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API, um den Kontakt zu erstellen. Die API gibt die erforderlichen Details zurück, damit der Amazon Chime SDK Client am Anruf teilnehmen kann.

1. Instanziieren Sie das Amazon Chime `MeetingSessionConfiguration` SDK-Client-Objekt mithilfe der von zurückgegebenen Konfigurationen. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

1. Instanziieren Sie den Amazon-Chime-SDK-Client `DefaultMeetingSession` mit dem Parameter `MeetingSessionConfiguration`, der in Schritt 2 erstellt wurde, um eine Client-Besprechungssitzung zu erstellen. 
   + iOS

     ```
     let logger = ConsoleLogger(name: "logger") 
     let meetingSession = DefaultMeetingSession(
         configuration: meetingSessionConfig, 
         logger: logger
     )
     ```
   + Android

     ```
     val logger = ConsoleLogger()
     val meetingSession = DefaultMeetingSession(
         configuration = meetingSessionConfig,
         logger = logger,
         context = applicationContext
     )
     ```
   + JavaScript

     ```
     const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
     const deviceController = new DefaultDeviceController(logger);
     const configuration = new MeetingSessionConfiguration(
         meetingResponse, 
         attendeeResponse
     );
     const meetingSession = new DefaultMeetingSession(
         configuration, 
         logger, 
         deviceController
     );
     ```

1. Verwenden Sie die Methode `meetingSession.audioVideo.start()`, um den WebRTC-Kontakt mit Audio zu verbinden.
   + iOS/Android

     ```
     meetingSession.audioVideo.start()
     ```
   + JavaScript

     ```
     await meetingSession.audioVideo.start();
     ```

1. Verwenden Sie die Methode `meetingSession.audioVideo.stop()`, um aufzulegen und den WebRTC-Kontakt zu beenden.
   + iOS/Android

     ```
     meetingSession.audioVideo.stop()
     ```
   + JavaScript

     ```
     meetingSession.audioVideo.stop();
     ```

## Optionale Schritte:
<a name="optional-steps"></a>

Weitere Vorgänge und eine umfassende API-Dokumentation finden Sie in den plattformspezifischen API-Übersichtsleitfäden:
+ **iOS**: [API-Übersicht](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [API-Übersicht](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**[: API-Übersicht](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### Senden von DTMF-Tönen
<a name="send-dtmf-tones"></a>

Um DTMF an den Anruf zu senden, APIs sind zwei Amazon Connect Participant Service erforderlich: [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)und [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)jeweils.

**Anmerkung**  
`contentType`für die SendMessage API muss es sein. `audio/dtmf`

1. Zum Abrufen [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)aufrufen`ConnectionToken`. (`ParticipantToken`wird für den Aufruf dieser API benötigt. Sie finden es in der [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)Antwort.)

1. Rufen Sie mit dem `ConnectionToken` [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)zum Senden von DTMF-Ziffern auf.

### Auswählen von Audiogeräten
<a name="select-audio-devices"></a>

Um das input/output Audiogerät auszuwählen, können Sie die Methoden des Amazon Chime SDK-Clients für Android und iOS oder die [nativen iOS-Funktionen für iOS](https://developer.apple.com/documentation/avkit/avroutepickerview) verwenden.

**iOS/Android**

```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```

**JavaScript**

```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```

### Stummschalten von Audio und Aufheben der Audiostummschaltung
<a name="mute-unmute-audio"></a>

Verwenden Sie zum Stummschalten und Aufheben der Stummschaltung `meetingSession.audioVideo.realtimeLocalMute()` und `meetingSession.audioVideo.realtimeLocalUnmute()`.

**iOS/Android**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### Starten des eigenen Videos
<a name="start-self-video"></a>

Um das eigene Video zu starten, verwenden Sie den Parameter `meetingSession.audioVideo.startLocalVideo()`. Weitere Informationen zum Auflisten und Auswählen bestimmter Geräte finden Sie in den API-Anleitungen zur Clientbibliothek.

**iOS/Android**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### Stoppen des eigenen Videos
<a name="stop-self-video"></a>

Um das eigene Video zu stoppen, verwenden Sie den Parameter `meetingSession.audioVideo.stopLocalVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### Aktivieren des Kundendienstmitarbeiter-Videos
<a name="enable-agent-video"></a>

Verwenden Sie den Parameter `meetingSession.audioVideo.startRemoteVideo()`, um das Empfangen und Laden von Videos des Kundendienstmitarbeiters in der Anwendung zuzulassen. Sie müssen außerdem den Parameter „VideoTileObserver“ implementieren und Videokacheln an Anzeigeansichten binden.

**iOS/Android**

```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```

**JavaScript**

```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```

Umfassende Informationen zur Implementierung von Videokacheln finden Sie in den plattformspezifischen SDK-Anleitungen.

### Deaktivieren des Kundendienstmitarbeiter-Videos
<a name="disable-agent-video"></a>

Verwenden Sie den Parameter `meetingSession.audioVideo.stopRemoteVideo()`, um das Empfangen und Laden von Videos des Kundendienstmitarbeiters in der Anwendung nicht zuzulassen.

**iOS/Android**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### Verwenden von Datennachrichten
<a name="use-data-messages"></a>

Sie können [Datennachrichten](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) verwenden, wenn Sie einen beliebigen Status des Kundendienstmitarbeiters an den Endbenutzer senden müssen. Wenn sich Kunden beispielsweise in der Warteschleife befinden, können Sie eine Datennachricht an die Anwendung des Kunden senden, um ihn darüber zu informieren, dass er sich in der Warteschleife befindet und das video/screen Teilen weiterhin gesendet wird, oder Sie können das video/screen Teilen deaktivieren.

**iOS/Android**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### Hören von Stoppereignissen
<a name="listen-for-stop-events"></a>

Sie können über den Beobachter `audioVideoDidStop` nach Ereignissen hören, wenn die Teilnahme eines Kontakts endet. Spezifische Statuscodes können je nach Plattform variieren.

#### Anruf erreicht Kapazität
<a name="call-reaches-capacity"></a>

Wenn mehr als 6 Personen versuchen, am Anruf teilzunehmen, wird weiteren Teilnehmer die folgende Fehlermeldung angezeigt. Sie können erst teilnehmen, wenn andere Teilnehmer den Anruf beenden.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` oder `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` oder `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` oder `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Teilnehmer wurde aus Anruf entfernt
<a name="participant-removed-from-call"></a>

Wenn ein Teilnehmer vom Kundendienstmitarbeiter aus dem Anruf entfernt wird, der Kontakt jedoch für andere Teilnehmer weitergeführt wird, wird ihnen der folgende Statuscode angezeigt. Beachten Sie, wenn die Entfernung des Teilnehmers zum Beenden des Kontakts führt, wird ihm entweder dieser Status oder der Status „Kontakt beendet“ angezeigt.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` oder `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` oder `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` oder `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Kontakt beendet
<a name="contact-ends"></a>

Wenn der tatsächliche Kontakt für alle Teilnehmer vollständig beendet wird, wird ihnen der folgende Statuscode angezeigt.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# Aktivieren von In-App-, Web- und Videoanrufen für mehrere Benutzer
<a name="enable-multiuser-inapp"></a>

Amazon Connect unterstützt das Hinzufügen zusätzlicher Benutzer zur Teilnahme am In-App-, Web- und Videoanruf in einem bestehenden Anruf. Sie können bis zu vier weitere Benutzer zu einem laufenden oder geplanten In-App-, Web- oder Videoanruf hinzufügen, und zwar für insgesamt sechs Teilnehmer: den Kundendienstmitarbeiter, den ersten Benutzer und vier weitere Teilnehmer (Benutzer oder Kundendienstmitarbeiter).

## So fügen Sie Teilnehmer zu einem Anruf für mehrere Benutzer hinzu
<a name="how-to-add-participants"></a>

1. Um Anrufe mit mehreren Benutzern zu aktivieren, müssen Sie die [erweiterte Kontaktüberwachung für mehrere Teilnehmer von der Amazon Connect Konsole](monitor-conversations.md) aus aktivieren.

1. Sobald dieser Vorgang abgeschlossen ist, können Sie mithilfe der vorhandenen Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API einen Kontakt erstellen und diesen Kontakt an einen Agenten weiterleiten.

1. Um einen weiteren Teilnehmer hinzuzufügen, erstellen Sie zunächst einen Teilnehmer, `ContactId` der die [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API-Antwort an die [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)API weiterleitet. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)wird erst erfolgreich sein, wenn der ursprüngliche Anrufer eine Verbindung zum Agenten hergestellt hat. Die Video- und Bildschirmfreigabe-Funktionen für den Teilnehmer können im Feld `ParticipantDetails.ParticipantCapabilities` festgelegt werden.

1. Nach erfolgreichem [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)Abschluss wird ein [Teilnehmer-Token](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials) zurückgegeben. Dieses Token kann in einer Anfrage [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)mit der `Type` Einstellung auf verwendet werden`WEBRTC_CONNECTION`. Die Antwort beinhaltet [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting), welche für die Teilnahme an der Besprechung mithilfe der [Amazon Chime SDK-Clientbibliotheken](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html) für den zusätzlichen Teilnehmer verwendet werden können, die erstellt wurden. Folgen Sie den [Integrationsanleitungen](config-com-widget2.md), um dem Endbenutzer Ihrer Anwendung zu ermöglichen, am Meeting teilzunehmen.
**Anmerkung**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)gibt den Fehler Bad Request zurück, wenn der Agent noch nicht mit dem Kontakt verbunden ist. Informationen zu Geschäftsanwendungen, bei denen Benutzer versuchen können, am Meeting teilzunehmen, bevor der Kundendienstmitarbeiter verbunden wurde, finden Sie unter [Umgang mit der Teilnahme gleichzeitiger Benutzer](#handling-concurrent-joins).

1. Die zusätzlichen Kunden können nach der [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)Rücksendung jederzeit eine Verbindung herstellen. Nachdem die Teilnehmer verbunden wurden, [ähnelt sämtliches zusätzliches Sprach- und Aufzeichnungsverhalten dem der Mehrparteienfunktion](multi-party-calls.md). Die neuen Teilnehmer können ihr Video und ihre Bildschirmübertragung aktivieren, sofern ihre Funktionen in der [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)Anfrage aktiviert wurden.
**Anmerkung**  
Insgesamt können nur 6 Teilnehmer (Kunden und Kundendienstmitarbeiter) jederzeit an einem aktiven Anruf teilnehmen. Die Amazon-Chime-SDK-Clientbibliotheken geben einen Statuscode mit der Angabe zurück, dass die Kapazität des Anrufs ausgelastet ist, wenn während der Teilnahme am Meeting eine Aktion ausgeführt wird, um zusätzliche Teilnehmer über die maximale Anzahl hinaus hinzuzufügen.

1. Nachdem die Teilnehmer mit dem Anruf verbunden und dann für einen vorkonfigurierten Zeitraum ordnungsgemäß oder nicht ordnungsgemäß getrennt wurden, sind ihre Teilnehmeranmeldeinformationen nicht mehr gültig. Wenn der `onAudioVideoDidStop` Beobachter der Kundenbibliothek einen Statuscode erhält, der besagt, dass der Teilnehmer nicht mehr gültig ist, können Anwendungen einen neuen Anruf an [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)und [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)von Ihrem Geschäfts-Backend auslösen, um wieder an dem Anruf teilzunehmen.

1.  Amazon Connect [Erstellt für jede weitere Benutzerverbindung einen neuen Kontakt und einen neuen Kontaktdatensatz.](ctr-data-model.md) Alle zusätzlichen Kontakte haben den InitialContactId (d. h. den, der von der [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API erstellt wurde) PreviousContactId eingestellt, um ihn auf den ursprünglichen Kontakt zurückzuverfolgen. Jeder Kontaktdatensatz:
   + Hat ein **"InitiationMethod„: „WEBRTC\$1API**“
   + Hat die folgenden Segmentattribute:

     ```
        "SegmentAttributes": {
           "connect:Subtype": {
             "ValueString": "connect:WebRTC"
           }
         },
     ```

   Darüber hinaus hat jeder Kontaktdatensatz den Anzeigenamen, der in `CreateParticipant` angegeben ist. Die Informationen des Kundendienstmitarbeiters werden nicht für zusätzliche Benutzerkontakte ausgefüllt. Dies dient dazu, um die Duplizierung dieser Informationen zu vermeiden.

   Das folgende Diagramm zeigt, wie der vorherige und der nächste Kontakt in einem Szenario zugeordnet IDs werden, in dem mehrere Teilnehmer und Agenten zu einem Web-, In-App- oder Videoanruf hinzugefügt werden.  
![\[Diagramm, das zeigt, wie Kontakte für WebRTC-Anrufe mit mehreren Teilnehmern zugeordnet IDs werden\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## Umgang mit der Teilnahme gleichzeitiger Benutzer
<a name="handling-concurrent-joins"></a>

Unternehmen möchten möglicherweise Anwendungen erstellen, an denen Benutzer in einer beliebigen Reihenfolge und zu jeder Zeit teilnehmen können. Beispielsweise kann Ihre Anwendung einen Link mit einer externen Termin-ID per E-Mail an mehrere Benutzer senden, über den sie zu einem festgelegten Zeitpunkt an einem Anruf teilnehmen können. Um dieses Verhalten zu erzielen, müssen Unternehmens-Backends Folgendes sicherstellen:
+ Der erste Benutzer, der beitritt, löst eine Anfrage aus. StartWeb RTCContact 
+ Alle weiteren Benutzer verwenden CreateParticipant und, CreateParticipantConnection aber **erst, nachdem der erste Benutzer eine Verbindung zu einem Agenten hergestellt hat**.

In diesem Abschnitt wird eine mögliche Implementierung beschrieben, vorausgesetzt, Ihr Unternehmens-Backend enthält einen Speicher (wie DynamoDB), in dem Metadaten zu geplanten Terminen gespeichert werden können. Beachten Sie, dass geplante Termine kein Feature von Amazon Connect, sondern ein Teil der Beispielimplementierung sind.

Wenn der Benutzer zu der Seite navigiert, sollte er eine Anforderung an das Backend senden. Das Backend prüft:
+ Gibt an, ob der Benutzer den Termin beginnen kann und ob es der richtige Zeitpunkt ist.
+ Ob der Amazon Connect Kontakt bereits durch einen Anruf erstellt wurde [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html).

**Wenn der Kontakt noch nicht erstellt wurde**, sollte der Kunde die [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API mit einem benutzerdefinierten [Ablauf](connect-contact-flows.md) und einem [Attribut](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes) aufrufen, das die Agentenwarteschleife des entsprechenden Agenten angibt, von dem erwartet wurde, dass er dem Anruf beitreten würde. Der Ablauf sollte den Block [Arbeitswarteschlange festlegen](set-working-queue.md) beinhalten, der so konfiguriert ist, dass die in den Attributen angegebene Kundendienstmitarbeiter-Warteschlange verwendet wird. Der Ablauf sollte dann mit dem Block [An Warteschlange weiterleiten](transfer-to-queue.md) enden. Bevor die API aufgerufen wird, sollte das Backend den Speicher atomar aktualisieren, um den Aufruf vom Status „Keine“ in den Status „Wird erstellt“ zu versetzen und alle Ausnahmen gleichzeitiger Änderungen zu verarbeiten.

Die Anmeldeinformationen von [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)sollten an den Kunden zurückgeschickt werden und er sollte sofort am Anruf teilnehmen. Der Kontakt sollte zusammen mit der Kontakt-ID im Unternehmensspeicher als „Erstellt“ gekennzeichnet werden. **Diese Unternehmens-API muss zwischen allen möglichen dazukommenden Teilnehmern synchronisiert werden**. Dies kann mithilfe den von einer Datenbank bereitgestellten atomaren Vorgängen erfolgen.

**Wenn sich der Kontakt im Status „Wird erstellt“ befindet**, sollte für den zusätzlichen Benutzer dieser Status zurückgegeben, die entsprechenden Informationen angezeigt und dieser Vorgang nach einer kurzen Wartezeit erneut versucht werden.

**Wenn der Kontakt erstellt wurde**: Der Kunde sollte die Kontakt-ID abrufen und die [DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API aufrufen. Das Unternehmens-Backend sollte nach dem Feld **`Contact.AgentInfo.ConnectedToAgentTimestamp`** suchen. Wenn es nicht vorhanden ist, wurde der erste Benutzer nicht mit dem Kundendienstmitarbeiter verbunden. Der zusätzliche Benutzer sollte die entsprechenden Informationen anzeigen und es nach einer kurzen Wartezeit erneut versuchen.

Wenn das Feld existiert, sollte das Backend aufrufen [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)und dann [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html), wie in den vorherigen Abschnitten beschrieben [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting), abrufen.

Der Backend-Ablauf sollte wie folgt aussehen.

![\[Backend-Flussdiagramm für die Verarbeitung gleichzeitiger Benutzerteilnahmen\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/multiparty-backend-flow.png)


Informationen zur Implementierung finden Sie in den [In-App-Anrufbeispielen von Amazon Connect](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web). GitHub 

**Der Kundendienstmitarbeiter nimmt nicht über dieselbe Website teil**. Der Kundendienstmitarbeiter sollte seinen Status im [Contact Control Panel](launch-ccp.md) auf **Verfügbar** festlegen. Wenn der erste Kunde teilnimmt, wird der Kundendienstmitarbeiter automatisch angerufen.

## Fakturierung
<a name="multiuser-billing"></a>

Die Abrechnung für zusätzliche Teilnehmer entspricht der bestehenden Abrechnung für den ersten Kunden und alle am Anruf teilnehmenden Kundendienstmitarbeiter. Für die Audio-, Video- und Bildschirmfreigabe fallen jeweils eigene, teilnehmerspezifische Gebühren an.

## Verhalten während Wartezeit
<a name="multiuser-hold-behavior"></a>

Während eines Videoanrufs oder einer Bildschirmfreigabe-Sitzung können Kundendienstmitarbeiter das Video oder den freigegebenen Bildschirm des Teilnehmers sehen, auch wenn der Teilnehmer in die Warteschleife gestellt wurde. Es liegt in der Verantwortung des Teilnehmers, die persönlich identifizierbaren Informationen entsprechend zu behandeln. Bei Verwendung der nativen CCP-Anwendung ist das Video des Kundendienstmitarbeiters deaktiviert, wenn ein Teilnehmer, der kein Kundendienstmitarbeiter ist, in die Warteschleife gestellt wurde. Wenn Sie dieses Verhalten ändern möchten, können Sie ein benutzerdefiniertes CCP und ein Kommunikations-Widget erstellen. 

Weitere Informationen finden Sie unter [Native Integration von In-App-, Web- und Videoanrufen sowie Bildschirmfreigabe-Funktionen in Ihre mobile Anwendung](config-com-widget2.md). 

## Einschränkung
<a name="multiuser-limitations"></a>

Bei der Erstellung zusätzlicher Teilnehmer für In-App-, Web- und Videoanrufe sowie für die Bildschirmfreigabe gilt die folgende Einschränkung:
+ Für die zusätzlichen Teilnehmer dürfen die Videofunktionen nicht auf **Senden** festgelegt sein, wenn der ursprüngliche Kontakt erstellt wurde und dabei die Videofunktionen des Kunden auf **Keine** festgelegt waren.

# Personalisieren des Kundenerlebnisses für In-App-, Web- und Videoanrufe in Amazon Connect
<a name="optional-widget-steps"></a>

Die Schritte in diesem Thema sind optional, werden aber empfohlen. Sie können damit das Kundenerlebnis auf der Grundlage der zuvor in Ihrer App durchgeführten Aktionen personalisieren. Diese Option bietet Ihnen mehr Kontrolle beim Einleiten neuer Anrufe, einschließlich der Möglichkeit, Kontextinformationen als Attribute zu übergeben.

 Nachdem Sie diese Schritte ausgeführt haben, müssen Sie mit Ihrem Website-Administrator zusammenarbeiten, um Ihre Webserver so einzurichten, dass sie JSON-Web-Tokens (JWTs) für neue Aufrufe ausgeben

1. Wenn Sie Ihr Kommunikations-Widget bereits erstellt haben, wählen Sie das Widget auf der Seite **Kommunikations-Widgets** aus, um es zu bearbeiten. 

1. Wählen Sie im Abschnitt **Domain und Sicherheit** die Option **Bearbeiten** aus. 

1. Wählen Sie unter **Mehr Sicherheit für Ihre Kommunikations-Widget-Anfragen** die Option **Ja** aus.  
![\[Die Option „Ja“.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. Wählen Sie **Save and continue** aus. Amazon Connect erstellt das Widget zusammen mit Folgendem:
   + Amazon Connect stellt auf der nächsten Seite einen 44-stelligen Sicherheitsschlüssel bereit, den Sie zum Erstellen JWTs verwenden können.
   + Amazon Connect fügt dem Einbettungsskript für das Kommunikations-Widget eine Callback-Funktion hinzu, die nach einem JWT sucht, wenn ein Anruf initiiert wird.

     Sie müssen die Callback-Funktion im Einbettungscode implementieren, wie im folgenden Beispiel gezeigt.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Im nächsten Schritt erhalten Sie einen Sicherheitsschlüssel für alle Anrufe, die auf Ihren Websites initiiert wurden. Bitten Sie Ihren Website-Administrator, Ihre Webserver so einzurichten, dass sie JWTs mit diesem Sicherheitsschlüssel ausgeben. 

1. Wählen Sie **Save and continue** aus.

1. Kopieren Sie den benutzerdefinierten HTML-Codeausschnitt und fügen Sie ihn in den Quellcode Ihrer Website ein.

## Alternative Methode: Weitergeben von Kontaktattributen direkt aus dem Codeausschnitt
<a name="pass-attrib-from-code"></a>

**Anmerkung**  
Diese Attribute haben zwar den Gültigkeitsbereich des Präfixes `HostedWidget-`, sind aber dennoch clientseitig veränderbar. Verwenden Sie das JWT-Setup, wenn Sie persönlich identifizierbare Informationen oder unveränderliche Daten in Ihrem Kontaktablauf benötigen. 

Das folgende Beispiel zeigt, wie Kontaktattribute direkt aus dem Codeausschnitt weitergegeben werden, ohne die Widget-Sicherheit zu aktivieren. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...
  
  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Verwenden der Attribute in Kontaktabläufen
<a name="contact-flow-usage-voice"></a>

Der Ablaufblock [Kontaktattribute prüfen](check-contact-attributes.md) ermöglicht den Zugriff auf diese Attribute mithilfe des Namespace **Benutzerdefiniert**, wie in der folgenden Abbildung dargestellt. Sie können den Ablaufblock verwenden, um Verzweigungslogik hinzuzufügen. Der vollständige Pfad lautet `$Attribute.HostedWidget-attributeName`. 

![\[Die Abbildung zeigt einen Ablaufblock, der zu den Prompts „Gültig“ und „Ungültig“ verzweigt.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Kopieren des Codes und der Sicherheitsschlüssel für das Kommunikations-Widget
<a name="copy-widget-script4"></a>

In diesem Schritt bestätigen Sie Ihre Auswahl, kopieren den Code für das Kommunikations-Widget und betten ihn in Ihre Website ein. Sie können auch die geheimen Schlüssel für die Erstellung des kopieren JWTs. 

### Sicherheitsschlüssel
<a name="widget-security-key4"></a>

Verwenden Sie diesen 44-stelligen Sicherheitsschlüssel, um JSON-Webtoken von Ihrem Webserver aus zu generieren. Sie können Schlüssel auch aktualisieren oder rotieren, wenn Sie sie ändern müssen. Wenn Sie dies tun, stellt Ihnen Amazon Connect einen neuen Schlüssel zur Verfügung und behält den vorherigen Schlüssel bei, bis Sie ihn ersetzen können. Nachdem Sie den neuen Schlüssel bereitgestellt haben, können Sie zu Amazon Connect zurückkehren und den vorherigen Schlüssel löschen.

![\[Der Sicherheitsschlüssel.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/chatwidget-security-key.png)


Wenn Kunden mit dem Anrufstartsymbol auf Ihrer Website interagieren, fordert das Kommunikations-Widget vom Webserver ein JWT an. Wenn dieses JWT bereitgestellt wird, nimmt das Widget es als Teil des Anrufs des Endkunden an Amazon Connect auf. Amazon Connect verwendet dann den geheimen Schlüssel, um das Token zu entschlüsseln. Wenn dies erfolgreich möglich ist, bestätigt es, dass das JWT von Ihrem Webserver ausgestellt wurde, und Amazon Connect leitet den Anruf an Ihre Kundendienstmitarbeiter im Contact Center weiter.

#### Einzelheiten zum JSON-Web-Token
<a name="jwts4"></a>
+ Algorithmus: **HS256**
+ Claims: 
  + **Sub**: *widgetId*

    Ersetzen Sie `widgetId` durch Ihre eigene WidgetID. Um Ihre WidgetID zu finden, sehen Sie sich das Beispiel-[Skript für das Kommunikations-Widget](add-chat-to-website.md#chat-widget-script) an.
  + **iat**: \$1Ausgabezeitpunkt.
  + **exp**: \$1Flow (maximal 10 Minuten).

  \$1Informationen zum Datumsformat finden Sie im folgenden Dokument der Internet Engineering Task Force (IETF): [JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519), Seite 5. 

Der folgende Codeblock zeigt ein Beispiel für die Generierung eines JWT in Python:

```
payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

#### Skript für das Kommunikations-Widget
<a name="chat-widget-script4"></a>

Die folgende Abbildung zeigt ein Beispiel dafür JavaScript , wie Sie es auf Websites einbetten, auf denen Kunden Ihr Kontaktzentrum anrufen können sollen. Dieses Skript zeigt das Widget in der unteren rechten Ecke Ihrer Website an. 

Die folgende Abbildung zeigt, wo Sie Ihre WidgetID finden.

![\[Skript für das Kommunikations-Widget\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/chatwidget-code.png)


Wenn Ihre Website geladen wird, sehen Kunden zuerst das Symbol **Starten**. Wenn sie dieses Symbol auswählen, wird das Kommunikations-Widget geöffnet und die Kunden können Ihre Kundendienstmitarbeiter anrufen.

Sie können jederzeit Änderungen am Kommunikations-Widget über **Bearbeiten** vornehmen.

**Anmerkung**  
Gespeicherte Änderungen aktualisieren die Kundenumgebung in wenigen Minuten. Überprüfen Sie Ihre Widget-Konfiguration, bevor Sie sie speichern. 

![\[Der Link zum Bearbeiten in der Widget-Vorschau.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/chatwidget-call-edit.png)


Damit Änderungen an Widget-Symbolen auf der Website wirksam werden, müssen Sie Ihre Website direkt mit einem neuen Codeblock aktualisieren.

# Zusätzliche Anpassungen für das Webanruf-Widget in Amazon Connect
<a name="more-customizations-web-calling-widget"></a>

Sie können Ihrem Webanruf-Widget die folgenden zusätzlichen Anpassungen hinzufügen:
+ Wenden Sie die Option [Unschärfe im Hintergrund](#background-blur) auf die Videokachel Ihres Kunden an.
+ Stellen Sie das Widget auf [Vollbild](#fullscreen-mode) ein.
+ Wählen Sie die [Standardkamera](#choose-default-camera) aus.
+ [Passen Sie die Größe des Videos so an](#resize-video), dass es in seinen Container passt.

In den folgenden Abschnitten werden die detaillierten Anpassungen sowie ihre Anwendungsfälle und ihre Konfiguration erläutert. Sie verwalten diese Anpassungen durch Konfigurieren von `WebCallingCustomizationObject`.

**Topics**
+ [Unschärfe im Hintergrund](#background-blur)
+ [Vollbildmodus](#fullscreen-mode)
+ [Auswählen der Standardkamera](#choose-default-camera)
+ [Anpassen der Videobildgröße](#resize-video)
+ [Konfigurieren des Anpassungsobjekts](#configure-customization-object-web)
+ [Unterstützte Optionen und Beschränkungen](#supported-options-web-calling)

## Unschärfe im Hintergrund
<a name="background-blur"></a>

Diese Anpassung steuert das Verhalten der Unschärfe im Hintergrund des Kundenvideos. Wenn diese Option aktiviert ist, ist der Hintergrund des Kunden bei aktivem Videoanruf unscharf. Dies trägt zum Schutz seiner persönlichen Daten oder privaten Bereiche bei, die während des Videoanrufs möglicherweise im Hintergrund sichtbar sind.

Um die Hintergrundunschärfe zu aktivieren, legen Sie `videoFilter.backgroundBlur.option` in `WebCallingCustomizationObject` auf `ENABLED_ON_BY_DEFAULT` fest.

## Vollbildmodus
<a name="fullscreen-mode"></a>

Verwenden Sie diese Anpassung, um das Verhalten des Widgets im Vollbildmodus zu steuern. Es gibt zwei Methoden zum Aktivieren des Vollbildmodus: 
+ Fügen Sie dem Widget die Schaltfläche „Vollbild“ hinzu. Der Kunde kann die Schaltfläche verwenden, um den Vollbildmodus zu aktivieren und zu deaktivieren.

  Um die Schaltfläche „Vollbild“ hinzuzufügen, legen Sie `fullscreen.displayButton` auf `ENABLED` fest. 

ODER
+ Stellen Sie das Widget beim Laden auf den Vollbildmodus ein.

  Um den Vollbildmodus beim Laden zu aktivieren, legen Sie `fullscreen.fullscreenOnLoad` auf `ENABLED` fest.

Die Verwendung des Vollbildmodus ist besonders hilfreich, wenn sich der Kunde auf das Widget konzentrieren muss, z. B. bei der Bildschirmfreigabe.

Sie können diese beiden Optionen einzeln oder in Kombination verwenden.

## Auswählen der Standardkamera
<a name="choose-default-camera"></a>

Diese Anpassung ermöglicht es dem Widget, die Standardkamera auszuwählen, wenn Ihr Kunde das Video aktiviert, und bietet Optionen für die front- oder rückseitige Kamera. Diese Funktion ist beispielsweise für die Ferndiagnose von Geräten nützlich. Der Kunde kann die rückseitige Kamera verwenden, um dem Kundendienstmitarbeiter das Gerät zu zeigen.

Um die rückseitige Kamera als Standard auszuwählen, legen Sie `devices.defaultCamera` auf `Back` fest.

## Anpassen der Videobildgröße
<a name="resize-video"></a>

Diese Anpassung steuert, wie die Größe der Videokacheln für den Kunden und den Kundendienstmitarbeiter im Widget geändert werden. Beispielsweise kann die Größe des Video-Frames so geändert werden, dass die gesamte Videokachel ausgefüllt wird. Die Größe kann auch entsprechend der Größe der Videokachel skaliert werden, sodass Leerräume übrig bleiben, wenn das Seitenverhältnis des Video-Frames nicht mit der Videokachel übereinstimmt.
+ Um die Größe des Videos für den Kunden zu ändern, legen Sie `videoTile.localVideoObjectFit` auf den Zielwert fest.
+ Um die Größe des Videos für den Kundendienstmitarbeiter zu ändern, legen Sie `videoTile.remoteVideoObjectFit` auf den Zielwert fest.

Weitere Informationen finden Sie unter [Unterstützte Optionen und Beschränkungen](#supported-options-web-calling).

## Konfigurieren des Anpassungsobjekts
<a name="configure-customization-object-web"></a>

Das folgende Beispiel veranschaulicht, wie Sie alle optionalen Anpassungen für Webanrufe implementieren. Eine detaillierte Beschreibung dieser Optionen finden Sie unter [Unterstützte Optionen und Beschränkungen](#supported-options-web-calling). 

Sie können einige oder alle der im folgenden Beispiel angegebenen Felder implementieren. Wenn Sie keine Anpassungen implementieren, wird das Standardverhalten für die fehlenden Felder angewendet.

```
amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        },
        copyDisplayNameFromAuthenticatedChat: true
});
```

In der folgenden Abbildung sind die Anpassungen dargestellt, wenn sie sich nicht im Vollbildmodus befinden. 

![\[Anpassungen, wenn sie sich nicht im Vollbildmodus befinden.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/fullscreenmode.png)


In der folgenden Abbildung sind die Anpassungen im Vollbildmodus dargestellt.

![\[Anpassungen im Vollbildmodus.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/nonfullscreenmode.png)


## Unterstützte Optionen und Beschränkungen
<a name="supported-options-web-calling"></a>

In der folgenden Tabelle sind die Namen von unterstützten Anpassungsfeldern und die empfohlenen Beschränkungen der Werte aufgeführt.


| Benutzerdefinierte Layoutoption | Typ | Werte | Description | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  Zeichenfolge  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  Stellt die Unschärfe im Hintergrund der Kunden-Videokachel ein. Wenn Ihr Kunde Video aktiviert, wird der Filter für Hintergrundunschärfe standardmäßig auf die Videokachel angewendet. Wenn Sie den Filter nicht standardmäßig aktivieren möchten, können Sie ihn auf `ENABLED_OFF_BY_DEFAULT` festlegen. Ihr Kunde kann den Filter auf der Einstellungsseite des Widgets trotzdem manuell aktivieren. | 
|  `fullscreen.displayButton`  |  Zeichenfolge  |  `ENABLED`  |  Fügt eine Schaltfläche in der oberen rechten Ecke des Widgets hinzu, um es im Browser im Vollbildmodus anzuzeigen. Standardmäßig wird diese Schaltfläche nicht zum Widget hinzugefügt. Wenn Sie diese Schaltfläche hinzufügen möchten, können Sie sie auf `ENABLED` festlegen. | 
|  `fullscreen.fullscreenOnLoad`  |  Zeichenfolge  |  `ENABLED`  |  Zeigt das Widget im Browser im Vollbildmodus an. Standardmäßig wird das Widget in der unteren rechten Ecke der Webseite verankert. Wenn Sie das Widget auf `ENABLED` festlegen, wird es im Browser im Vollbildmodus angezeigt. | 
|  `devices.defaultCamera`  |  Zeichenfolge  |  `Front` \$1 `Back`  | Legt die Standardkamera fest, wenn Ihr Kunde Video aktiviert. Diese Option ist für Anwendungsfälle auf Mobilgeräten oder Tablets vorgesehen. Standardmäßig wird die Standardkamera ausgewählt ([detail](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (Weitere Informationen finden Sie in der Mozilla-Entwicklerdokumentation [zur MethodeMediaDevices: enumerateDevices ()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices).) Wenn Sie den Wert auf `Front\|Back` einstellen, wird die entsprechende Kamera ausgewählt, sofern verfügbar. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  boolesch  |  `true` \$1 `false`  | Wenn der Endkunde mithilfe des Ablaufblocks [Kunden authentifizieren](authenticate-customer.md) authentifiziert wird, wird der Anzeigename bei Festlegen des Werts auf `true` in den Sprachkontakt kopiert. Der Standardwert ist `false`. | 
|  `videoTile.localVideoObjectFit`  |  Zeichenfolge  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  Legt die Eigenschaft [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) der Kunden-Videokachel im Widget fest. Standardmäßig wird der Wert durch die Breite und Höhe der Videoauflösung bestimmt: Wenn die Höhe größer als die Breite ist, lautet der Wert `contain`, andernfalls `cover`. Eine ausführliche Beschreibung der einzelnen Werte finden Sie unter [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) in der Mozilla-Entwicklerdokumentation.  Dieses Attribut wird nur auf die Anzeigehöhe und -breite des Kundenvideos im Widget angewendet. Die Höhe und Breite des Kundenvideos, das an den Kundendienstmitarbeiter gesendet wird, bleiben unverändert.  | 
|  `videoTile.remoteVideoObjectFit`  |  Zeichenfolge  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | Legt die Eigenschaft [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) der Kunden-Videokachel im Widget fest. Standardmäßig wird der Wert durch die Breite und Höhe der Videoauflösung bestimmt: Wenn die Höhe größer als die Breite ist, lautet der Wert `contain`, andernfalls `cover`. Eine ausführliche Beschreibung der einzelnen Werte finden Sie unter [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) in der Mozilla-Entwicklerdokumentation.  Dieses Attribut wird nur auf die Anzeigehöhe und -breite des Kundendienstmitarbeiter-Videos im Widget angewendet.   | 

# Integrieren von Videoanrufen und Bildschirmfreigabe-Funktionen mithilfe von Amazon Connect Streams JS in Ihren benutzerdefinierten Desktop für Kundendienstmitarbeiter
<a name="integrate-video-calling-for-agents"></a>

Dieses Thema richtet sich an Entwickler. Bei benutzerdefinierten Desktops für Kundendienstmitarbeiter müssen Sie Änderungen vornehmen, um Videoanrufe und die Bildschirmfreigabe zu unterstützen. Im Folgenden sind allgemeine Schritte hierfür aufgeführt.

**Anmerkung**  
Wenn Sie das CCP direkt in Ihre benutzerdefinierte Kundendienstmitarbeiteranwendung einbetten, stellen Sie sicher, dass `allowFramedVideoCall` auf „true“ gesetzt ist, wenn Sie das CCP mit [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) initiieren.

1. Verwenden Sie [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams), um zu überprüfen, ob es sich bei dem eingehenden Kontakt um einen WebRTC-Kontakt handelt. Verwenden Sie den Kontaktuntertyp `"connect:WebRTC"`, wie im folgenden Codebeispiel zu sehen:

   `contact.getContactSubtype() === "connect:WebRTC"`

1. Sie können den Anzeigenamen des Kunden über das Namensfeld in ` contact contact.getName()` abrufen.

## Hinzufügen der Unterstützung für Videos
<a name="support-video"></a>

Führen Sie die folgenden Schritte aus, um Unterstützung für die Videoverarbeitung hinzuzufügen, sofern Ihre Kunden diese Option aktiviert haben.

1. So überprüfen Sie, ob ein Kontakt über Videofunktionen verfügt:

   ```
   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()
   ```

1. So überprüfen Sie, ob der Kundendienstmitarbeiter über Videoberechtigung zur Bearbeitung von Videoanrufen verfügt:

   `agent.getPermissions().includes('videoContact');`

1. Um einen Videoanruf anzunehmen, muss der Kontakt über Videofunktionen und der Kundendienstmitarbeiter über eine Videoberechtigung verfügen.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Um an einer Videositzung teilzunehmen, rufen Sie `getVideoConnectionInfo` auf.

   ```
   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Informationen zum Erstellen einer Video-Benutzeroberfläche und zur Teilnahme an einer Videokonferenz finden Sie unter:
   + [Amazon Chime SDK für JavaScript](https://github.com/aws/amazon-chime-sdk-js) GitHub 
   + [Amazon Chime SDK React Components Library](https://github.com/aws/amazon-chime-sdk-component-library-react) aktiviert GitHub

1. Der Einfachheit halber verwenden die folgenden Codefragmente Beispiele aus der Amazon Chime SDK React Components Library.

   ```
   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }
   ```

1. Verwenden Sie zum Rendern des Videorasters die React Components Library [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)aus der Amazon Chime SDK oder passen Sie das Verhalten der Benutzeroberfläche mithilfe von an. [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page) 

1. Um eine Videovorschau zu rendern, können Sie die [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)Komponenten [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)und verwenden. Um ein Kameravideo auszuwählen oder zu ändern, können Sie `meetingManager.selectVideoInputDevice` oder `meetingManager.startVideoInput ` verwenden, wenn die Konferenz gerade läuft.

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. Informationen zur Implementierung von Hintergrundunschärfe finden Sie unter [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

1. Einen Beispielcode zum Erstellen eines benutzerdefinierten Videoerlebnisses finden Sie in diesem Amazon Chime -SDK-Beispiel: [Amazon Chime React Meeting – Demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Hinzufügen der Unterstützung für die Bildschirmfreigabe
<a name="support-screen-sharing"></a>

**Anmerkung**  
Wenn Sie das out-of-box CCP direkt in Ihrer benutzerdefinierten Agentenanwendung verwenden, stellen Sie sicher`allowFramedScreenSharing`, dass `allowFramedScreenSharingPopUp` es auf true gesetzt ist, wenn Sie das CCP mit [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams) JS initiieren.   
Durch Festlegen des Werts `allowFramedScreenSharing` auf „true“ wird die Schaltfläche für die Bildschirmfreigabe nur auf einem CCP in einem Fenster oder einer Registerkarte aktiviert. Wenn der Wert `allowFramedScreenSharingPopUp` auf „true“ festgelegt ist, wird die Bildschirmfreigabe-App in einem separaten Fenster gestartet, wenn der Kundendienstmitarbeiter die Bildschirmfreigabe-Schaltfläche auswählt. Weitere Informationen finden Sie in der Dokumentation zu [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

Führen Sie die folgenden Schritte aus, um die Bildschirmfreigabe auf Ihren benutzerdefinierten Kundendienstmitarbeiter-Desktops zu aktivieren. 

1. Überprüfen Sie, ob ein Kontakt über die Bildschirmfreigabe-Funktionen verfügt. 

   ```
   // Return true if any connection has screen sharing send capability
   contact.hasScreenShareCapability()
   
   // Return true if the agent connection has screen sharing send capability
   contact.canAgentSendScreenShare()
   
   // Return true if customer connection has screen sharing send capability
   contact.canCustomerSendScreenShare()
   ```

1. Überprüfen Sie, ob der Kundendienstmitarbeiter über die Videoberechtigung verfügt.

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. Überprüfen Sie, ob der Kundendienstmitarbeiter eine Bildschirmfreigabe-Sitzung für den berechtigten Kontakt einleiten kann.

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Rufen Sie `startScreenSharing` auf, um die Bildschirmfreigabe-Sitzung zu initiieren. Dadurch wird `ScreenSharingActivated` zum Kontakt hinzugefügt, sodass Sie im [Kontaktdatensatz](ctr-data-model.md) danach suchen können. 

   ```
   contact.startScreenSharing();
   ```

1. Rufen Sie `getVideoConnectionInfo` auf, um an der Sitzung teilzunehmen. Sie können diesen Schritt überspringen, wenn der Kundendienstmitarbeiter an der Videositzung zum Verarbeiten des Videos teilgenommen hat.

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Nehmen Sie an der Sitzung teil, indem Sie die Komponentenbibliothek von Amazon Chime SDK React verwenden. Einen Codeausschnitt finden Sie in Schritt 6 unter [Hinzufügen der Unterstützung für Videos](#support-video).

1. Verwenden Sie dasselbe [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)aus dem Amazon Chime SDK React Components, um eine Video-Kachel zur Bildschirmübertragung zu rendern. [Weitere Informationen finden Sie unter [useContentShareStatus](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) und Steuerung useContentShare](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Rufen Sie `stopScreenSharing` auf, wenn die Sitzung beendet ist.

   ```
   contact.stopScreenSharing();
   ```

1. Sie können Ereignisse für Bildschirmfreigabe-Aktivitäten erhalten, indem Sie die folgenden Rückrufe abonnieren:

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```

# Aktivieren der URL-Beschränkung für die Bildschirmfreigabe
<a name="screen-sharing-url-restriction"></a>

Sie können festlegen URLs , welche Informationen Ihre Kunden und Agenten während des Kontakts teilen dürfen. Auf diese Weise können Sie eine bessere Sicherheit und einen besseren Datenschutz erzielen. Wenn ein Kunde oder ein Kundendienstmitarbeiter eine nicht zugelassene URL freigibt, erhält er eine Fehlermeldung und das Bildschirmfreigabe-Video wird automatisch angehalten und ausgeblendet. 

**Wichtig**  
Folgende Browser werden unterstützt:   
Chrome Version 109 und höher
Edge Version 109 und höher
Kundendienstmitarbeiter und Kunden können nur die Browser-Registerkarte freigeben. Sie können nicht das Fenster oder den gesamten Bildschirm freigeben. Wenn Sie dieses Feature aktivieren und Ihre Kunden oder Kundendienstmitarbeiter einen nicht unterstützten Browser bzw. ein nicht unterstütztes Fenster oder den gesamten Bildschirm verwenden, erhalten sie eine Fehlermeldung.

Führen Sie die folgenden Schritte aus, um die URL-Einschränkung für die Bildschirmfreigabe zu aktivieren.

## Schritt 1: Erstellen Sie eine URLs Liste der erlaubten Personen
<a name="step1-url-restriction"></a>

Sie konfigurieren die Listen der zulässigen Dateien URLs mithilfe vordefinierter Attribute. Führen Sie folgende Schritte aus:

1. Wählen Sie auf der Amazon Connect Admin-Website **** Routing****, **Vordefinierte Attribute**, **Vordefiniertes Attribut hinzufügen** aus.

1. Fügen Sie im Abschnitt **Vordefiniertes Attribut hinzufügen** im Feld **Vordefiniertes Attribut** eine der folgenden Optionen hinzu.
   + Geben Sie `screensharing:customer-allowed-urls` ein, um eine Zulassungsliste für die Bildschirmfreigabe durch den Kunden zu erstellen.
   + Geben Sie `screensharing:agent-allowed-urls` ein, um eine Zulassungsliste für die Bildschirmfreigabe durch den Kundendienstmitarbeiter zu erstellen.

1. Geben Sie im Feld **Wert** die zulässige URL ein. Dabei kann es sich um eine vollständig formatierte URL oder um ein Zeichenfolgemuster für den Abgleich von Teilzeichenfolgen handeln, z. B. ` https://mycompany` oder ` /mytransactions`. In der folgenden Tabelle sind Beispiele für gültige Formate angegeben.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. Speichern Sie die Liste. Sie URLs werden auf der Seite **Vordefinierte Attribute** angezeigt, wie im folgenden Beispiel gezeigt.   
![\[Die Seite „Vordefinierte Attribute“.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## Schritt 2: Hinzufügen eines Skripts zur Website-Liste
<a name="step2-url-restriction"></a>

Sie müssen ein Skript in Ihre Website integrieren, damit die URL der Seite für die zu erfassende Anwendung angezeigt werden kann. Sie erhalten den Capture-Handler aus einer Datei auf dem CloudFront Amazon-Endpunkt, den Amazon Connect hostet. Führen Sie anschließend die folgenden Anleitungen aus.

1. Wählen Sie auf der Amazon Connect Admin-Website **Kanäle**, **Widgets kommunizieren** aus. Suchen Sie auf der Übersichtsseite des Kommunikations-Widgets nach dem Widget-Skript. Rufen Sie den Endpunkt aus dem Attribut `s.src` ab, wie im folgenden Beispiel dargestellt.   
![\[Das Widget-Skript.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   Der Endpunkt kann sich in einer anderen AWS Region als Ihre Amazon Connect Connect-Instance befinden. Für optimale Performance empfehlen wir, die gleiche Region wie Ihre Amazon-Connect-Instance zu verwenden. 

1. Ersetzen Sie den folgenden Platzhalter `${endpoint}` durch den Wert aus dem vorherigen Schritt. Kopieren Sie den gesamten Codeausschnitt und fügen Sie ihn auf der obersten Ebene Ihrer Website ein.

   ```
   <script type="text/javascript" src='${endpoint}/amazon-connect-url-restriction.js'></script>
   ```