Intégration de chats vidéo

Intégrez rapidement les fonctionnalités de la Video API Vonage à votre site web grâce à un simple widget intégrable.

Créer un widget de chat vidéo dans votre compte Video API

Voici un exemple d'intégration d'un chat vidéo.
Cliquez pour lancer l'appel, puis cliquez sur le bouton ci-dessous pour partager ce lien d'intégration unique permettant d'entamer un chat vidéo en tête-à-tête.

Partager cet élément intégré

https://your-domain/opentok/embeds/?room=roomParam

Pour ajouter un deuxième utilisateur à la salle de discussion, Copiez l'URL ci-dessus et ouvrez-la dans un nouvel onglet de votre navigateur, ou partagez-la avec un ami. L'autre utilisateur devra lui aussi cliquer dessus pour lancer l'appel.

Vue d'ensemble

La fonctionnalité « Intégration du chat vidéo » est le moyen le plus simple d'ajouter rapidement les fonctionnalités de base d'OpenTok à votre site web à l'aide d'un extrait de code HTML intégrable.

Une fois le code d'intégration mis en place sur votre site, vous pouvez cliquer dessus pour vous connecter à un « salon de chat vidéo ». Les autres utilisateurs peuvent alors cliquer sur ce même code d'intégration dans leur navigateur et rejoindre le même salon de chat. Vous pouvez même créer des salons distincts à partir du même code d'intégration en utilisant la paramètre de pièce.

L'intégration des chats vidéo est prise en charge sur toutes les navigateurs pris en charge par la bibliothèque OpenTok.js.

Limites

À l'heure actuelle, les modules d'intégration de chat vidéo ne fonctionnent que sur le Web et offrent des fonctionnalités de base en matière de chat audio-vidéo. L'intégration aux applications mobiles ainsi que les fonctionnalités avancées telles que l'archivage, le partage d'écran et le chat textuel ne sont pas incluses dans les modules d'intégration de chat vidéo.

Pour bénéficier des fonctionnalités avancées d'OpenTok et de la prise en charge des navigateurs mobiles et des applications, vous devrez créer un projet dans votre Video API Account et suivez nos conseils pratiques tutoriels et guides destinés aux développeurs.

Liens rapides :

• Intégrer un chat vidéo
• Intégrer un chat vidéo à votre page Web
• Création de pièces supplémentaires
• Cas d'utilisation pour plusieurs pièces
• Plateformes de sites web prises en charge
• Exemple d'application
• Soutien

Intégrer un chat vidéo

