Configurer un client Web de base

Ce tutoriel vous guidera pas à pas dans la configuration d'un client de base pour une application web utilisant la Video API de Vonage.

Vue d'ensemble

Toutes les Applications qui utilisent l'API Video de Vonage nécessitent à la fois un client et un serveur composant. Le code côté client est celui qui s'exécute dans le navigateur de l'utilisateur final et gère la plupart des fonctionnalités d'OpenTok, notamment connexion à la session, l'édition audio-vidéo cours d'eau à la session, et souscrire aux flux d'autres clients. Pour plus d'informations sur les clients, les serveurs et les sessions, voir Les bases de Video API.

Dans ce tutoriel, vous allez utiliser OpenTok.js, la bibliothèque côté client d'OpenTok pour le Web, afin de développer rapidement et facilement une application vidéo interactive en temps réel.

Voici les points qui seront abordés dans ce tutoriel :

Exigences
Étape 1 : Création des dossiers du projet et du modèle HTML
Étape 2 : Configuration de l'authentification
Étape 3 : Connexion à la session et création d'un éditeur
Étape 4 : Initialisation de l'abonné
Étape 5 : Tester votre code dans un navigateur
Étape 6 : Quelques ajustements CSS
Prochaines étapes
Configuration de votre serveur

Durée estimée : 20 minutes

Vous voulez sauter ce tutoriel ? Vous pouvez accéder directement au code complet du client Web dans le Fonctionnalités de base du chat vidéo de notre Dépôt de l'application web d'exemple sur GitHub. Le dépôt comprend un README avec de la documentation pour l'exécution et l'exploration du code.

Exigences

Pour réaliser ce tutoriel, vous aurez besoin de :

Un Account Video API de Vonage valide - si vous n'en avez pas, vous pouvez s'inscrire pour un essai gratuit
Une webcam et un microphone
Google Chrome, Firefox ou un autre navigateur navigateur supporté
Un éditeur de code

Étape 1 : Création des dossiers du projet et du modèle HTML

Dans le cadre de ce projet, vous devrez créer un fichier HTML, un fichier JavaScript et un fichier CSS.

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 :
Copie
```
/myproject
    /js
        app.js
    /css
        app.css
    index.html
```
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 :

<html> <head> <title> OpenTok Getting Started </title> <link href="css/app.css" rel="stylesheet" type="text/css"> <script src="https://static.opentok.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>

Le code ci-dessus contient des références au OpenTok.js la bibliothèque ainsi que les fichiers JS et CSS que vous venez de créer. Le code comprend également éditeur et abonné qui contiendront les flux vidéo - nous utiliserons ces classes pour personnaliser la mise en page ultérieurement.

Cet exemple charge OpenTok.js directement depuis static.opentok.com. OpenTok.js est également disponible sous forme de module NPM. Pour savoir comment utiliser ce module NPM, consultez https://www.npmjs.com/package/@opentok/client.

Étape 2 : Configuration de l'authentification

Tirez sur votre vierge app.js dans votre éditeur de code - la plupart des étapes restantes impliqueront l'ajout de code à ce fichier.

Pour se connecter à une session OpenTok, le client devra disposer de certaines informations d'authentification — un Clé API, ID de la sessionet Jeton. Dans une application de production, ces informations d'identification doivent être générées par une application serveur, mais pour aller plus vite, nous allons simplement définir ces valeurs de manière statique pour l'instant.

Commencez par copier le bloc de code suivant et ajoutez-le à votre fichier app.js :

// replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // (optional) add server code here initializeSession();
Vous devrez modifier le code ci-dessus en définissant explicitement les valeurs pour le apiKey, sessionId et token. Pour ce faire, connectez-vous à votre Video API Account, créez un nouveau projet API OpenTok ou utilisez un projet API OpenTok existant, puis rendez-vous sur la page de votre projet et faites défiler vers le bas jusqu'à la section Outils de projet section — à partir de là, vous pouvez générer manuellement un identifiant de session et un jeton. Utilisez la clé API du projet ainsi que l'identifiant de session et le jeton que vous avez générés pour remplacer YOUR_API_KEY, YOUR_SESSION_ID et YOUR_TOKEN dans le code ci-dessus (veillez à conserver les guillemets.)

