Crear y personalizar reuniones

La Meetings API le permite integrar en sus aplicaciones web reuniones de vídeo interactivas en tiempo real y de alta calidad. Ideal para quienes desean reuniones plug and play con una personalización limitada, basta con unas pocas líneas de código para generar una reunión e incrustarla en su aplicación.

En este caso de uso, elaborará una solicitud cURL para crear una sala de reuniones personalizada para su aplicación.

Para ello, repasaremos las opciones disponibles a la hora de crear una reunión:

  1. Crear una solicitud básica - Empieza con una solicitud cURL para una sala de reuniones básica.
  2. Configurar los ajustes de aprobación de la adhesión - Establece el nivel de autorización necesario para participar en la reunión.
  3. Localización - Selecciona el idioma en el que quieres que se muestre la interfaz de usuario.
  4. Elija las funciones que desea activar - Activar o desactivar las opciones de grabación, chat y pizarra.
  5. Cambia el tema de tu reunión - Aplique un tema personalizado, si es necesario.
  6. Ejecuta la solicitud - crear la reunión En este punto, la reunión está lista para su uso, pero también puede seguir el siguiente paso para incrustar su reunión.
  7. Incorpora la reunión en tu aplicación - cree un iFrame para integrar su reunión en su sitio web o aplicación.

Requisitos previos

Para completar el tutorial, necesitas:

  • Account de desarrollador de Vonage: Si aún no tiene una, regístrese para obtener una Account gratuita en el Account de desarrollador de Vonage.

  • ID y clave secreta de la aplicación: Una vez iniciada la sesión en Panel de control de la API de VonageHaga clic en Applications y cree una nueva Application. Haga clic en Generate public and private key y registre la clave privada. Utilizará la clave privada con el ID de la aplicación para Generar un token web JSON (JWT). Para obtener más información sobre los JWT, consulta Autenticación. Asegúrate también de que la Meetings API esté habilitada para tu aplicación en la sección «Funcionalidades» e introduce tu URL de webhooks:

Enable the Meetings API for your application using the dashboard

Crear una solicitud básica

Para empezar, se puede utilizar la siguiente solicitud cURL para crear una sala de reuniones básica con las opciones predeterminadas:

   curl -X POST 'https://api-eu.vonage.com/v1/meetings/rooms' \
   -H 'Authorization: Bearer $JWT' \
   -H 'content-type: application/json' \
   -d '{
   "display_name":"New Meeting Room"
               }'

En los apartados siguientes se detallan los ajustes que puedes utilizar para personalizar tu sala de reuniones.

Configurar los ajustes de aprobación de la adhesión

join_approval_level se puede utilizar para establecer el nivel de aprobación necesario para unirse a la reunión. Debe establecerse como uno de los siguientes:

  • after_owner_only - Los participantes se incorporarán a la reunión sólo después de que lo haya hecho el anfitrión.
  • explicit_approval - Los participantes se incorporarán a la sala de espera, y el anfitrión los aprobará / denegará.
  • none - No es necesaria ninguna autorización.

Por ejemplo, quizá quieras configurar la sala de reuniones de manera que los participantes permanezcan en una sala de espera hasta que el propietario apruebe su entrada. Para ello, añade join_approval_level a la solicitud de la siguiente manera:

   curl -X POST 'https://api-eu.vonage.com/v1/meetings/rooms' \
   -H 'Authorization: Bearer $JWT' \
   -H 'content-type: application/json' \
   -d '{
   "display_name":"New Meeting Room",      
   "join_approval_level":"explicit_approval"
    }'

Localización

El idioma de la interfaz de usuario se puede cambiar de dos maneras:

  1. Predefinido en la llamada a la API: permite predefinir el idioma para todos los participantes en la reunión a través de una opción en la llamada a la API.
  2. Selección desde la interfaz de usuario: añade una opción de selección de idioma a la interfaz de usuario que permite a cada participante en la reunión seleccionar su idioma preferido.

En este tutorial utilizaremos la llamada a la API para asignar un idioma a todos los participantes; consulta la guía sobre Localización Para obtener más información sobre el selector de interfaz de usuario.

Para establecer un idioma, añada un ui_settings a tu llamada a la API, que contenga el valor que hayas elegido language. En este ejemplo, aplicaremos el inglés, pero puedes utilizar cualquiera de los idiomas disponibles:

   curl -X POST 'https://api-eu.vonage.com/v1/meetings/rooms' \
   -H 'Authorization: Bearer $JWT' \
   -H 'content-type: application/json' \
   -d '{
   "display_name":"New Meeting Room",      
   "join_approval_level":"explicit_approval",
   "ui_settings": {
       "language":"en"
       }
    }'

Elija las funciones que desea activar

Hay varias funciones que pueden activarse o desactivarse para sus reuniones:

  • Grabación: Muestra la opción de grabación en la interfaz de usuario para la reunión. Configurar con is_recording_available.
  • Pizarra: Muestra la opción para encender la pizarra. Configurar con is_whiteboard_available.
  • Chat: Activa la función de chat. Se configura mediante is_chat_available.

En este ejemplo, activaremos cada una de estas funciones añadiendo el available_features a la llamada a la API:

   curl -X POST 'https://api-eu.vonage.com/v1/meetings/rooms' \
   -H 'Authorization: Bearer $JWT' \
   -H 'content-type: application/json' \
   -d '{
   "display_name":"New Meeting Room",      
   "join_approval_level":"explicit_approval",
   "ui_settings": {
       "language": "en"
       },
    "available_features": {
        "is_recording_available": "true",
        "is_chat_available": "true",
        "is_whiteboard_available": "true"
      }
    }'

