Introducción al ejemplo de llamada web

El ejemplo de llamada web es una aplicación web que sirve como tutorial paso a paso de las distintas funcionalidades que proporciona el SDK de llamadas web de Communication Services.

Este ejemplo se ha creado para desarrolladores y hace que sea muy fácil empezar a trabajar con Communication Services. Su interfaz de usuario se divide en varias secciones, y cada una de ellas incluye un botón "Mostrar código" que permite copiar código directamente desde el explorador en su propia aplicación de Communication Services.

Introducción al ejemplo de llamada web

Siga /Project/readme.md para configurar el proyecto y ejecutarlo en la máquina de manera local. Cuando el ejemplo de llamada web se esté ejecutando en la máquina, verá la página de aterrizaje siguiente:

Web calling tutorial 1

Web calling tutorial 2

Aprovisionamiento de usuario e inicialización de SDK

Haga clic en "Provisioning user and initialize SDK" (Aprovisionamiento de usuario e inicialización del SDK) para inicializar el SDK mediante un token aprovisionado por el servicio de aprovisionamiento de tokens de back-end. Este servicio de back-end está en /project/webpack.config.js.

Haga clic en el botón "Show code" (Mostrar código) para ver el código de ejemplo que puede usar en su propia solución.

Una vez que se inicialice el SDK, debería ver lo siguiente:

User provisioning

Ya está listo para empezar a realizar llamadas mediante el recurso de Communication Services.

Realización y recepción de llamadas

El SDK de llamadas web de Communication Services permite llamadas 1:1, 1:N y de grupo.

En el caso de las llamadas salientes 1:1 o 1:N, puede especificar varias identidades de usuario de Communication Services a las que llamar mediante valores separados por comas. También puede especificar mediante valores separados por comas números de teléfono tradicionales (RTC) a los que llamar.

Cuando llame a números de teléfono tradicionales, especifique su identificador alternativo de autor de llamada. Haga clic en el botón "Place call" (Realizar llamada) para realizar una llamada saliente:

Place a call

Para unirse a una llamada grupal, escriba el GUID que identifica la llamada y haga clic en el botón "Join group" (Unirse al grupo):

Join a group call

Haga clic en el botón "Show code" (Mostrar código) para ver el código de ejemplo para realizar llamadas, recibir llamadas y unirse a llamadas grupales.

Una llamada activa tiene el siguiente aspecto:

Group call

En este ejemplo también se proporcionan fragmentos de código para las siguientes funcionalidades:

  • Hacer clic en el icono del vídeo para encender o apagar la cámara de vídeo
  • Hacer clic en el icono del micrófono para encender o apagar el micrófono
  • Hacer clic en el icono de reproducción para retener o eliminar la retención de la llamada
  • Hacer clic en el icono de la pantalla para empezar a compartir la pantalla o dejar de hacerlo
  • Hacer clic en el icono de persona para agregar un participante a la llamada
  • Hacer clic en "Remove participant" (Quitar participante) en la lista de participantes para quitar un participante concreto de la llamada

Pasos siguientes

Para más información, consulte los siguientes artículos.

Lecturas adicionales

  • Ejemplos: encuentre más ejemplos en nuestra página de información general de ejemplos.
  • Redux: Administración de estado del lado cliente
  • FluentUI: Biblioteca de interfaz de usuario con tecnología de Microsoft
  • React: Biblioteca para compilar interfaces de usuario
  • ASP.NET Core: Marco para compilar aplicaciones web