Important : Vous pouvez continuer à récupérer l'identifiant de session et le jeton depuis votre Account pendant les phases de test et de développement, mais avant de passer en production, vous devez configurer un serveur. Consultez le guide facultatif pour configuration d'un serveur à la fin de ce tutoriel.

Pour plus d'informations sur les sessions, jetons, et les serveurs, rendez-vous sur Les bases de Video API.

Étape 3 : Connexion à la session et création d'un éditeur

Vous avez peut-être remarqué que les initializeSession() qui est appelée à la dernière étape après avoir obtenu l'identifiant et le jeton de session. Cette méthode initialise un objet de session et se connecte ensuite à la session, mais nous ne l'avons pas encore définie dans notre code.

Copiez le code suivant et collez-le sous le code existant dans votre fichier app.js :

// Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

Créer un éditeur

L'application initialise un OpenTok publisher avec l'objet OT.initPublisher(). Cette méthode prend trois paramètres facultatifs :

L'élément DOM que la vidéo « publisher » remplace — dans ce cas, le publisher div
Les caractéristiques de l'éditeur — en l'occurrence le insertMode, heightet width attributs
Le troisième paramètre (absent de notre code) définit le gestionnaire de fin d'exécution

Pour en savoir plus sur ces options, consultez le OT.initPublisher() documentation de référence.

Initialisation et connexion à la session

Les OT.initSession() Cette méthode prend deux paramètres : la clé API OpenTok et l'identifiant de session. Elle initialise et renvoie un objet OpenTok session objet.

Les connect() de la méthode session Cet objet connecte l'application cliente à la session OpenTok. Vous devez vous connecter avant d'envoyer ou de recevoir des flux audio-vidéo dans la session (ou avant d'interagir de quelque manière que ce soit avec la session). Le connect() La méthode prend deux paramètres : un token et une fonction de gestion des événements de fin d'exécution function(error).

Une fois la session établie, nous publions des données vers celle-ci à l'aide de session.publish(publisher).

Si le client ne parvient pas à se connecter à la session OpenTok, un objet d'erreur est transmis au gestionnaire de fin de l'événement « connect » ; dans ce cas, celui-ci affiche un message d'erreur sur la console à l'aide de console.error().

Étape 4 : Initialisation de l'abonné

Enfin, nous voulons que les clients puissent souscrire à (ou voir) les flux de l'autre dans la session.

Dans votre app.js vous devriez avoir un commentaire qui dit // Subscribe to a newly created stream. Copiez le code suivant et ajoutez-le directement sous ce commentaire :

session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); });

Lorsqu'un nouveau flux est créé au cours de la session, l'objet Session déclenche un streamCreated événement. Lorsque le client détecte un flux, nous voulons qu'il s'abonne à ce flux, ce que nous faisons dans le code ci-dessus à l'aide de la fonction session.subscribe() méthode. Cette méthode prend quatre paramètres :

L'objet Stream auquel le client est abonné — event.stream
L'élément DOM ou l'identifiant de l'élément DOM (facultatif) que la vidéo de l'abonné remplace — dans ce cas, le subscriber div
Un ensemble de propriétés (facultatives) permettant de personnaliser l'apparence de la vue de l'abonné — dans ce cas, la insertMode, heightet width attributs
La fonction de gestion de fin d'exécution (facultative) qui est appelée lorsque le subscribe() la méthode aboutit ou échoue

Pour en savoir plus sur ces options, consultez le Session.subscribe() documentation de référence.

Étape 5 : Tester votre code dans un navigateur

À ce stade, votre app.js devrait ressembler à ceci (avec quelques ajustements) :

// replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } // (optional) add server code here initializeSession(); function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); }); // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, initialize a publisher and publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

