Integrieren Sie Videoanrufe und Screensharing mit Amazon Connect Streams JS in Ihren individuellen Agenten-Desktop - Amazon Connect
Unterstützung für Video hinzufügenUnterstützung für Screensharing hinzufügen

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 Sie Videoanrufe und Screensharing mit Amazon Connect Streams JS in Ihren individuellen Agenten-Desktop

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

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:

  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.

Unterstützung für Screensharing 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 die CCP Verwendung von Amazon Connect Streams JS initiieren.

Die Einstellung allowFramedScreenSharing auf true aktiviert die Schaltfläche zur Bildschirmübertragung nur 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 den Amazon Chime SDK React-Komponenten, um eine Videokachel 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
    });
  }
}