Cambia el tema de tu reunión

Las reuniones pueden personalizarse con temas para utilizar diferentes colores, logotipos o textos. En primer lugar, deberá crear un tema siguiendo la guía que encontrará aquí. theme_id que puede utilizar para aplicar el tema al crear una reunión:

   curl -X POST 'https://api-eu.vonage.com/v1/meetings/rooms' \
   -H 'Authorization: Bearer $JWT' \
   -H 'content-type: application/json' \
   -d '{
   "display_name":"New Meeting Room",      
   "join_approval_level": "explicit_approval",
   "ui_settings": {
       "language": "en"
       },
    "available_features": {
        "is_recording_available": "true",
        "is_chat_available": "true",
        "is_whiteboard_available": "true"
      }, 
    "theme_id": "$THEME_ID"
    }'

Ejecuta la solicitud

Una vez configuradas todas tus personalizaciones, es el momento de enviar la solicitud. Recibirás una respuesta con toda la información de tu reunión, incluido el ID de la reunión y las URL necesarias para unirte tanto como anfitrión como invitado:

{ "id": "$MEETING_ID", "display_name": "New Meeting Room", "metadata": null, "type": "instant", "expires_at": "2023-04-17T10:26:39.715Z", "recording_options": { "auto_record": false, "record_only_owner": false }, "meeting_code": "$MEETING_CODE", "_links": { "host_url": { "href": "$HOST_URL" }, "guest_url": { "href": "$GUEST_URL" } }, "created_at": "2023-04-17T10:16:39.716Z", "is_available": true, "expire_after_use": false, "theme_id": "$THEME_ID", "initial_join_options": { "microphone_state": "default" }, "joinApprovalLevel": "explicit_approval", "ui_settings": { "language": "en" }, "available_features": { "is_recording_available": true, "is_chat_available": true, "is_whiteboard_available": true, "is_locale_switcher_available": true, "is_captions_available": false } }

¡Ya puedes empezar a utilizar la reunión! Los siguientes pasos tratan sobre algunos parámetros adicionales que puedes añadir a las URL de tu reunión, junto con instrucciones para incrustar tu reunión en una página web o una aplicación.

Parámetros URL

También puede añadir algunos parámetros opcionales a las URL de su reunión para activar/desactivar diferentes funcionalidades:

Parámetro Efecto Valores
skip_prejoin Determina si un usuario ve la pantalla previa a la incorporación o si accede directamente a la reunión. true o false
user_display_name Define el nombre que tiene un participante en la reunión. Texto
blur_on El desenfoque del fondo se activa automáticamente al entrar en la reunión. true o false
blur_enabled Si se desactiva, los participantes en la reunión no pueden activar o desactivar el fondo borroso: el botón desaparece de la interfaz de usuario de la reunión. true o false
background_enabled Si esta opción está desactivada, los participantes en la reunión no podrán cambiar su fondo; el botón desaparecerá de la interfaz de usuario de la reunión. true o false
layout Establece un diseño predeterminado para la reunión. gallery: muestra todas las pantallas disponibles. A meeting in the Gallery configuration
audience: muestra al presentador principal (orador o pantalla compartida) en el centro, con todos los demás participantes a la derecha. A meeting in the Gallery configuration
dominant: Solo muestra al presentador principal (el ponente o la pantalla compartida). A meeting in the Gallery configuration

URL del host

Para añadirlo a una URL de host, añada los parámetros después del carácter ? - por ejemplo, para utilizar el diseño Audiencia y saltarse la pantalla previa a la unión con esta URL:

https://meetings.vonage.com/?room_token=280674154&participant_token=eyJhbGciOiJIUzI1NiIsInR5cC

Deberías añadir los siguientes parámetros:

https://meetings.vonage.com/?room_token=280674154&participant_token=eyJhbGciOiJIUzI1NiIsInR5cC&skip_prejoin=true&layout=audience

URL de invitado

Para utilizar estos parámetros con la función guest_url devuelto en la llamada de retorno, debe añadir ?room_token= antes del identificador de la sala.

Por ejemplo, https://meetings.vonage.com/280674154 se convertiría en https://meetings.vonage.com/?room_token=280674154. A continuación, puede añadir otros parámetros a la lista según sea necesario.

Incorpora la reunión en tu aplicación

Puede utilizar un iFrame para incrustar su reunión en su sitio web o aplicación. Sustituir GUEST_URL en el siguiente código con la URL de tu reunión:

<iframe src="$GUEST_URL" title="Embedded Meeting" allow="camera;microphone;display-capture"></iframe>

Esto insertará tu reunión en tu aplicación y solicitará al usuario los permisos para la cámara y el micrófono. Existen algunas limitaciones en las funciones disponibles en función del tamaño de tu iFrame, que se detallan aquí.

También deberá enviar una solicitud por correo electrónico a la dirección Equipo Meetings API para aplicar la marca blanca al dominio del sitio web en el que se utiliza el iFrame.

Conclusión

En este tutorial, has creado una reunión mediante la Meetings API, adaptándola a tus necesidades. Para obtener más información sobre la Meetings API, incluida la gestión de salas de reuniones y la información sobre las devoluciones de llamada, consulta la sección «Lecturas recomendadas» que aparece a continuación.

Lecturas complementarias