Integrieren Sie Videoanrufe und Screensharing mit Amazon Connect Streams JS in Ihren individuellen Agenten-Desktop

PDFRSS

Dieses Thema richtet sich an Entwickler. Für benutzerdefinierte Agenten-Desktops müssen Sie Änderungen vornehmen, um Videoanrufe und Bildschirmübertragung 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 initiieren.

1. Verwenden Sie Amazon Connect Streams JS, 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"

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

Unterstützung für Video hinzufügen

Gehen Sie wie folgt vor, um Unterstützung für Videoverwaltung hinzuzufügen, sofern Ihre Kunden sie 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()

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

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

3. 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');
   }

4. Um an einer Videositzung teilzunehmen, rufen Sie getVideoConnectionInfo auf.

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

5. Informationen zum Erstellen einer Video-Benutzeroberfläche und zur Teilnahme an einer Videokonferenz finden Sie unter:

   • Amazon Chime SDK für JavaScript ein GitHub

   • Amazon Chime SDK React Components Library aktiviert GitHub

6. 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();
       }
   }    

7. Verwenden Sie zum Rendern des Videorasters die React Components Library VideoTileGridaus der Amazon Chime SDK oder passen Sie das Verhalten der Benutzeroberfläche mithilfe von an. RemoteVideoTileProvider

8. Um eine Videovorschau zu rendern, können Sie die CameraSelectionKomponenten VideoPreviewund 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);
   }

9. Informationen zur Implementierung von Hintergrundunschärfe finden Sie unter useBackgroundBlur.

10. Beispielcode zum Erstellen eines benutzerdefinierten Videoerlebnisses finden Sie in diesem Amazon Chime -SDK-Beispiel:Amazon Chime -React-Konferenz – Demo.

Unterstützung für Bildschirmübertragung hinzufügen

Anmerkung

Wenn Sie das out-of-box CCP direkt in Ihrer benutzerdefinierten Agentenanwendung verwenden, stellen Sie sicherallowFramedScreenSharing, dass allowFramedScreenSharingPopUp es auf true gesetzt ist, wenn Sie das CCP mit Amazon Connect Streams JS initiieren.

Die Einstellung allowFramedScreenSharing auf true aktiviert die Schaltfläche für die Bildschirmübertragung auf nur einem CCP in einem Fenster oder Tab. Wenn die Einstellung allowFramedScreenSharingPopUp auf true gesetzt ist, wird die Screensharing-App in einem separaten Fenster gestartet, wenn der Agent die Screensharing-Schaltfläche auswählt. Weitere Informationen finden Sie in der Amazon Connect Streams JS-Dokumentation.

Gehen Sie wie folgt vor, um die Bildschirmübertragung auf Ihren benutzerdefinierten Agenten-Desktops zu aktivieren.

1. Prüfen Sie, ob ein Kontakt Screensharing-Funktion besitzt.

   // 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()

2. Prüfen Sie, ob der Agent über Videoberechtigungen verfügt.

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

3. Prüfen Sie, ob der Mitarbeiter eine Screensharing-Sitzung für den geeigneten Kontakt einleiten kann.

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

4. Rufen Sie anstartScreenSharing, um die Screensharing-Sitzung zu starten. Dadurch wird ScreenSharingActivated der Kontakt erweitert, sodass Sie im Kontaktdatensatz danach suchen können.

   contact.startScreenSharing();

5. Rufen Sie getVideoConnectionInfo an, um an der Sitzung teilzunehmen. Sie können diesen Schritt überspringen, wenn der Agent an der Videositzung teilgenommen hat, um das Video zu bearbeiten.

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

6. Nehmen Sie an der Sitzung teil, indem Sie die Amazon Chime SDK React Components Library verwenden. Einen Codeausschnitt finden Sie in Schritt 6 unter. Unterstützung für Video hinzufügen

7. Verwenden Sie dasselbe VideoTileGridaus dem Amazon Chime SDK React Components, um eine Video-Kachel zur Bildschirmübertragung zu rendern. Weitere Informationen finden Sie unter useContentShareStatus und Steuerung useContentShare

8. Rufen Sie anstopScreenSharing, wenn die Sitzung beendet ist.

   contact.stopScreenSharing();

9. Sie können Ereignisse für die Screensharing-Aktivität 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
       });
     }
   }