1. Accédez à votre Video API Account et Créer un projet (soit depuis le menu latéral, soit depuis l'aperçu de votre Account.)

2. Sélectionnez l'option Intégrer option de projet.

3. Donnez un nom à votre élément intégré.

   Vous utiliserez ce nom ultérieurement pour retrouver le code d'intégration dans votre compte Video API.

4. Indiquez la largeur et la hauteur de l'élément intégré.

5. Indiquez le nom de domaine du site web sur lequel vous prévoyez d'utiliser l'élément d'intégration.

   Par exemple, si vous comptez ajouter le code d'intégration à votre page web à l'adresse example.com/test, saisissez https://example.com. N'oubliez pas de saisir http:// ou https:// suivi du nom de domaine. (Si vous comptez utiliser « localhost » pour les tests, il vous suffit de saisir http://localhost ou http://localhost:[port number] pour les ports autres que le port 80.)

   Important : Vous devez utiliser une URL https (et non http). Les navigateurs n'autorisent pas l'accès à la caméra sur les pages http. Ils vous permettent toutefois d'utiliser le protocole http pour des tests en local, par exemple : http://localhost ou http://localhost:8080.

6. Si vous comptez utiliser un outil de création de sites tel que Squarespace, Weebly ou WordPress pour héberger votre site, sélectionnez-le dans le Réalisé à l'aide de menu (facultatif).

7. Cliquez sur le bouton Créer un code d'intégration bouton.

Une fois ces étapes terminées, votre code d'intégration sera généré sur la page. Copiez ce code et enregistrez-le afin de pouvoir l'ajouter à votre site web. Vous pouvez récupérer ce code à tout moment en sélectionnant une intégration de chat vidéo existante dans votre Account Vonage Video API, puis en cliquant sur le bouton Copier le code d'intégration bouton situé en haut de la page « Présentation de l'intégration ».

Intégration via iframe ou via script

Vous avez le choix entre utiliser un iframe ou scénario code d'intégration. Voir les deux sections suivantes.

Intégrer un chat vidéo à votre page Web

Ce dont vous aurez besoin :

• Accès au code HTML de votre page Web pour la modifier

• Le code d'intégration unique associé à votre compte Video API (voir Intégrer un chat vidéo).

Ajouter et tester l'intégration sur votre page Web :

1. Une fois le code HTML de votre page Web ouvert dans un éditeur, copiez le code d'intégration depuis votre Account Video API et collez-le dans le corps de votre code HTML. L'emplacement où vous le collez dépend de l'endroit où vous souhaitez qu'il apparaisse, mais il doit se trouver quelque part entre les balises <body> et </body> balises à afficher sur la page.

2. Enregistrez le code HTML et ouvrez-le dans votre navigateur. Vous devriez maintenant voir une boîte contenant un Cliquez ici pour lancer l'appel bouton.

3. Cliquez sur le bouton pour vous connecter à la salle de chat vidéo. Si nécessaire, autorisez l'accès à votre caméra et à votre microphone. Vous devriez désormais voir une image de vous-même dans le navigateur.

4. Pour vérifier que le chat vidéo fonctionne correctement, désactivez le son, puis ouvrez la même URL dans un autre onglet, un autre navigateur ou sur un autre ordinateur, et cliquez pour lancer l'appel. Vous devriez alors voir deux flux vidéo s'afficher dans l'élément intégré.

Création de pièces supplémentaires

Il existe deux types d'intégrations — iframe et scénario (voir ci-dessus (pour en savoir plus à ce sujet). Ces deux types présentent les formats de base suivants :

iframe

<iframe
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT"
  allow="microphone; camera"
></iframe>

scénario

<div
  id="otEmbedContainer"
  style="width:[YOUR EMBED WIDTH];
  height:[YOUR EMBED HEIGHT]"
></div>
<script
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&room=DEFAULT"
></script>

Dans les deux cas, la fin de la src L'URL est un paramètre room=DEFAULT. Ce paramètre définit la « salle » utilisée par l'intégration — si plusieurs utilisateurs accèdent à une intégration avec le même embedId et room paramètres, ils lanceront une session de chat vidéo, au cours de laquelle chaque utilisateur pourra visionner le ou les flux vidéo des autres utilisateurs. Si les salles ne correspondent pas, ils ne rejoindront pas la même salle.

Si vous souhaitez utiliser le même code d'intégration pour créer plusieurs salles distinctes, vous pouvez modifier le paramètre « room » afin de définir une nouvelle salle. Par exemple, vous pourriez créer un code d'intégration avec room=group1 et une autre avec room=group2 — tout utilisateur qui accède à la salle « group1 » pourra voir les flux de tous les autres utilisateurs accédant à la salle « group1 », mais ne pourra pas voir les utilisateurs accédant à la salle « group2 ».

N'oubliez pas que le nombre maximal de participants à une seule chambre c'est trois.

Cas d'utilisation pour plusieurs pièces

Alors que le paramètre de pièce Bien que cette fonctionnalité ne soit pas indispensable pour créer une application de production intégrant des vidéos, il existe plusieurs façons de l'exploiter afin de développer une application vidéo bien plus robuste. Voici quelques exemples d'utilisation :

• Création programmatique de salles — si vous disposez d'une application devant mettre en relation de manière dynamique des personnes dans des salles de chat vidéo privées (par exemple, un médecin et un patient), votre application côté serveur pourrait générer des identifiants de « salle » uniques pour chaque session. Vous pourriez ensuite créer une iframe intégrant le chat vidéo ou un extrait de script en utilisant cet identifiant comme room paramètre — les utilisateurs chargeraient alors l'élément intégré créé dynamiquement dans leur navigateur, rejoignant ainsi la même salle que tous les autres utilisateurs possédant le même identifiant de salle.
• Salles créées par les utilisateurs — vous pourriez permettre aux utilisateurs de proposer un nom de salon via un formulaire sur votre site avant de « créer » un salon de discussion auquel d'autres pourront se joindre. Vous pourriez ensuite transmettre ce nom de salon à un code d'intégration en tant que room paramètre. Les autres utilisateurs pouvaient alors saisir le même nom de salle pour rejoindre la même session de chat vidéo.
• Transmission des identifiants de salle via l'URL d'un site web — si vous souhaitez transmettre le nom d'une salle via une URL (par ex. www.example.com?room=group1), il vous suffirait d'un code côté client pour analyser l'URL et créer un élément d'intégration lorsque l'utilisateur charge la page, en transmettant le ?room paramètre dans l'intégration src URL. Le exemple concret En haut de cette page, vous trouverez un exemple concret de ce cas d'utilisation.

Plateformes de sites web prises en charge

Les modules d'intégration de chat vidéo peuvent actuellement être intégrés à des sites web créés à l'aide de l'une des plateformes suivantes :

• Account WordPress hébergé (payant)
• Squarespace
• Zoho Sites

Les plateformes suivantes sont actuellement pas compatible avec les intégrations :

• Account WordPress gratuit
• Weebly
• Wix

Par ailleurs, l'intégration ne fonctionnera pas correctement avec les éditeurs de code en ligne suivants :

• Codepen.io
• JSFiddle
• JSBin

Exemple d'application

Cette application web d'exemple vous explique comment créer des salles de chat vidéo dynamiques à intégrer dans un processus de prise de rendez-vous en tête-à-tête à l'aide de Node.js. Cette solution peut être utilisée pour des relations médecin-patient, élève-enseignant ou toute autre application Web de prise de rendez-vous en tête-à-tête.

Soutien

Si vous rencontrez des difficultés pour intégrer le code d'intégration et que vous ne trouvez pas la réponse sur cette page, vous pouvez contactez notre équipe d'assistance.