OpenTok.js

La biblioteca OpenTok.js te permite utilizar sesiones de vídeo en la web basadas en la Video API de Vonage.

Todas las aplicaciones que utilizan la Video API de Vonage constan de dos partes:

  • La parte cliente, que utiliza el SDK de cliente de OpenTok y se ejecuta en el navegador o la aplicación móvil del usuario
  • La parte del servidor, que utiliza el SDK de servidor de OpenTok y se ejecuta en tu servidor para enviar la información de autenticación al cliente

El Client SDK para crear aplicaciones basadas en web que utilicen la Video API de Vonage es OpenTok.js. Esta biblioteca JavaScript proporciona la mayor parte de la funcionalidad básica para su aplicación, incluyendo:

  • Conectarse a una sesión
  • Publicación de flujos en una sesión
  • Suscripción a flujos en una sesión

También hay SDK para clientes disponibles para iOS y Android. Todos los SDK de clientes de OpenTok pueden interactuar entre sí. Puedes obtener más información sobre los conceptos básicos de los clientes, servidores y sesiones de OpenTok, entre otros, en nuestra Conceptos básicos de la Video API página.

Notas importantes

  • Chrome M136 en Windows: problema con la detección del dispositivo de audio. Tenemos constancia de un problema en Chrome M136 para Windows por el que el navegador puede responder con lentitud de forma intermitente o fallar al recuperar la información del dispositivo de audio. Se trata de un problema conocido que ya se ha solucionado en la versión 137.0.7150.0 de Chrome, y cuya corrección también se ha incorporado a una próxima actualización de Chrome 136 que se lanzará en breve. Mientras tanto, si te encuentras con este problema, te recomendamos que vuelvas a la versión 135 de Chrome y la fijes como predeterminada, o que utilices un navegador alternativo. Ponte en contacto con el servicio de asistencia si necesitas ayuda para aplicar una solución provisional.
  • Problemas solucionados en Safari 15.4 y 15.5. Las versiones 15.4 y 15.5 de Safari (que se incluyen con iOS 15.4 y 15.5 y macOS 12.3 y 12.4) corrigen los siguientes problemas, que podrían afectar a las aplicaciones que utilizan OpenTok.js (en Safari):
    • Problemas de audio al utilizar determinados modelos de auriculares Bluetooth. En algunos modelos de auriculares Bluetooth, el audio puede fallar. Este Error de WebKit se ha corregido en Safari 15.4.
    • Problemas de eco al cambiar de micrófono en macOS Safari. Al cambiar el micrófono utilizado por un editor, podía producirse un eco del audio del editor. El eco no aparecía en el lado del abonado. Este Error de WebKit se ha corregido en Safari 15.5.
    • Error crítico al publicar vídeo H.264 en sesiones enrutadas en iOS 15.1. En iOS 15.1, la publicación de vídeo H.264 en sesiones enrutadas fallaba. Esto Error de WebKit Se ha solucionado en Safari 15.4.
    • El volumen del audio es bajo en Safari para iOS. Esto Error de WebKit se ha corregido en Safari 15.4.
  • Cifrado de extremo a extremo — En OpenTok.js 2.27.0, el cifrado de extremo a extremo no funcionará con clientes que utilicen una versión anterior de OpenTok.js. Cuando actualices tu aplicación para utilizar OpenTok.js 2.27.0 o posterior, asegúrate de que todos los clientes utilicen OpenTok.js 2.27.0 o posterior si la aplicación utiliza cifrado de extremo a extremo.

Interoperabilidad

La versión actual de la biblioteca OpenTok.js, la 2.35.1, es compatible con las aplicaciones de OpenTok desarrolladas con la versión 2.33 o posterior de los SDK de cliente de OpenTok:

  • OpenTok.js
  • SDK de OpenTok para Android
  • SDK de OpenTok para iOS
  • SDK de OpenTok para Windows
  • SDK de OpenTok para macOS
  • SDK de OpenTok para Linux
  • SDK React Native de OpenTok

Instalación

Para cargar OpenTok.js en tu página web, añade la siguiente etiqueta script:

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

Instalación mediante paquetes de GitHub

Además de instalarlos desde el registro de npm, los paquetes del Client SDK también están disponibles a través de Registro NPM de los paquetes de GitHub. Esto ofrece un canal de distribución alternativo para entornos empresariales que requieren una gestión de paquetes basada en GitHub.

Paquetes disponibles

El siguiente paquete está publicado en GitHub Packages:

Instrucciones de instalación

Para instalar paquetes desde el registro NPM de GitHub Packages, debes configurar npm para que se autentique con GitHub:

1. Crear un token de acceso personal (PAT) de GitHub

Genera un token de acceso personal con read:packages scope desde la configuración de tu cuenta de GitHub.

2. Configura tu .npmrc archivo

