Introducción al ejemplo de elementos principales de una llamada

  • Artículo
  • 14 minutos para leer

En el ejemplo de elementos principales de llamada grupal de Azure Communication Services se muestra cómo se puede usar el SDK web de llamadas de Communication Services para crear una experiencia de llamada grupal.

En esta guía de inicio rápido de ejemplo, veremos cómo funciona el ejemplo antes de ejecutarlo en la máquina local. A continuación, implementaremos el ejemplo en Azure con sus propios recursos de Azure Communication Services.

Descarga de código

Busque el proyecto de este ejemplo en GitHub. Se puede encontrar una versión de la muestra que incluye características que se encuentran en versión preliminar pública actualmente, como Interoperabilidad de equipos y Grabación de llamadas, en otra rama.

Información general

El ejemplo tiene una aplicación del lado cliente y una aplicación del lado servidor. La aplicación del lado cliente es una aplicación web React/Redux que usa el marco de interfaz de usuario Fluent de Microsoft. Esta aplicación envía solicitudes a una aplicación del lado servidor de ASP.NET Core que ayuda a la aplicación del lado cliente a conectarse a Azure.

El ejemplo tendrá una apariencia similar a la siguiente:

Captura de pantalla que muestra la página de aterrizaje de la aplicación de ejemplo.

Cuando se presiona el botón "Start a call", la aplicación web captura un token de acceso de usuario de la aplicación del lado servidor. A continuación, este token se usa para conectar la aplicación cliente con Azure Communication Services. Una vez recuperado el token, se le pedirá que especifique la cámara y el micrófono que quiere usar. Podrá deshabilitar o habilitar los dispositivos con los controles de alternancia:

Captura de pantalla que muestra la pantalla anterior a la llamada en la aplicación de ejemplo.

Una vez que configure el nombre para mostrar y los dispositivos, puede unirse a la sesión de llamada. Verá el panel de llamada principal en el que reside la experiencia de llamada.

Captura de pantalla que muestra la pantalla principal de la aplicación de ejemplo.

Componentes de la pantalla principal de llamada:

  • Galería multimedia: la fase principal en la que se muestran los participantes. Si un participante tiene habilitada la cámara, aquí se muestra su fuente de vídeo. Cada participante tiene un icono individual que muestra su nombre para mostrar y la transmisión de vídeo (si hay alguna).
  • Encabezado: aquí es donde se encuentran los controles de llamada principales para ajustar la configuración y la barra lateral de participantes, activar o desactivar el vídeo y mezclas, compartir la pantalla y abandonar la llamada.
  • Barra lateral: aquí es donde se muestran los participantes y la información de configuración cuando se ajustan con los controles del encabezado. El componente se puede descartar con la "X" de la esquina superior derecha. En la barra lateral de participantes se mostrará una lista de participantes y un vínculo para invitar a más usuarios a conversar. La barra lateral de configuración permite configurar las opciones del micrófono y la cámara.

Nota

En función de las limitaciones del SDK de llamadas web, solo se representa una secuencia de vídeo remota. Para más información, consulte Compatibilidad con secuencias del SDK de llamadas.

A continuación encontrará más información sobre los requisitos previos y los pasos para configurar el ejemplo.

Requisitos previos

Implementación local del servicio y las aplicaciones cliente

El ejemplo de llamada grupal consta esencialmente dos aplicaciones: ClientApp y Service.NET.

Cuando queremos realizar una implementación localmente, es necesario iniciar ambas aplicaciones. Cuando se visita la aplicación de servidor desde el explorador, se usa la instancia de ClientApp implementada localmente para la experiencia del usuario.

Para probar el ejemplo localmente, puede abrir varias sesiones del explorador con la dirección URL de su llamada para simular una llamada multiusuario.

Antes de ejecutar el ejemplo por primera vez

  1. Abra una instancia de PowerShell, Terminal Windows, símbolo del sistema o equivalente y navegue hasta el directorio donde le gustaría clonar el ejemplo.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Obtenga Connection String de Azure Portal. Para obtener más información sobre las cadenas de conexión, consulte Creación de recursos de Azure Communication Services.
  4. Una vez que obtenga Connection String, agregue la cadena de conexión al archivo Calling/appsetting.json que se encuentra en la carpeta de Service .NET. Escriba la cadena de conexión en la variable: ResourceConnectionString.

