Création des dossiers de projet et du modèle HTML
Vous commencerez par créer un fichier HTML, un fichier JavaScript et un fichier CSS. Ces trois fichiers contiendront respectivement notre mise en page, la logique de l'application et quelques éléments visuels.
- Avant de commencer à coder, créez un nouveau dossier de projet sur votre ordinateur pour y placer ces fichiers (l'exemple ci-dessous s'appelle monprojet mais vous pouvez lui donner le nom que vous voulez). Ajoutez ensuite un /js et /css ainsi que des fichiers vierges pour index.html, app.jset app.css dans la structure suivante :
Une fois votre projet configuré, ouvrez le dossier principal du projet dans votre éditeur de code et allez dans la section index.html fichier.
- Copiez le code suivant (en utilisant le bouton copier) et ajoutez-le à votre fichier index.html dans l'éditeur de code :
<!DOCTYPE html>
<html>
<head>
<title> OpenTok Signaling Sample </title>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<link href="css/app.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="textchat">
<p id="history"></p>
<form>
<input type="text" placeholder="Input your text here" id="msgTxt"></input>
</form>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Le code ci-dessus contient des références au opentok.js ainsi que les fichiers JS et CSS que vous avez créés. Le code comprend également une div pour le chat textuel et un formulaire pour l'envoi de messages.
Chat textuel de base
Suivez ce tutoriel pour créer un chat textuel de base à partir de zéro en utilisant l'API Video de Vonage. C'est la façon la plus rapide de construire une preuve de concept pour cette fonctionnalité sur la plateforme vidéo.