Hola, mundo

Configura un sencillo chat de audio y vídeo a través del navegador en tan solo unos minutos.

Requisitos previos

Configuración básica de OpenTok código del lado del cliente En Internet es relativamente sencillo, pero necesitarás algunas cosas para asegurarte de que funcione correctamente:

  • Navegador Chrome o Firefox: OpenTok es compatible con varios navegadores, pero para esta demostración te recomendamos que utilices Chrome o Firefox
  • Cámara web y micrófono: tu navegador te pedirá que le permitas acceder a ellos

Configura un chat sencillo de audio y vídeo con OpenTok

A continuación se muestra un documento HTML editable cargado con el OpenTok.js biblioteca. Sigue los pasos que aparecen debajo del documento HTML para configurar rápidamente un chat básico de OpenTok.

Ver el Pen «Hola, mundo» incrustado (@tokbox) el CodePen.

Paso 1 de 5: Autenticación

Copia el fragmento de código que aparece a continuación y añádelo al HTML documento en // credentials (utiliza el (botón «Copiar»).)

var apiKey = 'Generando...';
var sessionId = 'Generando...';
var ficha = 'Generando...';

Debes presentar un documento válido Clave API, ID de sesióny ficha al conectarte a una sesión de OpenTok. Estas credenciales suelen ser generadas por tu servidor pero esta vez los hemos creado nosotros para ti.

Vale, ya lo he añadido.

Paso 2 de 5: Conéctate a la sesión y crea un editor

Copia el fragmento de código que aparece a continuación y añádelo al HTML documento en // connect to session. Esto creará un vídeo de «Publisher», por lo que es posible que tu navegador te pida permiso para acceder a la cámara y al micrófono.

var sesión = OT.initSession(apiKey, sessionId);

// crear editor
var publisher = OT.initPublisher();
sesión.conectar(token, function(err) {
       // publicar editor
       
});

Este código inicializa el sesión y editor y luego conecta a la sesión. Deberías ver tu vídeo en el panel de salida.

Vale, ya veo mi vídeo. Volver al paso anterior

¿No se ve el vídeo? Prueba a hacer clic en el    haga clic en el icono de la barra de direcciones para ajustar los permisos de la cámara web.

Paso 3 de 5: Publicar el editor

Copia el fragmento de código que aparece a continuación y añádelo al HTML documento en // publish publisher.

session.publish(publisher);

Este código publica la transmisión de audio y vídeo a la sesión mediante tu cámara web y tu micrófono.

Vale, ya lo he añadido. Vuelve al paso anterior.

Paso 4 de 5: Crear un suscriptor

Copia el fragmento de código que aparece a continuación y añádelo al HTML documento en // create subscriber. Es posible que tengas que desplazarte hacia abajo en el documento HTML.

session.on('streamCreated', function(event) {
   sesión.suscríbase a(event.stream);
});

Este código te permite suscríbase a a las nuevas transmisiones publicadas por otros clientes en la sesión.

Vale, ya lo he añadido. Vuelve al paso anterior.

Paso 5 de 5: Añade un segundo participante para crear un chat de vídeo uno a uno

Silencia el altavoz de tu ordenador (para evitar la retroalimentación de audio). A continuación, haz clic en el botón de abajo para abrir un segundo cliente en una nueva pestaña del navegador (utilizando Codepen). Esto debería crear un segundo editor, y verás dos transmisiones de vídeo en la página.

Al hacer clic en el botón de abajo, se abrirá un Codepen en una nueva pestaña de tu navegador; después, podrás volver a esta pestaña.

Volver al paso anterior

¡Ya está!

Acabas de configurar un chat de vídeo uno a uno (muy) básico con OpenTok. Es un primer paso estupendo, pero el código utilizado aquí es una implementación mínima diseñada para ver rápidamente cómo funciona OpenTok. Tendrás que realizar algunas configuraciones más antes de lanzar una aplicación en producción, incluida la implementación de un servidor.

Próximos pasos:

Volver al paso anterior