Ejecución local

  1. Vaya a la carpeta de llamadas y abra la solución Calling.csproj en Visual Studio.
  2. Ejecute el proyecto Calling. El explorador se abrirá en localhost:5001.

Publicación del ejemplo en Azure

  1. Haga clic con el botón derecho en el proyecto Calling y seleccione Publicar.
  2. Cree un nuevo perfil de publicación y seleccione la suscripción a Azure.
  3. Antes de publicar, agregue la cadena de conexión con Edit App Service Settings y rellene ResourceConnectionString como clave y proporcione la cadena de conexión (copiada de appsettings.json) como valor.

Limpieza de recursos

Si quiere limpiar y quitar una suscripción a Communication Services, puede eliminar el recurso o grupo de recursos. Al eliminar el grupo de recursos, también se elimina cualquier otro recurso que esté asociado a él. Obtenga más información sobre la limpieza de recursos.

Pasos siguientes

Descargue el ejemplo de GitHub.

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

El ejemplo de elementos principales de llamada de grupo para iOS de Azure Communication Services muestra cómo usar Calling SDK de Communication Services para iOS para crear una experiencia de llamada de grupo que incluya voz y vídeo. En este inicio rápido de ejemplo, aprenderá a configurar y ejecutar el ejemplo. Se proporciona información general del ejemplo con fines de contextualización.

Descarga de código

Busque el proyecto de este ejemplo en GitHub. Se puede encontrar una versión del ejemplo con la interoperabilidad de Teams en una rama independiente.

Información general

El ejemplo consiste en una aplicación iOS nativa que usa los SDK de Azure Communication Services para iOS para crear una experiencia de llamada que incluya llamadas de voz y vídeo. La aplicación usa un componente de servidor para aprovisionar los tokens de acceso que, posteriormente, se usan para inicializar el SDK de Azure Communication Services. Para configurar este componente de servidor, siga el tutorial Creación de un servicio de autenticación de confianza mediante Azure Functions.

El ejemplo tendrá una apariencia similar a la siguiente:

Captura de pantalla que muestra la página de aterrizaje de la aplicación de ejemplo.

Al presionar el botón "Iniciar nueva llamada", la aplicación iOS crea una nueva llamada y se une a ella. La aplicación también le permite unirse a una llamada existente de Azure Communication Services mediante el identificador de esa llamada.

Después de unirse a una llamada, se le solicitará que conceda permiso a la aplicación para acceder a la cámara y el micrófono. También se le pedirá que facilite un nombre para mostrar.

Captura de pantalla que muestra la pantalla anterior a la llamada en la aplicación de ejemplo.

Una vez que configure el nombre para mostrar y los dispositivos, podrá unirse a la llamada. Verá el panel de llamada principal en el que reside la experiencia de llamada.

Captura de pantalla que muestra la pantalla principal de la aplicación de ejemplo.

Componentes de la pantalla principal de llamada:

  • Galería multimedia: la fase principal en la que se muestran los participantes. Si un participante tiene habilitada la cámara, aquí se muestra su fuente de vídeo. Cada participante tiene un icono individual con su nombre para mostrar y la secuencia de vídeo (si la hay). La galería admite varios participantes y se actualiza al agregarlos o al quitarlos de la llamada.
  • Barra de acciones: Aquí es donde se encuentran los principales controles de llamada. Estos controles permiten activar o desactivar el vídeo y el micrófono, compartir la pantalla y abandonar la llamada.

A continuación encontrará más información sobre los requisitos previos y los pasos para configurar el ejemplo.

Requisitos previos

Ejecución local del ejemplo

El ejemplo de llamada de grupo se puede ejecutar localmente mediante XCode. Los desarrolladores pueden usar su dispositivo físico o un emulador para probar la aplicación.

Antes de ejecutar el ejemplo por primera vez

  1. Instale las dependencias mediante la ejecución de pod install.
  2. Abra AzureCalling.xcworkspace en XCode.
  3. Actualice AppSettings.plist. Establezca el valor de la clave de communicationTokenFetchUrl para que sea la dirección URL del punto de conexión de autenticación.

