Integrieren von Videoanrufen in Ihren benutzerdefinierten Desktop für Kundendienstmitarbeiter - Amazon Connect

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 in Ihren benutzerdefinierten Desktop für Kundendienstmitarbeiter

Bei benutzerdefinierten Desktops für Kundendienstmitarbeiter müssen Sie Änderungen vornehmen, um Videoanrufe zu unterstützen. Im Folgenden sind allgemeine Schritte hierfür aufgeführt.

Anmerkung

Wenn Sie das CCP direkt in Ihre benutzerdefinierte Agentenanwendung einbetten, stellen Sie sicher, dass es auf true gesetzt allowFramedVideoCall ist, wenn Sie die CCP Verwendung von 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 RTC Webkontakt 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.

Im Folgenden finden Sie zusätzliche Schritte für die Handhabung von Videos, falls Ihre Kunden dies ihrerseits 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 VideoTileGridaus der Amazon Chime SDK React-Komponentenbibliothek oder passen Sie das Verhalten der Benutzeroberfläche mithilfe von an. RemoteVideoTileProvider

  8. Um eine Videovorschau zu rendern, können Sie CameraSelectionKomponenten verwenden VideoPreview. 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 Meeting-Demo.