Dans votre code complété, vous devriez avoir des valeurs codées en dur pour remplacer YOUR_API_KEY, YOUR_SESSION_ID et YOUR_TOKEN - si vous ne l'avez pas encore fait, voir Mise en place de l'authentification ci-dessus.

Si tout semble correct, n'hésitez pas à tester votre code en ouvrant le fichier index.html dans Chrome ou Firefox.

Lorsque vous chargez la page, vous devrez peut-être autoriser le navigateur à accéder à votre webcam et à votre microphone. Une fois cette opération effectuée, vous devriez voir s'afficher sur la page un flux vidéo vous montrant (ou montrant ce que filme votre webcam).
Si ça avait marché, couper le son Ouvrez ensuite un autre onglet (tout en laissant l'onglet d'origine ouvert) et chargez la même URL. Vous devriez désormais pouvoir faire défiler la page vers le bas et voir une deuxième vidéo. Si vous cliquez avec le bouton droit de la souris sur l'une ou l'autre des vidéos et que vous sélectionnez « Inspecter l'élément », vous devriez constater que l'une des vidéos occupe toute la subscriber div, et l'autre consiste à remplir le publisher div.

Conseil de dépannage : Si aucune vidéo ne s'affiche sur la page, ouvrez l'onglet "console" dans les outils de votre navigateur (commande+option+i sur Mac, CTRL+i sur Windows) et recherchez les erreurs. Le problème le plus probable est que votre clé API, votre ID de session ou votre jeton n'est pas correctement configuré. Étant donné que vous avez codé en dur vos informations d'identification, il est également possible que votre jeton ait expiré.

Étape 6 : Quelques ajustements CSS

À ce stade, vous disposez d'un client fonctionnel complet utilisant OpenTok. Cette dernière étape va simplement vous montrer comment effectuer quelques personnalisations CSS de base afin d'obtenir une mise en page « image dans l'image ».

Ouvrez votre fichier app.css vierge dans votre éditeur de code et ajoutez-y le code suivant :

body, html { background-color: gray; height: 100%; } #videos { position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } #subscriber { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; } #publisher { position: absolute; width: 360px; height: 240px; bottom: 10px; left: 10px; z-index: 100; border: 3px solid white; border-radius: 3px; }

Une fois que vous avez enregistré le CSS, rouvrez votre index dans deux onglets de navigateur distincts. Vous devriez maintenant voir deux flux vidéo, mais l'un d'entre eux sera plus petit et imbriqué dans le flux vidéo plus important.

Si vous regardez le CSS ci-dessus, vous pouvez voir que nous avons fait cela en ajustant la hauteur, la largeur et la position de l'élément #publisher div. Cette disposition "image dans l'image" est une pratique courante dans les chats vidéo, mais n'hésitez pas à ajuster le CSS pour jouer avec la taille et la position de ces divs autant que vous le souhaitez.

Félicitations ! Vous avez terminé le tutoriel "Configurer un client Web de base".
Vous pouvez continuer à jouer avec le code que vous avez développé ici et l'ajuster pour le côté client de votre application, mais gardez à l'esprit que vous devrez mettre en œuvre la méthode composant du serveur de votre application avant de la mettre en production (voir Configuration de votre serveur ci-dessous).

Prochaines étapes

Une fois que vous aurez terminé cette étape, poursuivez le développement et l'amélioration de votre application OpenTok à l'aide des ressources utiles suivantes :

Configuration de votre serveur

Dans le tutoriel ci-dessus, nous vous avons demandé de enregistrer vos identifiants d'authentification en dur. Toutefois, pour une application en production, le sessionId et token Les valeurs présentes dans votre code doivent être générées par votre serveur d'applications et transmises au client. Voici quelques raisons pour lesquelles il vaut mieux éviter d'utiliser des identifiants codés en dur dans votre application de production :

Les jetons expirent au bout d'un certain temps (déterminé lors de leur génération) ; il est donc nécessaire d'en générer régulièrement de nouveaux.
Vous ne pourrez pas créer de nouvelles sessions de manière dynamique ; par conséquent, tous les utilisateurs de votre application se retrouveront confinés dans une seule et même « salle ».

