Creación de las carpetas del proyecto y de la plantilla HTML
Empezarás creando un archivo HTML, un archivo JavaScript y un archivo CSS. Estos tres archivos contendrán nuestro diseño, la lógica de la aplicación y algunos elementos visuales, respectivamente.
- Antes de empezar a programar, crea una nueva carpeta de proyecto en tu ordenador para guardar estos archivos (el ejemplo que aparece a continuación se llama mi proyecto pero puedes ponerle el nombre que quieras). A continuación, añada un /js y /css junto con archivos en blanco para index.html, app.jsy app.css con la siguiente estructura:
Una vez configurado el proyecto, abra la carpeta principal del proyecto en el editor de código y vaya a la sección index.html archivo.
- Copia el siguiente código (utilizando el botón «Copiar») y añádelo a tu archivo index.html en el editor de código:
<html>
<head>
<title> Vonage Getting Started </title>
<link href="css/app.css" rel="stylesheet" type="text/css">
<script src="https://video.standard.vonage.com/v2/js/opentok.min.js"></script>
</head>
<body>
<div id="videos">
<div id="subscriber"></div>
<div id="publisher"></div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
El código anterior incluye referencias a la opentok.js la biblioteca, así como los archivos JS y CSS que has creado. El código también incluye editor y suscriptor divs, que contendrán las secuencias de vídeo; utilizaremos estas clases para personalizar el diseño más adelante.
Videochat básico
Aprende los conceptos básicos de la plataforma Vonage Video API, incluyendo cómo los usuarios pueden comunicarse a través de vídeo, voz y mensajería. Explora un flujo básico de la Video API de Vonage.