Añada la siguiente configuración a la carpeta .npmrc o su archivo ~/.npmrc archivo:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@vonage:registry=https://npm.pkg.github.com

Sustituir YOUR_GITHUB_TOKEN con tu token de acceso personal de GitHub.

3. Instalar el paquete

Una vez configurado, puedes instalar el paquete utilizando el comando estándar «npm install»:

npm install @opentok/client

Nota sobre la disponibilidad de los paquetes

Tanto el registro npm tradicional como el registro de paquetes de GitHub se mantienen sincronizados. Puedes elegir cualquiera de los dos métodos de distribución en función de las preferencias de gestión de paquetes de tu organización. El método tradicional de instalación de npm (a través de npm install @opentok/client (desde el registro predeterminado) sigue siendo totalmente compatible y no requiere ninguna configuración adicional.

Para obtener más información sobre cómo trabajar con el registro NPM de los paquetes de GitHub, consulta la sección Documentación de los paquetes de GitHub.

Requisitos del sistema

Para disfrutar de una transmisión de vídeo fluida en los navegadores actuales, asegúrate de que tu dispositivo cumpla con estas especificaciones recomendadas:

  • CPU: Un procesador de doble núcleo reciente; uno de cuatro núcleos (por ejemplo, Intel Core i5 o Ryzen 5) o superior para resolución 1080p o multitarea intensiva.
  • GPU: Gráficos integrados modernos (Intel UHD/Iris Xe o AMD Radeon o Nvidia Graphics) para 1080p; se recomienda encarecidamente la compatibilidad con decodificación de hardware para codificación de vídeo.
  • RAM: Al menos 8 GB para el streaming diario; se recomiendan 16 GB si tienes muchas pestañas o aplicaciones abiertas.
  • Almacenamiento: SSD preferido para carga rápida y capacidad de respuesta del sistema.
  • Red: Conectividad a Internet fiable; funciona a través de Wi-Fi, Ethernet o móvil.
  • Otros: La aceleración de hardware debe estar activada en el navegador para un rendimiento óptimo.

Estas recomendaciones garantizan una reproducción estable, un menor consumo de CPU y un rendimiento fluido al reproducir vídeo en streaming.

Aprender a construir

La mejor forma de aprender a utilizar la biblioteca OpenTok.js es seguir nuestro tutorial básico sobre videochat para web:

Ver tutorial

Una vez que hayas comprendido los conceptos básicos para desarrollar con OpenTok.js, podrás obtener información más detallada y aprender a personalizar tu aplicación con nuestro Guías para desarrolladores. Para obtener más información sobre clases y métodos específicos de la API, puedes consultar la Referencia de OpenTok.js.

Compatibilidad con navegadores

La biblioteca OpenTok.js es compatible actualmente con:

  • Google Chrome (última versión disponible)
  • Google Chrome para Android (última versión)
  • Google Chrome para iOS (última versión)
  • Firefox (última versión)
  • Firefox para Android (última versión disponible)
  • Compatibilidad con la versión beta de Firefox para iOS (última versión publicada)
  • Microsoft Edge, versiones 79 y posteriores, para Windows y macOS (versiones de Edge basadas en Chromium)
  • Safari en macOS e iOS (última versión disponible). Para obtener información sobre la interoperabilidad de vídeo y otras cuestiones, consulta el Compatibilidad con el navegador Safari página.
  • Opera (sólo la última versión de escritorio)
  • Electron (última versión)
  • Samsung Internet (última versión)
  • WebView (android.webkit.WebView) Nivel de API de Android 36 o superior
  • WebView (wkwebview) iOS 18.6 o posterior

Importante: La versión 2.16 de OpenTok.js fue la última en ser compatible con el complemento de OpenTok para Internet Explorer. La versión 2.16 de OpenTok.js dejó de estar disponible en mayo de 2020 para el entorno Standard y en junio de 2020 para el entorno Enterprise.

Compatibilidad con Async/Await y Promise

A partir de la versión 2.35.1, el SDK de JS es compatible con las tecnologías modernas async/await y patrones basados en promesas, junto con la API existente basada en callbacks. Este cambio es totalmente compatible con versiones anteriores: todo el código existente basado en callbacks sigue funcionando sin necesidad de modificaciones.

Nota: Como parte de este trabajo, el SDK ha mejorado el control de los errores en sus flujos internos y ahora muestra la información sobre los errores con mayor precisión. A partir de la versión 2.35.1, algunas funciones notifican errores que antes pasaban desapercibidos. No se trata de nuevos fallos, sino de errores preexistentes que ahora se propagan correctamente, por lo que es posible que observes que se notifican errores en casos que antes pasaban desapercibidos.

Hay dos modelos disponibles, dependiendo del método:

Métodos que antes devolvían void (como session.signal(), OT.getDevices() y otros) ahora admiten una función de devolución opcional y, además, devuelven un Promise. Consulta la lista completa debajo de los fragmentos de código:

// Callback style (still works)
session.signal({ data: 'hello' }, function(error) {
  if (error) { console.error(error); }
  else { console.log('Signal sent'); }
});

// Promise / async-await style (new in 2.35.1)
try {
  await session.signal({ data: 'hello' });
  console.log('Signal sent');
} catch (error) {
  console.error(error);
}

Métodos que antes devolvían un objeto (como OT.initPublisher(), session.publish()y session.subscribe()) presentan una nueva .promise() función del propio método. Consulta la lista completa debajo de los fragmentos de código:

// Callback style (still works)
const publisher = OT.initPublisher(targetElement, properties, function(error) {
  if (error) { console.error(error); }
});

// Promise / async-await style (new in 2.35.1)
try {
  const publisher = await OT.initPublisher.promise(targetElement, properties);
} catch (error) {
  console.error(error);
}

Métodos actualizados

Se han actualizado los siguientes métodos para que admitan «promises»:

Funciones que antes devolvían void — El parámetro de devolución de llamada ahora es opcional y la función también devuelve un Promise:

Método Devuelve
OT.checkScreenSharingCapability Promise<void>
OT.getDevices Promise<Device[]>
OT.reportIssue Promise<void>
publisher.getStats Promise<void>
publisher.publishCaptions Promise<void>
session.disconnect Promise<void>
session.forceDisconnect Promise<void>
session.forceUnpublish Promise<void>
session.signal Promise<void>
subscriber.getStats Promise<void>
subscriber.setPreferredFrameRate Promise<void>
subscriber.setPreferredResolution Promise<void>

Funciones que antes devolvían un objeto — una nueva .promise() La función se expone en el propio método:

Método Devuelve
OT.initPublisher .promise() devoluciones Promise<Publisher>
publisher.destroy .promise() devoluciones Promise<void>
publisher.publishAudio .promise() devoluciones Promise<void>
publisher.publishVideo .promise() devoluciones Promise<void>
session.connect .promise() devoluciones Promise<Session>
session.publish .promise() devoluciones Promise<Publisher>
session.subscribe .promise() devoluciones Promise<Subscriber>
subscriber.setAudioVolume .promise() devoluciones Promise<void>
subscriber.restrictFrameRate .promise() devoluciones Promise<void>
subscriber.subscribeToAudio .promise() devoluciones Promise<void>
subscriber.subscribeToVideo .promise() devoluciones Promise<void>

Se han actualizado las definiciones de TypeScript para reflejar todas las nuevas firmas.

Nota: Para obtener una guía detallada sobre cómo migrar tu código actual basado en callbacks a promesas, consulta el Guía de transición de las funciones de devolución de llamada del SDK de JS a las «promises».

Números de versión

Puedes incluir la librería OpenTok.js en tu página web utilizando una etiqueta <script> etiqueta:

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

El número de versión de OpenTok.js consta de tres partes:

  • El número de versión principal: este número (el primero) se incrementa cuando se lanza una nueva versión que incluye un cambio en la API que no es compatible con versiones anteriores.
  • El número de versión menor: este número (el segundo) se incrementa cuando se lanza una nueva versión que incorpora nuevas funcionalidades.
  • El número de parche - Este número (el tercero) se incrementa cuando hay una nueva versión que corrige errores o mejora el rendimiento sin añadir nuevas funcionalidades.

Por ejemplo, v2.4.0 es la versión mayor 2, la versión menor 4 (de la versión mayor 2) y la revisión 0 (de v2.4). A medida que se publican versiones de revisión, los cambios se incluyen en la revisión menor raíz. Por ejemplo, cuando se publica la v2.2.3, sus cambios se incluyen en la v2.2.

Para hacer referencia a una revisión concreta, puede incluir el número de versión completo (como "v2.4.0") en el campo src . No obstante, te recomendamos que especifiques únicamente el número de versión principal. Vonage ofrece soporte oficial para la versión actual de la biblioteca. Si estás utilizando una versión anterior, te rogamos que la actualices para poder beneficiarte de las últimas correcciones de errores y funciones de la plataforma OpenTok.

Importante: Utiliza siempre las bibliotecas que te proporcionamos sin modificarlas. De este modo, te aseguras de utilizar el código más reciente, actualizado y probado. La Video API de Vonage no admite el uso de bibliotecas modificadas.

Para obtener más información sobre versiones concretas de OpenTok.js, consulta la documentación de OpenTok notas de la versión. Para saber cuándo están disponibles las nuevas versiones de OpenTok.js, visita la Video API: nuevas versiones página y haz clic en el Seguir botón.

Muestras de código

Para ver ejemplos de código, visite nuestra página Repositorio «video-api-web-samples» en GitHub.

Documentación y más información

Véase el Referencia de la API de OpenTok.js y el Guías para desarrolladores de OpenTok.

Para consultar la lista de nuevas funciones y problemas conocidos, consulta el notas de la versión.