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 con el código, cree una nueva carpeta de proyecto en su ordenador para alojar estos archivos (el ejemplo siguiente se llama miproyecto 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 en 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.
- Copie el siguiente código (utilizando el botón de copiar) y añádalo a su 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 al opentok.js así como los archivos JS y CSS que has creado. El código también incluye editor y abonado divs, que contendrán las secuencias de vídeo; utilizaremos estas clases para personalizar el diseño más adelante.
Videochat básico
Conoce los conceptos básicos de la plataforma de la Video API de Vonage, incluyendo cómo los usuarios pueden comunicarse a través de video, voz y mensajería. Explora un flujo básico de la Video API de Vonage.