Intégrez les appels vidéo et le partage d'écran dans votre bureau d'agent personnalisé à l'aide d'Amazon Connect Streams JS - Amazon Connect
Ajouter le support pour la vidéoAjouter la prise en charge du partage d'écran

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Intégrez les appels vidéo et le partage d'écran dans votre bureau d'agent personnalisé à l'aide d'Amazon Connect Streams JS

Cette rubrique s'adresse aux développeurs. Pour les bureaux d'agents personnalisés, vous devez apporter des modifications pour prendre en charge les appels vidéo et le partage d'écran. En voici les principales étapes.

Note

Si vous l'intégrez CCP directement dans votre application d'agent personnalisé, assurez-vous qu'allowFramedVideoCallil est défini sur true lorsque vous lancez l'CCPutilisation d'Amazon Connect Streams JS.

  1. Utilisez Amazon Connect Streams JS pour vérifier si le contact entrant est un RTC contact Web. Utilisez le sous-type de contact "connect:WebRTC", comme illustré dans l’exemple de code suivant :

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

  2. Vous pouvez extraire le nom d’affichage du client en utilisant le champ de nom dans contact contact.getName().

Ajouter le support pour la vidéo

Procédez comme suit pour ajouter la prise en charge de la gestion des vidéos lorsque vos clients l'ont activée.

  1. Pour vérifier si un contact dispose de la fonctionnalité vidéo :

    // 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. Pour vérifier si l’agent dispose de l’autorisation vidéo nécessaire pour traiter un appel vidéo :

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

  3. Pour accepter un appel vidéo, le contact doit disposer de la fonctionnalité vidéo et l’agent doit disposer de l’autorisation vidéo.

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

  4. Pour rejoindre une session vidéo, appelez getVideoConnectionInfo :

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

  5. Pour créer une interface utilisateur vidéo et rejoindre une session de visioconférence, consultez :

  6. Pour des raisons de simplicité, les extraits de code suivants utilisent des exemples de la bibliothèque de composants Amazon Chime SDK React.

    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. Pour afficher la grille vidéo, utilisez celle VideoTileGridde la bibliothèque de composants Amazon Chime SDK React ou personnalisez le comportement de l'interface utilisateur à l'aide de RemoteVideoTileProvider.

  8. Pour afficher un aperçu vidéo, vous pouvez utiliser VideoPreviewdes CameraSelectioncomposants. Pour choisir ou changer une caméra vidéo, vous pouvez utiliser meetingManager.selectVideoInputDevice ou meetingManager.startVideoInput si la visioconférence est en cours.

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

  9. Pour implémenter le flou d'arrière-plan, voir useBackgroundBlur.

  10. Pour un exemple de code expliquant comment créer une expérience vidéo personnalisée, consultez cet Amazon Chime SDK exemple : démo de Amazon Chime React Meeting.

Ajouter la prise en charge du partage d'écran

Note

Si vous l'utilisez out-of-box CCP directement dans votre application d'agent personnalisé, assurez-vous qu'allowFramedScreenSharingil est défini sur true lorsque vous lancez l'CCPutilisation d'Amazon Connect Streams JS. allowFramedScreenSharingPopUp

Le réglage sur allowFramedScreenSharing true active le bouton de partage d'écran CCP dans une seule fenêtre ou un seul onglet. Le réglage allowFramedScreenSharingPopUp sur true lance l'application de partage d'écran dans une fenêtre séparée lorsque l'agent choisit le bouton de partage d'écran. Pour plus de détails, consultez la documentation Amazon Connect Streams JS.

Procédez comme suit pour activer le partage d'écran sur les postes de travail de vos agents personnalisés.

  1. Vérifiez si un contact dispose d'une fonctionnalité de partage d'écran. 

    // 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. Vérifiez si l'agent dispose d'une autorisation vidéo.

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

  3. Vérifiez si l'agent peut lancer une session de partage d'écran pour le contact éligible.

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

  4. Appelez startScreenSharing pour lancer la session de partage d'écran. Cela s'ajoute ScreenSharingActivated au contact, vous permettant de le rechercher dans l'enregistrement du contact. 

    contact.startScreenSharing();

  5. Appelez getVideoConnectionInfo pour rejoindre la session. Vous pouvez ignorer l'étape si l'agent a rejoint la session vidéo pour gérer la vidéo.

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

  6. Rejoignez la session en utilisant la bibliothèque de composants Amazon Chime SDK React. Pour un extrait de code, reportez-vous à l'étape 6 de. Ajouter le support pour la vidéo

  7. Utilisez la même méthode que celle VideoTileGriddes composants Amazon Chime SDK React pour afficher une vignette vidéo de partage d'écran. Pour plus d'informations, voir useContentShareÉtat et useContentSharecontrôles

  8. Appelez à stopScreenSharing la fin de la session.

    contact.stopScreenSharing();

  9. Vous pouvez recevoir des événements liés à l'activité de partage d'écran en vous abonnant aux rappels suivants :

    initScreenSharingListeners() {
    this.contact.onScreenSharingStarted(() => {
        // Screen sharing session started
    });

    this.contact.onScreenSharingStopped(() => {
        // Screen sharing session ended
    });

    this.contact.onScreenSharingError((error) => {
        // Screen sharing session error occurred
    });
  }
}