View a markdown version of this page

Integre las videollamadas y el uso compartido de pantallas en el escritorio personalizado de su agente mediante Connect Customer Streams JS - Amazon Connect Customer
Agregación de soporte para videoAgregación de compatibilidad con la pantalla compartida

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Integre las videollamadas y el uso compartido de pantallas en el escritorio personalizado de su agente mediante Connect Customer Streams JS

Este tema va dirigido a los desarrolladores. Para los escritorios personalizados de los agentes, debe realizar cambios para admitir las videollamadas y la pantalla compartida. Los siguientes son pasos de alto nivel.

nota

Si incorporas el CCP directamente en tu aplicación de agente personalizada, asegúrate de que allowFramedVideoCall esté configurado como verdadero cuando inicies el CCP con Connect Customer Streams JS.

  1. Usa Connect Customer Streams JS para comprobar si el contacto entrante es un contacto de WebRTC. Utilice el subtipo de contacto de "connect:WebRTC" tal y como se muestra en el ejemplo siguiente:

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

  2. Puede recuperar el nombre mostrado del cliente utilizando el campo de nombre de contact contact.getName().

Agregación de soporte para video

Complete los siguientes pasos para añadir compatibilidad con la gestión de video cuando sus clientes la tengan activada.

  1. Para comprobar si un contacto tiene capacidad de vídeo:

    // 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. Para comprobar si el agente tiene permiso de vídeo para gestionar una videollamada:

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

  3. Para aceptar una videollamada, el contacto debe poder recibir vídeo y el agente debe tener permiso para ver vídeo.

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

  4. Para unirse a una sesión de vídeo, llame al: getVideoConnectionInfo

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

  5. Para crear una interfaz de usuario de vídeo y unirse a una sesión de videoconferencia, consulte:

  6. Para simplificar, los siguientes fragmentos de código utilizan ejemplos de la biblioteca de componentes de React del Amazon Chime SDK.

    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. Para renderizar la cuadrícula de vídeo, usa la VideoTileGrid de la biblioteca de componentes de React del Amazon Chime SDK o personaliza el comportamiento de la interfaz de usuario con ella. RemoteVideoTileProvider

  8. Para renderizar una vista previa de un vídeo, puedes usar VideoPreview CameraSelection componentes. Para elegir o cambiar el vídeo de una cámara, puede utilizar meetingManager.selectVideoInputDevice o meetingManager.startVideoInput si la reunión está en curso.

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

  9. Para implementar el desenfoque de fondo, consulta usar BackgroundBlur.

  10. Para ver un ejemplo de código sobre cómo crear una experiencia de vídeo personalizada, consulte este ejemplo del SDK de Amazon Chime : demostración de Amazon Chime React Meeting.

Agregación de compatibilidad con la pantalla compartida

nota

Si usas el CCP listo para usar directamente en tu aplicación de agente personalizada, asegúrate de que allowFramedScreenSharingPopUp esté configurado allowFramedScreenSharing como verdadero cuando inicies el CCP con Connect Customer Streams JS.

Si allowFramedScreenSharing se establece en true, se habilita el botón para compartir pantalla solo en un CCP de una ventana o pestaña. Si allowFramedScreenSharingPopUp se establece en true, se inicia la aplicación para compartir pantalla en una ventana independiente cuando el agente selecciona el botón para compartir pantalla. Para obtener más información, consulte la documentación de Connect Customer Streams JS.

Complete los siguientes pasos para habilitar la pantalla compartida en los escritorios personalizados de los agentes.

  1. Compruebe si un contacto puede compartir la pantalla. 

    // 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. Compruebe si el agente tiene permiso de video.

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

  3. Compruebe si el agente puede iniciar una sesión de pantalla compartida para el contacto que cumpla los requisitos.

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

  4. Llame a startScreenSharing para iniciar la sesión de pantalla compartida. Esto añade ScreenSharingActivated al contacto, lo que le permite buscarlo en el registro de contactos. 

    contact.startScreenSharing();

  5. Llame a getVideoConnectionInfo para unirse a la sesión. Puede omitir este paso si el agente se ha unido a la sesión de video para gestionar el video.

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

  6. Únase a la sesión mediante React Components Library de Amazon Chime SDK. Para ver un fragmento de código, consulte el paso 6 de Agregación de soporte para video.

  7. Usa lo mismo VideoTileGrid de los componentes de React del SDK de Amazon Chime para renderizar un mosaico de vídeos de pantalla compartida. Para obtener más información, consulte uso y uso ContentShareState ContentShareControls

  8. Llame a stopScreenSharing cuando finalice la sesión.

    contact.stopScreenSharing();

  9. Puede recibir eventos para la actividad de pantalla compartida suscribiéndose a las siguientes devoluciones de llamadas:

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

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

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