Vídeos de chat incrustados

Añade rápidamente las funciones de la Video API de Vonage a tu página web con un sencillo widget que puedes integrar.

Crea un vídeo de chat incrustado en tu Account de Video API

Este es un ejemplo de un chat de vídeo incrustado.
Haz clic para iniciar la llamada y, a continuación, haz clic en el botón de abajo para compartir este enlace de inserción único para una videollamada individual.

Comparte este contenido incrustado

   

https://your-domain/opentok/embeds/?room=roomParam

Para añadir un segundo usuario a la sala de chat, Copia la URL anterior y ábrela en una nueva pestaña del navegador o compártela con un amigo. El otro usuario también tendrá que hacer clic para iniciar la llamada.

Visión general

La función «Video Chat Embed» es la forma más sencilla de añadir rápidamente las funciones básicas de OpenTok a tu página web mediante un fragmento de código HTML incrustable.

Una vez implementado en tu sitio web, puedes hacer clic en el código de inserción para conectarte a una «sala de videochat». A continuación, otros usuarios pueden hacer clic en el código de inserción desde su propio navegador y unirse a la misma sala de chat. Incluso puedes crear salas independientes con el mismo código de inserción utilizando el parámetro de la sala.

Se admiten los vídeos de chat incrustados en todas las navegadores compatibles con la biblioteca OpenTok.js.

Limitaciones

Actualmente, los vídeos de chat incrustados solo funcionan en la web y ofrecen funciones básicas de chat de audio y vídeo. La integración con aplicaciones móviles y las funciones avanzadas, como el archivo de sesiones, el uso compartido de pantalla y el chat de texto, no están incluidas en la funcionalidad de los vídeos de chat incrustados.

Para poder utilizar las funciones avanzadas de OpenTok y la compatibilidad con navegadores móviles y aplicaciones, tendrás que crear un proyecto en tu Account de la Video API y sigue nuestros útiles tutoriales y guías para desarrolladores.

Enlaces rápidos:

Cómo insertar un chat de vídeo

  1. Vaya a su Account de la Video API y Crear un proyecto (ya sea desde el menú lateral o desde el resumen de tu Account).

  2. Selecciona el Incrustar opción del proyecto.

  3. Ponle un nombre a tu contenido incrustado.

    Utilizarás este nombre más adelante para localizar el código de inserción en tu Account de la Video API.

  4. Especifica la anchura y la altura del contenido incrustado.

  5. Indica el dominio del sitio web en el que tienes previsto utilizar el código de inserción.

    Por ejemplo, si vas a añadir el código de incrustación a tu página web en example.com/test, introduce https://example.com. Asegúrate de introducir http:// o https:// seguido del nombre de dominio. (Si vas a utilizar «localhost» para las pruebas, basta con que introduzcas http://localhost o http://localhost:[port number] (para puertos distintos del 80.)

    Importante: Debes utilizar una URL https (no http). Los navegadores no permiten el acceso a la cámara en páginas http. Sin embargo, sí permiten utilizar http para realizar pruebas locales, como por ejemplo: http://localhost o http://localhost:8080.

  6. Si vas a utilizar un creador de páginas web como Squarespace, Weebly o WordPress para alojar la página, selecciónalo en el Creado con menú (opcional).

  7. Haz clic en el Crear código para incrustar botón.

Una vez completados estos pasos, se generará el código de incrustación en la página. Copia este código y guárdalo para poder añadirlo a tu sitio web. Puedes obtener este código en cualquier momento seleccionando una incrustación de videochat ya existente en tu Account de la Video API de Vonage y haciendo clic en el Copiar el código de inserción botón situado en la parte superior de la «Descripción general de la incrustación».

Incrustaciones con iframe frente a incrustaciones con script

Puedes elegir entre utilizar un iframe o script Código de incrustación. Consulta las dos secciones siguientes.

Cómo añadir un chat de vídeo incrustado a tu página web

Lo que necesitarás:

  • Acceso al código HTML de tu página web para editarlo

  • El código de incrustación único de tu account de la Video API (véase Cómo insertar un chat de vídeo).

Cómo añadir y probar el código de inserción en tu página web:

  1. Con el código HTML de tu página web abierto en un editor, copia el código de incrustación de tu Account de Video API y pégalo en el cuerpo del código HTML. La ubicación en la que lo pegues dependerá de dónde quieras que aparezca, pero debe estar en algún punto entre las etiquetas <body> y </body> etiquetas que deben aparecer en la página.

  2. Guarda el código HTML y ábrelo en tu navegador. Ahora deberías ver un recuadro con un Haz clic para iniciar la llamada botón.

  3. Haz clic en el botón y deberías conectarte a la sala de videochat. Si es necesario, autoriza el acceso a tu cámara y a tu micrófono. Ahora deberías ver una imagen tuya en el navegador.

  4. Para comprobar que el chat de vídeo funciona, silencia el audio y, a continuación, abre la misma URL en otra pestaña, en otro navegador o en otro ordenador y haz clic para iniciar la llamada. Ahora deberías ver dos transmisiones de vídeo en el vídeo incrustado.