Ejecución del ejemplo

Compile y ejecute el ejemplo en XCode.

(Opcional) Protección de un punto de conexión de autenticación

Con fines de demostración, en este ejemplo se usa de forma predeterminada un punto de conexión de acceso público para capturar un token de acceso de Azure Communication Services. En escenarios de producción, se recomienda usar un punto de conexión propio protegido para aprovisionar los tokens.

Mediante alguna configuración adicional, este ejemplo permite conectarse a un punto de conexión protegido de Azure Active Directory (Azure AD) de manera que se solicite el inicio de sesión de usuario para que la aplicación capture un token de acceso de Azure Communication Services. Consulte los siguientes pasos:

  1. Habilite la autenticación de Azure Active Directory en la aplicación.
  2. Vaya a la página de información general de la aplicación registrada en Registros de aplicaciones, en Azure Active Directory. Anote los valores de Application (client) ID, Directory (tenant) ID, Application ID URI.

Configuración de Azure Active Directory en Azure Portal.

  1. Abra AppSettings.plist en Xcode y agregue los siguientes valores de clave:
    • communicationTokenFetchUrl: la dirección URL para solicitar el token de Azure Communication Services.
    • isAADAuthEnabled: un valor booleano que indica si se requiere o no la autenticación de token de Azure Communication Services.
    • aadClientId: el identificador de la aplicación (cliente).
    • aadTenantId: el identificador del directorio (inquilino).
    • aadRedirectURI: el URI de redirección debe tener el formato msauth.<app_bundle_id>://auth.
    • aadScopes: una matriz de ámbitos de permisos solicitados a los usuarios con fines de autorización. Agregue <Application ID URI>/user_impersonation a la matriz para otorgar acceso al punto de conexión de autenticación.

Limpieza de recursos

Si quiere limpiar y quitar una suscripción a Communication Services, puede eliminar el recurso o grupo de recursos. Al eliminar el grupo de recursos, también se elimina cualquier otro recurso que esté asociado a él. Obtenga más información sobre la limpieza de recursos.

Pasos siguientes

Descargue el ejemplo de GitHub.

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

Lecturas adicionales

El ejemplo de elementos principales de llamada de grupo para Android de Azure Communication Services muestra cómo usar el SDK de llamadas de Communication Services para Android para crear una experiencia de llamada de grupo que incluya voz y vídeo. En este inicio rápido de ejemplo, aprenderá a configurar y ejecutar el ejemplo. Se proporciona información general del ejemplo con fines de contextualización.

Descarga de código

Busque el proyecto de este ejemplo en GitHub. Se puede encontrar una versión del ejemplo con la interoperabilidad de Teams en una rama independiente.

Información general

El ejemplo consiste en una aplicación Android nativa que usa los SDK de Azure Communication Services para Android para crear una experiencia de llamada que incluya llamadas de voz y vídeo. La aplicación usa un componente de servidor para aprovisionar los tokens de acceso que, posteriormente, se usan para inicializar el SDK de Azure Communication Services. Para configurar este componente de servidor, siga el tutorial Creación de un servicio de autenticación de confianza mediante Azure Functions.

El ejemplo tendrá una apariencia similar a la siguiente:

Captura de pantalla que muestra la página de aterrizaje de la aplicación de ejemplo.

Al presionar el botón "Iniciar nueva llamada", la aplicación Android crea una nueva llamada y se une a ella. La aplicación también le permite unirse a una llamada existente de Azure Communication Services mediante el identificador de esa llamada.

Después de unirse a una llamada, se le solicitará que conceda permiso a la aplicación para acceder a la cámara y el micrófono. También se le pedirá que facilite un nombre para mostrar.

Captura de pantalla que muestra la pantalla anterior a la llamada en la aplicación de ejemplo.

Una vez que configure el nombre para mostrar y los dispositivos, podrá unirse a la llamada. Verá el panel de llamada principal en el que reside la experiencia de llamada.

Captura de pantalla que muestra la pantalla principal de la aplicación de ejemplo.

