Bonjour tout le monde

Configurez un chat audio-vidéo simple, accessible depuis un navigateur, en quelques minutes.

Conditions préalables

Configuration de base d'OpenTok code côté client sur Internet est relativement simple, mais vous aurez besoin de quelques éléments pour vous assurer que tout fonctionne correctement :

  • Navigateur Chrome ou Firefox — OpenTok fonctionne avec plusieurs navigateurs, mais pour cette démo, nous vous recommandons d'utiliser Chrome ou Firefox
  • Webcam et microphone — votre navigateur vous demandera l'autorisation d'y accéder

Mettre en place un chat audio-vidéo simple avec OpenTok

Vous trouverez ci-dessous un document HTML modifiable chargé avec le OpenTok.js bibliothèque. Suivez les étapes indiquées sous le document HTML pour configurer rapidement un chat OpenTok de base.

Voir le Pen « Hello World » intégré (@tokbox) le CodePen.

Étape 1 sur 5 : Authentification

Copiez l'extrait de code ci-dessous et ajoutez-le au fichier HTML document sous // credentials (utilisez le (bouton « Copier ».)

var apiKey = 'Génération en cours...' ;
var sessionId = 'Génération en cours...' ;
var jeton = 'Génération en cours...' ;

Vous devez présenter un document valide Clé API, ID de la sessionet jeton lors de la connexion à une session OpenTok. Ces identifiants sont généralement générés par votre serveur mais cette fois-ci, c'est nous qui les avons créés pour vous.

D'accord, je l'ai ajouté

Étape 2 sur 5 : Se connecter à la session et créer un éditeur

Copiez l'extrait de code ci-dessous et ajoutez-le au fichier HTML document sous // connect to session. Cette opération va créer une vidéo d'éditeur ; votre navigateur pourrait donc vous demander l'autorisation d'accéder à votre caméra et à votre microphone.

var session = OT.initSession(apiKey, sessionId) ;

// créer un éditeur
var publisher = OT.initPublisher();
session.relier(token, function(err) {
       // éditeur de publication
       
});

Ce code initialise le session et éditeur et ensuite relie à la session. Vous devriez voir votre vidéo dans le panneau de sortie.

OK, je vois ma vidéo. Retour à l'étape précédente

La vidéo ne s'affiche pas ? Essayez de cliquer sur le    Cliquez sur l'icône dans votre barre d'adresse pour modifier les autorisations relatives à votre webcam.

Étape 3 sur 5 : Publier l'éditeur

Copiez l'extrait de code ci-dessous et ajoutez-le au fichier HTML document sous // publish publisher.

session.publish(publisher);

Ce code publie le flux audio-vidéo de la session à l'aide de votre webcam et de votre microphone.

OK, je l'ai ajouté. Retour à l'étape précédente.

Étape 4 sur 5 : Créer un abonné

Copiez l'extrait de code ci-dessous et ajoutez-le au fichier HTML document sous // create subscriber. Vous devrez peut-être faire défiler la page vers le bas dans le document HTML.

session.on('streamCreated', function(event) {
   session.souscrire(event.stream);
});

Ce code vous permet de souscrire aux nouveaux flux publiés par d'autres clients au cours de la session.

OK, je l'ai ajouté. Retour à l'étape précédente.

Étape 5 sur 5 : Ajouter un deuxième participant pour créer un chat vidéo en tête-à-tête

Coupez le son du haut-parleur de votre ordinateur (pour éviter tout effet Larsen). Cliquez ensuite sur le bouton ci-dessous pour lancer un deuxième client dans un nouvel onglet de navigateur (à l'aide de Codepen). Cela devrait créer un deuxième éditeur, et vous verrez alors deux flux vidéo s'afficher sur la page.

En cliquant sur le bouton ci-dessous, vous ouvrirez une page Codepen dans un nouvel onglet de votre navigateur ; vous pourrez ensuite revenir à cet onglet.

Retour à l'étape précédente

Et voilà !

Vous venez de mettre en place un chat vidéo en tête-à-tête (très) basique à l'aide d'OpenTok. C'est un excellent premier pas, mais le code utilisé ici correspond à une implémentation minimale destinée à vous permettre de découvrir rapidement OpenTok en action. Vous devrez effectuer quelques configurations supplémentaires avant de lancer une application en production, notamment le déploiement d'un serveur.

Prochaines étapes :

Retour à l'étape précédente