Creación de habitaciones adicionales

Hay dos tipos de incrustaciones: — iframe y script (véase arriba (para más información al respecto). Estos dos tipos tienen los siguientes formatos básicos:

iframe

<iframe
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT"
  allow="microphone; camera"
></iframe>

script

<div
  id="otEmbedContainer"
  style="width:[YOUR EMBED WIDTH];
  height:[YOUR EMBED HEIGHT]"
></div>
<script
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&room=DEFAULT"
></script>

En ambos casos, el final del src La URL es un parámetro room=DEFAULT. Este parámetro especifica la «sala» que utiliza la incrustación; si varios usuarios acceden a una incrustación con el mismo embedId y room parámetros, iniciarán una sesión de videochat en la que cada usuario podrá ver las transmisiones de vídeo de los demás usuarios. Si las salas no coinciden, no se unirán a la misma sala.

Si deseas utilizar el mismo código de inserción para crear varias salas independientes, puedes modificar el parámetro «room» para crear una nueva sala. Por ejemplo, podrías crear un código de inserción con room=group1 y otra con room=group2 — Cualquier usuario que acceda a la sala «group1» podrá ver las retransmisiones de cualquier otra persona que acceda a la sala «group1», pero no podrá ver a los usuarios que accedan a la sala «group2».

Ten en cuenta que el número máximo de participantes en cualquier habitación es tres.

Casos de uso para varias habitaciones

Aunque el parámetro de la sala Aunque no es necesario para crear una aplicación de producción con elementos incrustados, existen varias formas de aprovechar esta función para crear una aplicación de vídeo mucho más sólida. A continuación se muestran algunos ejemplos de cómo se puede utilizar:

  • Creación programática de habitaciones — Si tienes una aplicación que necesita conectar dinámicamente a personas en salas privadas de videochat (por ejemplo, un médico y un paciente), tu aplicación del lado del servidor podría generar identificadores únicos de «sala» para cada reunión. A continuación, podrías crear un iframe incrustado de videochat o un fragmento de código utilizando ese identificador como el room parámetro: los usuarios cargarían entonces el código de incrustación creado dinámicamente en su navegador, unéndose a la misma sala que cualquier otro usuario con el mismo ID de sala.
  • Salas creadas por los usuarios — Podrías ofrecer a los usuarios la posibilidad de introducir el nombre de una sala a través de un formulario en tu página web antes de «crear» una sala de chat a la que puedan unirse otros usuarios. A continuación, podrías pasar ese nombre de sala a un código de inserción como el room parámetro. De este modo, otros usuarios podrían introducir el mismo nombre de sala para unirse a la misma sesión de videochat.
  • Transmitir los identificadores de las habitaciones a través de la URL de una página web — si quieres indicar el nombre de una sala a través de una URL (p. ej., www.example.com?room=group1), solo necesitarías un poco de código del lado del cliente para analizar la URL y crear un elemento de incrustación cuando el usuario cargue la página, pasando el ?room parámetro en la incrustación src URL. El ejemplo en vivo En la parte superior de esta página hay un ejemplo de este caso de uso en la práctica.

Plataformas web compatibles

Actualmente, los vídeos de chat incrustados pueden integrarse en sitios web creados con cualquiera de las siguientes plataformas:

  • Account alojado en WordPress (de pago)
  • Squarespace
  • Zoho Sites

Actualmente, las siguientes plataformas son no compatible con la incrustación de contenido:

  • Account gratuito de WordPress
  • Weebly
  • Wix

Además, las incrustaciones no funcionarán correctamente con los siguientes editores de código en línea:

  • Codepen.io
  • JSFiddle
  • JSBin

Aplicación de ejemplo

Esta aplicación web de ejemplo te muestra cómo generar salas de videochat dinámicas e integradas para un flujo de trabajo de citas individuales utilizando Node.js. Esto se puede utilizar para relaciones médico-paciente, alumno-profesor o cualquier otra aplicación web de programación de citas individuales.

Ayuda

Si tienes problemas para implementar el código de incrustación y no encuentras la respuesta en esta página, puedes ponte en contacto con nuestro equipo de asistencia.