Vous pouvez continuer à tester votre application avec des valeurs codées en dur, mais lorsque vous serez prêt à mettre en place un serveur, plusieurs solutions s'offrent à vous :

Option serveur n° 1 — Lancer un serveur REST simple sur Heroku en un seul clic

C'est sans doute le moyen le plus rapide de mettre un serveur en service, mais ses fonctionnalités sont limitées. Il vous suffit de cliquer sur le bouton « Heroku » ci-dessous ; vous serez alors redirigé vers le site web de Heroku et invité à saisir votre clé API OpenTok et votre secret API — vous pouvez retrouver ces informations sur la page de votre projet dans votre Video API Account. Si vous n'avez pas d'account Heroku, vous devrez vous inscrire (c'est gratuit).

Envie de découvrir le code ? Le bouton ci-dessus lance le code du serveur à partir du apprentissage-opentok-php Dépôt GitHub. Rendez-vous sur ce dépôt pour consulter le code ainsi que la documentation complémentaire ; vous pouvez même créer une branche dérivée du dépôt et y apporter des modifications avant le déploiement.

Vous préférez Node.js ? Visitez le site apprentissage-opentok-node dépôt contenant la même fonctionnalité sous Node.js (avec un bouton de déploiement sur Heroku).

Une fois le serveur déployé sur Heroku (que ce soit en PHP ou en Node.js), vous devrez ajouter quelques lignes à votre code côté client. Dans votre app.js fichier, vous devriez voir un commentaire // (optional) add server code here.

Copiez le code suivant et utilisez-le pour remplacer // (optional) add server code here et le initializeSession() Appelez cette fonction dans votre fichier app.js :

// (optional) add server code here var SERVER_BASE_URL = 'https://YOURAPPNAME.herokuapp.com'; fetch(SERVER_BASE_URL + '/session').then(function(res) { return res.json() }).then(function(res) { apiKey = res.apiKey; sessionId = res.sessionId; token = res.token; initializeSession(); }).catch(handleError);

Vous devrez remplacer https://YOURAPPNAME.herokuapp.com en remplaçant par l'URL réelle de votre application Heroku — vous la trouverez sur la page de votre application sur le site web de Heroku.

Le code ci-dessus utilise Ajax pour envoyer une requête vers le /session point final (https://YOURAPPNAME.herokuapp.com/session), qui devrait renvoyer une réponse HTTP contenant l'identifiant de session, le jeton et la clé API au format JSON, lesquels sont ensuite affectés aux variables correspondantes.

Le présent /session Le point de terminaison renverra toujours le même identifiant de session, mais générera un nouveau jeton à chaque fois qu'il sera appelé ; ainsi, chaque client recevra un jeton unique.

Option 2 pour le serveur — Développement à partir de zéro à l'aide des SDK du serveur

L'option 1 utilise des points de terminaison REST pour transmettre les identifiants au client, mais ce n'est qu'une des nombreuses façons de mettre en œuvre un serveur avec OpenTok. Si vous souhaitez bénéficier d'un niveau de personnalisation plus poussé, vous pouvez consulter la documentation d'OpenTok Documentation du SDK serveur pour le langage côté serveur de votre choix (disponible pour PHP, Node.js, Java, .NET, Python et Rubis). La documentation décrit le processus de configuration et les différentes méthodes à utiliser pour générer des sessions et des jetons, ainsi que d'autres fonctionnalités côté serveur.

Option serveur n° 3 — Utilisez l'une de nos applications client-serveur d'exemple pour le Web

Nous avons développé des exemples d'applications simples comprenant un code client-serveur complet pour chaque langage côté serveur (PHP, Node.js, Java, .NET, Python et Ruby). Ces exemples incluent déjà des clients complets ; vous n'aurez donc pas besoin du code client que vous avez configuré dans ce tutoriel.

Pour consulter les exemples d'applications dans la langue de votre choix, rendez-vous sur notre Page « Exemples de code » puis sélectionnez l'un des langages côté serveur parmi ceux proposés sous Système client-serveur simple pour le Web.