Compartir a través de

Experiencia de extensión de llamadas

  • Artículo

Puede usar la experiencia de citas virtuales preconfigurada creada a través de la Reserva de citas virtuales de Microsoft Teams o a través de la API de Citas virtuales de Microsoft Graph para permitir que los consumidores se unan a una experiencia de citas virtuales alojada en Microsoft. Si dispone de Microsoft Teams Premium, puede personalizar aún más la experiencia mediante el tema Reunión, que le permite elegir las imágenes, logotipos y colores que se usarán en toda la experiencia. Azure Communication Services puede ayudar a los desarrolladores que quieran hospedar automáticamente la solución o personalizar la experiencia.

Azure Communication Services proporciona tres opciones de personalización:

  • Personalice la interfaz de usuario a través de compuestos de interfaz de usuario listos para usar.
  • Use los componentes y compuestos de la biblioteca de interfaz de usuario para compilar su propia distribución.
  • Creación de su propia interfaz de usuario con kits de desarrollo de software

Requisitos previos

Se espera que el lector de este artículo comprenda los temas siguientes:

Compuestos personalizables listos para usar de la interfaz de usuario

Puede integrar compuestos de reuniones listos para usar proporcionados por la biblioteca de interfaz de usuario de Azure Communication Service. Este compuesto proporciona componentes de React listos para usar que pueden integrarse en su aplicación web. Puede encontrar más detalles aquí sobre el uso de este compuesto con diferentes marcos web.

  1. En primer lugar, proporcione detalles sobre el usuario de la aplicación. Para ello, cree Argumentos del adaptador de llamadas de comunicación de Azure para contener la información sobre el id. de usuario, el token de acceso, el nombre para mostrar y la URL de la reunión de Teams.
const callAdapterArgs = {
        userId: new CommunicationUserIdentifier(<USER_ID>'),
        displayName: “Adele Vance”,
        credential: new AzureCommunicationTokenCredential('<TOKEN>'),
        locator: { meetingLink: '<TEAMS_MEETING_URL>'},
        endpoint: '<AZURE_COMMUNICATION_SERVICE_ENDPOINT_URL>';
}
  1. Cree un enlace de React personalizado con useAzureCommunicationCallAdapter para crear un adaptador de llamada.
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
  1. Devuelva el componente de React CallComposite que proporciona la experiencia de reunión.
return (
  <div>
    <CallWithChatComposite
      adapter={callAdapter}
    />
  </div>
);

Además, puede personalizar la interfaz de usuario con su propio tema para personalización y diseño de marca u optimizar la distribución para escritorio o móvil. Si desea personalizar aún más el diseño, puede usar componentes de interfaz de usuario preexistentes, tal como se describe en la sección posterior.

Crear su propio diseño con componentes de la interfaz de usuario

La biblioteca de interfaz de usuario de Azure Communication Services le da acceso a componentes individuales para personalizar su interfaz de usuario y su comportamiento. En la imagen siguiente se resaltan los componentes individuales que están disponibles para su uso.

El diagrama muestra la distribución de la reunión descompuesta en componentes individuales de llamada a la interfaz de usuario.

En la tabla siguiente se detallan los componentes individuales:

Componente Descripción
Diseño de cuadrícula Componente de cuadrícula para organizar los iconos de vídeo en una cuadrícula NxN.
Icono de vídeo Componente que muestra la secuencia de vídeo cuando está disponible y un componente estático predeterminado cuando no lo está.
Barra de control Contenedor para organizar DefaultButtons para enlazar con acciones de llamada específicas, como silencio o uso compartido de pantalla.
Galería de vídeos Componente inmediato de la galería de vídeos que cambia dinámicamente a medida que se agregan participantes.

También puede personalizar su experiencia de chat. En la imagen siguiente se resaltan los componentes individuales del chat.

El diagrama muestra la distribución de la reunión descompuesta en componentes individuales de chat a la interfaz de usuario.

En la tabla siguiente se proporcionan descripciones con vínculos a componentes individuales.

Componente Descripción
Subproceso de mensaje Contenedor que representa mensajes de chat, mensajes del sistema y mensajes personalizados.
Cuadro de envío Componente de entrada de texto con un botón de envío discreto.
Indicador de estado del mensaje Componente de indicador de estado de mensajes de varios estados para mostrar el estado del mensaje enviado
Indicador de escritura Componente de texto para representar a los participantes que escriben activamente en un subproceso.

Echemos un vistazo a cómo puede usar el componente Barra de control para mostrar solo los botones de cámara y micrófono en este orden, y controlar las acciones que se realizan tras la selección de dichos botones.

export const AllButtonsControlBarExample: () => JSX.Element = () => {
  return (
    <FluentThemeProvider>
      <ControlBar layout={'horizontal'}>
        <CameraButton
          onClick={() => {  /*handle onClick*/ }}
        />
        <MicrophoneButton
          onClick={() => {  /*handle onClick*/ }}
        />
      </ControlBar>
    </FluentThemeProvider>
)}

Para más personalización, puede agregar botones más predefinidos y, puede cambiar su color, iconos u orden. Si tiene componentes de interfaz de usuario existentes que le gustaría usar o desea tener más control sobre la experiencia, puede usar kits de desarrollo de software (SDK) subyacentes para crear su propia interfaz de usuario.

Creación de su propia interfaz de usuario con kits de desarrollo de software

Azure Communication Services proporciona SDK de chat y llamadas para crear experiencias de citas virtuales. La experiencia consta de tres partes principales, autenticación, llamada y chat. Tenemos ejemplos dedicados de Inicio rápido y GitHub para cada uno de los ejemplos de código, pero los ejemplos de código siguientes muestran cómo habilitar la experiencia. La autenticación del usuario requiere crear o seleccionar un usuario de Azure Communication Services existente y emitir un token. Puede usar la cadena de conexión para crear CommunicationIdentityClient. Le recomendamos que implemente esta lógica en el back-end, ya que el uso compartido de connectionstring con clientes no es seguro.

var client = new CommunicationIdentityClient(connectionString);

Cree un usuario de Azure Communication Services asociado al recurso de Azure Communication Services con el método CreateUserAsync.

var identityResponse = await client.CreateUserAsync();
var identity = identityResponse.Value;

Emita el token de acceso asociado al usuario de Azure Communication Services con el ámbito de chat y llamada.

var tokenResponse = await client.GetTokenAsync(identity, scopes: new [] { CommunicationTokenScope.VoIP, CommunicationTokenScope.Chat  });
var token =  tokenResponse.Value.Token;

Ahora tiene un token de acceso y usuario de Azure Communication Services válido asignado a este usuario. Ahora puede integrar la experiencia de llamada. Esta parte se implementa en el lado cliente y, en este ejemplo, supongamos que las propiedades se propagan al cliente desde el back-end. El siguiente tutorial muestra cómo hacerlo. En primer lugar, cree un CallClient que inicie el SDK y le proporcione acceso a CallAgent y el administrador de dispositivos.

const callClient = new CallClient(); 
Create CallAgent from the client and define the display name of the user.
tokenCredential = new AzureCommunicationTokenCredential(token);
callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'Adele Vance'})

