Integrieren von Videoanrufen und Bildschirmfreigabe-Funktionen mithilfe von Amazon Connect Streams JS in Ihren benutzerdefinierten Desktop für Kundendienstmitarbeiter - Amazon Connect
Hinzufügen der Unterstützung für VideosHinzufügen der Unterstützung für die Bildschirmfreigabe

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.

Integrieren von Videoanrufen und Bildschirmfreigabe-Funktionen mithilfe von Amazon Connect Streams JS in Ihren benutzerdefinierten Desktop für Kundendienstmitarbeiter

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 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.

Hinzufügen der Unterstützung für Videos

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

  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:

  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. Einen Beispielcode zum Erstellen eines benutzerdefinierten Videoerlebnisses finden Sie in diesem Amazon Chime -SDK-Beispiel: Amazon Chime React Meeting – Demo.

Hinzufügen der Unterstützung für die Bildschirmfreigabe

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.

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.

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

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

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

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

  4. Rufen Sie startScreenSharing auf, um die Bildschirmfreigabe-Sitzung zu initiieren. Dadurch wird ScreenSharingActivated zum Kontakt hinzugefügt, sodass Sie im Kontaktdatensatz danach suchen können. 

    contact.startScreenSharing();

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

  6. 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.

  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 stopScreenSharing auf, wenn die Sitzung beendet ist.

    contact.stopScreenSharing();

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