Partager:
){kind=small}
Hui Jing est développeuse chez Nexmo. Elle a un amour immodéré pour le CSS et la typographie, et est généralement passionnée par tout ce qui touche au web.
Créer une conversation vidéo de base avec l'API Video de Vonage
Temps de lecture : 7 minutes
Cette série de tutoriels explorera l'API vidéo de Vonage (anciennement TokBox OpenTok). Video API de Vonage (anciennement TokBox OpenTok) et ce que vous pouvez construire avec. L'API Video est très robuste et hautement personnalisable. Dans chaque article, nous montrerons comment mettre en œuvre une fonctionnalité spécifique à l'aide de l'API, en commençant par le chat audio-vidéo le plus basique.
Comme cette application nécessitera un peu de code côté serveur, nous utiliserons Glitch pour faciliter l'installation. Vous pouvez également télécharger le code de ce projet Glitch et le déployer sur le serveur ou la plateforme d'hébergement de votre choix (il faudra probablement modifier la configuration en fonction des exigences de votre plateforme).
Nous n'utiliserons pas de frameworks frontaux pour cette série, mais seulement du Javascript vanille pour nous concentrer sur l'API Video elle-même. À la fin de ce tutoriel, vous devriez être en mesure de démarrer un chat audio-vidéo avec un ami en partageant un lien avec lui.
Tout le code de cette application peut être trouvé dans ce dépôt GitHub ou remixé sur Glitch.
Avant de commencer, vous aurez besoin d'un compte Video API de Vonage, que vous pouvez créer gratuitement ici. Vous aurez également besoin de Node.js installé (si vous n'utilisez pas Glitch).
Après vous être connecté à votre Account, vous verrez l'interface de votre tableau de bord. Vous pouvez créer un nouveau projet en sélectionnant Créer un nouveau projet dans la barre latérale gauche.
Deux options s'offrent à vous, Intégrer ou API. Choisissez l'option API en cliquant sur le bouton Créer un projet personnalisé pour choisir l'option API.
L'étape suivante vous demandera le nom de votre projet et le codec que vous préférez. Nommez votre projet comme vous le souhaitez et choisissez le codec suggéré, à savoir VP8 pour l'instant. Les différences entre VP8 et H.264 sont détaillées ici.
Une fois votre projet créé, vous aurez accès à votre clé API et à votre secret. Chaque projet aura sa propre clé API et son propre secret.
Si vous avez choisi de ne pas utiliser Glitch, vous pouvez sauter cette partie et passer directement à l'explication du code dans la section suivante.
Sur la page d'accueil de Glitch, sélectionnez Nouveau projet dans le coin supérieur droit de la page, et choisissez le projet hello-express ce qui vous donne une application Node avec Express installé.
Vous pouvez installer des bibliothèques supplémentaires via la ligne de commande en ouvrant la console. Cliquez sur l'onglet Outils en bas de la barre latérale gauche, puis cliquez sur Journaux.
Installez le SDK du serveur Video API de Vonage à l'aide de la commande suivante :
pnpm install opentok --saveNotez l'utilisation de pnpm au lieu de npmqui est le gestionnaire de paquets de choix sur Glitch. Il fait la même chose que npm.
Une fois que c'est fait, allez de l'avant et nettoyez le fichier server.js pour supprimer le code inutile.
Allez dans le fichier .env et ajoutez votre clé API et votre secret provenant de votre projet API Video de Vonage.
Voici à quoi ressemble la structure du dossier lorsque vous démarrez un nouveau Glitch hello-express nouveau projet :
Notre application sera composée de deux pages : une page d'accueil permettant aux utilisateurs de créer une session (nous l'appellerons "salle" et les participants suivants pourront rejoindre cette même "salle"), puis la page de chat vidéo proprement dite.
Ajoutons un fichier landing.html au dossier views en cliquant sur le bouton Nouveau fichier dans la barre latérale gauche. Nommez le fichier views/landing.html et collez les balises suivantes dans la page. La page comportera un simple élément de formulaire avec une entrée permettant aux utilisateurs de soumettre un nom de chambre. Vous pouvez utiliser la balise suivante si vous ne voulez pas écrire votre propre balise à partir de zéro.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Video Chat</title>
<meta name="description" content="A basic audio-video chat application" />
<link
id="favicon"
rel="icon"
href="https://tokbox.com/developer/favicon.ico"
type="image/x-icon"
/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<h1>The most basic video chat</h1>
</header>
<main>
<form id="registration" class="registration">
<label>
<span>Room</span>
<input
type="text"
name="room-name"
placeholder="Enter room name"
required
/>
</label>
<button>Enter</button>
</form>
</main>
</body>
</html>
La page index.html La page sera également relativement sobre pour l'instant, une page avec deux éléments, un pour l'abonné et un pour l'éditeur. div l'un pour l'abonné et l'autre pour l'éditeur. Nous verrons la signification de ces termes lorsque nous aborderons la section de ce tutoriel consacrée à l'API Video de Vonage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Video Chat</title>
<meta name="description" content="A basic audio-video chat application" />
<link
id="favicon"
rel="icon"
href="https://tokbox.com/developer/favicon.ico"
type="image/x-icon"
/>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<h1>The most basic video chat</h1>
</header>
<main>
<div id="subscriber" class="subscriber"></div>
<div id="publisher" class="publisher"></div>
</main>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<script src="/client.js"></script>
</body>
</html>
Pour le fichier server.js nettoyons le code placeholder inutile. Il devrait vous rester quelque chose comme ceci :
const express = require("express");
const app = express();
app.use(express.static("public"));
app.get("/", (request, response) => {
response.sendFile(__dirname + "/views/index.html");
});
const listener = app.listen(process.env.PORT, () => {
console.log("Your app is listening on port " + listener.address().port);
});
Enfin, nous allons également supprimer les styles existants dans le fichier style.css afin de pouvoir les remplacer par les nôtres une fois que nous aurons tout câblé.
Voici un aperçu général du fonctionnement de l'API Video de Vonage, qui permet de connecter des personnes et d'avoir une discussion vidéo :
Étape 1 : La session est créée par votre serveur d'application
Étape 2 : Un client charge l'application et le serveur crée un jeton.
Étape 3 : Le client se connecte et commence à diffuser des informations sur la session.
Étape 4 : Un nouveau client se connecte à la session
Étape 5 : Les clients s'abonnent aux flux les uns des autres
Une introduction complète avec des GIF animés montrant l'ensemble du flux est disponible sur le site de documentation de l'API vidéo de site de documentation de Video API de Vonage.
Comme nous l'avons mentionné au début, TokBox OpenTok est maintenant Video API de Vonage. Nous n'avons pas modifié les noms de nos paquets, vous ferez donc toujours référence à OpenTok dans votre code. Commencez par instancier un objet OpenTok avec votre clé API et votre secret dans le fichier server.js dans le fichier
const OpenTok = require("opentok");
const OT = new OpenTok(process.env.API_KEY, process.env.API_SECRET);Modifions les itinéraires de nos deux pages de manière à ce que les utilisateurs voient la page d'atterrissage au premier chargement, qui leur permet d'entrer un nom de salle pour démarrer une session. Une fois qu'ils auront réussi, ils seront redirigés vers la page principale de l'application, où la vidéo sera affichée.
app.get("/", (request, response) => {
response.sendFile(__dirname + "/views/landing.html");
});
app.get("/session/:room", (request, response) => {
response.sendFile(__dirname + "/views/index.html");
});
Dans notre fichier landing.html ajoutons un gestionnaire d'événement pour la soumission du formulaire qui transmettra POST le nom de la salle à notre serveur. Comme il s'agit de quatre lignes de code, nous allons l'ajouter en tant que balise de script au bas de la page.
const form = document.getElementById("registration");
form.addEventListener("submit", event => {
event.preventDefault();
location.pathname = `/session/${form.elements["room-name"].value}`;
});
Cela signifie que nous devrons gérer l'itinéraire POST dans le fichier server.js dans le fichier Le morceau de code suivant est assez long, c'est pourquoi les explications sont incluses sous forme de commentaires dans le code. L'essentiel est de vérifier s'il existe déjà une session ou d'en créer une nouvelle si nécessaire, en se basant sur le nom de la salle saisi sur la page d'accueil. Chaque session possède un identifiant unique, qui permet à d'autres personnes de se joindre à la session.
Ce code génère ensuite les informations d'identification nécessaires au client pour se connecter à la session. Il s'agit de l'identifiant de la session, d'un jeton et de la clé de l'API. Ces informations d'identification seront renvoyées au client en tant que réponse.
let sessions = {};
app.post("/session/:room", (request, response) => {
const roomName = request.params.room;
// Check if the session already exists
if (sessions[roomName]) {
// Generate the token
generateToken(roomName, response);
} else {
// If the session does not exist, create one
OT.createSession((error, session) => {
if (error) {
console.log("Error creating session:", error);
} else {
// Store the session in the sessions object
sessions[roomName] = session.sessionId;
// Generate the token
generateToken(roomName, response);
}
});
}
});
function generateToken(roomName, response) {
// Configure token options
const tokenOptions = {
role: "publisher",
data: `roomname=${roomName}`
};
// Generate token with the OpenTok SDK
let token = OT.generateToken(
sessions[roomName],
tokenOptions
);
// Send the required credentials back to to the client
// as a response from the fetch request
response.status(200);
response.send({
sessionId: sessions[roomName],
token: token,
apiKey: process.env.API_KEY
});
}
Côté client, nous commençons par créer un objet session avec la clé API et l'identifiant de session de la réponse. Nous devons également créer un objet publisher, qui remplacera l'élément div avec l'élément id=publisher par votre flux Video.
Nous nous connecterons à la session avec la méthode session.connect() et, en cas de succès, nous publierons notre flux vidéo avec la méthode session.publish() méthode.
Nous écouterons également l'événement streamCreated afin de pouvoir nous abonner aux utilisateurs qui rejoignent la session après que nous nous y soyons connectés.
// Create a session object with the session ID
const session = OT.initSession(apiKey, sessionId);
// Create a publisher
const publisher = OT.initPublisher(
"publisher", // should match the ID of an element in your HTML
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
// Connect to the session
session.connect(token, error => {
// If the connection is successful, initialize the publisher and publish to the session
if (error) {
handleCallback(error);
} else {
session.publish(publisher, handleCallback);
}
});
// Subscribe to a newly created stream
session.on("streamCreated", event => {
session.subscribe(
event.stream,
"subscriber",
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
});
// Callback handler
function handleCallback(error) {
if (error) {
console.log("error: " + error.message);
} else {
console.log("callback success");
}
}
Lorsque le formulaire de nom de salle est soumis, nous ferons une POST à la route /session/:room et utiliser les données de la réponse pour exécuter la fonctionnalité décrite ci-dessus. Pour ce faire, nous allons tout regrouper dans une fonction appelée initializeSession() comme suit :
fetch(location.pathname, { method: "POST" })
.then(res => {
return res.json();
})
.then(res => {
const apiKey = res.apiKey;
const sessionId = res.sessionId;
const token = res.token;
initializeSession(apiKey, sessionId, token);
})
.catch(handleCallback);
function initializeSession(apiKey, sessionId, token) {
// Create a session object with the sessionId
const session = OT.initSession(apiKey, sessionId);
// Create a publisher
const publisher = OT.initPublisher(
"publisher",
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
// Connect to the session
session.connect(token, error => {
// If the connection is successful, initialize the publisher and publish to the session
if (error) {
handleCallback(error);
} else {
session.publish(publisher, handleCallback);
}
});
// Subscribe to a newly created stream
session.on("streamCreated", event => {
session.subscribe(
event.stream,
"subscriber",
{
insertMode: "append",
width: "100%",
height: "100%"
},
handleCallback
);
});
}
La fonctionnalité générale de notre Video chat est terminée, il ne reste plus qu'à ajouter quelques styles pour ajuster la mise en page. Les deux éléments div (pour l'abonné et l'éditeur) verront leur contenu remplacé par leur flux vidéo respectif.
Il s'agit du style de mise en page le plus simple pour que le flux vidéo de votre éditeur s'affiche dans le coin inférieur gauche de la page, tandis que les autres personnes présentes sur le flux occupent tout l'arrière-plan de la page.
html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
header {
text-align: center;
padding: 0.5em;
}
main {
flex: 1;
display: flex;
position: relative;
}
input,
button {
font-size: inherit;
padding: 0.5em;
}
.registration {
display: flex;
flex-direction: column;
margin: auto;
}
.registration input[type="text"] {
display: block;
margin-bottom: 1em;
}
.subscriber {
width: 100%;
height: 100%;
display: flex;
}
.publisher {
position: absolute;
width: 25vmin;
height: 25vmin;
min-width: 8em;
min-height: 8em;
align-self: flex-end;
}Ces styles vous donneront le chat vidéo le plus basique avec la mise en page la plus basique, que vous avez déjà vue au début de ce tutoriel.
Vous pouvez ensuite ajouter des éléments visuels tels que des polices, des couleurs et même des images de logo, si vous le souhaitez, afin d'améliorer les choses.
Il existe d'autres fonctionnalités que nous pouvons créer avec l'API Video de Vonage et qui seront abordées dans de futurs tutoriels, mais en attendant, vous pouvez en savoir plus en consultant notre site de documentation complet. Si vous rencontrez des problèmes ou si vous avez des questions, contactez-nous sur notre Communauté Slack. Merci pour votre lecture !