Componentes de la pantalla principal de llamada:

  • Galería multimedia: la fase principal en la que se muestran los participantes. Si un participante tiene habilitada la cámara, aquí se muestra su fuente de vídeo. Cada participante tiene un icono individual con su nombre para mostrar y la secuencia de vídeo (si la hay). La galería admite varios participantes y se actualiza al agregarlos o al quitarlos de la llamada.
  • Barra de acciones: Aquí es donde se encuentran los principales controles de llamada. Estos controles permiten activar o desactivar el vídeo y el micrófono, compartir la pantalla y abandonar la llamada.

A continuación encontrará más información sobre los requisitos previos y los pasos para configurar el ejemplo.

Requisitos previos

Ejecución local del ejemplo

El ejemplo de llamada de grupo se puede ejecutar localmente mediante Android Studio. Los desarrolladores pueden usar su dispositivo físico o un emulador para probar la aplicación.

Antes de ejecutar el ejemplo por primera vez

  1. Abra Android Studio y seleccione Open an Existing Project.
  2. Abra la carpeta AzureCalling dentro de la versión descargada para el ejemplo.
  3. Expanda las aplicaciones o recursos para actualizar appSettings.properties. Establezca el valor de la clave communicationTokenFetchUrl para que sea la dirección URL del punto de conexión de autenticación configurado como requisito previo.

Ejecución del ejemplo

Compile y ejecute el ejemplo en Android Studio.

(Opcional) Protección de un punto de conexión de autenticación

Con fines de demostración, este ejemplo usa un punto de conexión de acceso público de forma predeterminada para capturar un token de Azure Communication Services. En escenarios de producción, se recomienda usar un punto de conexión propio protegido para aprovisionar los tokens.

Mediante configuración adicional, este ejemplo permite conectarse a un punto de conexión protegido de Azure Active Directory (Azure AD) de manera que se solicite el inicio de sesión de usuario para que la aplicación capture un token de Azure Communication Services. Consulte los siguientes pasos:

  1. Habilite la autenticación de Azure Active Directory en la aplicación.

  2. Vaya a la página de información general de la aplicación registrada en Registros de aplicaciones, en Azure Active Directory. Anote los valores de Package name, Signature hash, MSAL Configutaion.

Configuración de Azure Active Directory en Azure Portal.

  1. Edite AzureCalling/app/src/main/res/raw/auth_config_single_account.json y establezca isAADAuthEnabled para habilitar Azure Active Directory.

  2. Edite AndroidManifest.xml y establezca android:path en el hash de firma del almacén de claves. (Opcional. El valor actual usa el hash del almacén de claves debug.keystore incluido. Si se usa un almacén de claves diferente, esto deberá actualizarse).

    <activity android:name="com.microsoft.identity.client.BrowserTabActivity">
         <intent-filter>
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" />
             <data
                 android:host="com.azure.samples.communication.calling"
                 android:path="/Signature hash" <!-- do not remove /. The current hash in AndroidManifest.xml is for debug.keystore. -->
                 android:scheme="msauth" />
         </intent-filter>
     </activity>

  3. Copie la configuración de MSAL para Android desde Azure Portal y péguela en AzureCalling/app/src/main/res/raw/auth_config_single_account.json. Incluya "account_mode": "SINGLE".

       {
      "client_id": "",
      "authorization_user_agent": "DEFAULT",
      "redirect_uri": "",
      "account_mode" : "SINGLE",
      "authorities": [
         {
            "type": "AAD",
            "audience": {
            "type": "AzureADMyOrg",
            "tenant_id": ""
            }
         }
      ]
   }

  4. Edite AzureCalling/app/src/main/res/raw/auth_config_single_account.json y establezca el valor de la clave communicationTokenFetchUrl para que sea la dirección URL del punto de conexión de autenticación.

  5. Edite AzureCalling/app/src/main/res/raw/auth_config_single_account.json y establezca el valor de la clave aadScopes desde los ámbitos Expose an API de Azure Active Directory.

Limpieza de recursos

Si quiere limpiar y quitar una suscripción a Communication Services, puede eliminar el recurso o grupo de recursos. Al eliminar el grupo de recursos, también se elimina cualquier otro recurso que esté asociado a él. Obtenga más información sobre la limpieza de recursos.

Pasos siguientes

Descargue el ejemplo de GitHub.

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

Lecturas adicionales