Únase a la reunión de Microsoft Teams asociada a la cita virtual en función de la dirección URL de la reunión de Teams.

var meetingLocator = new TeamsMeetingLinkLocator("<TEAMS_MEETING_URL>");
callAgent.join(meetingLocator , new JoinCallOptions());

Estos pasos le permiten unirse a la reunión de Teams. Después, puede ampliar esos pasos con la administración de altavoces, micrófono, cámara y secuencias de vídeo individuales. Después, opcionalmente, también puede integrar el chat en la experiencia de cita virtual.

Cree un ChatClient que inicie el SDK y proporcione acceso a las notificaciones y ChatThreadClient.

const chatClient = new ChatClient(
    endpointUrl,
    new AzureCommunicationTokenCredential(token)
  );

Suscríbase para recibir notificaciones de chat en tiempo real para el usuario de Azure Communication Services.

await chatClient.startRealtimeNotifications();

Suscríbase a un evento cuando se reciba un mensaje.

// subscribe to new message notifications
chatClient.on("chatMessageReceived", (e) => { /*Render message*/})

Cree ChatThreadClient para iniciar un cliente para operaciones relacionadas con un hilo de conversación específico.

chatThreadClient = await chatClient.getChatThreadClient(threadIdInput.value);

Envíe un mensaje de chat en el chat de la reunión de Teams asociada a la cita virtual.

let sendMessageRequest = { content: 'Hello world!' };
let sendMessageOptions = { senderDisplayName : 'Adele Vance' };
let sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);

Con las tres fases, tiene un usuario que puede unirse a citas virtuales con audio, vídeo, uso compartido de pantalla y chat. Este enfoque proporciona control total sobre la interfaz de usuario y el comportamiento de las acciones individuales.

Pasos siguientes