Kit pour l'hackathon de la Video API Vonage

Guide de démarrage rapide pour intégrer les fonctionnalités de la Video API de Vonage à votre application développée lors du hackathon

TokBox organise un hackathon virtuel du 1er août au 18 septembre. Rejoignez le Groupe Slack HackTokBox et passer à la #arlivevideo Un canal Slack pour commencer.

Liens rapides

Qu'est-ce qu'OpenTok ?

La plateforme OpenTok, développée par Vonage, permet d'intégrer facilement des fonctionnalités interactives en temps réel de haute qualité (vidéo, voix, messagerie et partage d'écran) dans les applications web et mobiles.

La plateforme comprend des bibliothèques côté client pour le Web, iOS, Android, Windows et Linux, ainsi que des SDK côté serveur et une API REST.

Comment utiliser OpenTok ?

Outre l'intégration de fonctionnalités de chat audio/vidéo en temps réel dans les applications web et mobiles, la plateforme OpenTok offre un large éventail de fonctionnalités permettant de développer des cas d'utilisation innovants dans pratiquement tous les secteurs d'activité.

Voici quelques exemples illustrant comment des entreprises du monde entier utilisent OpenTok :

  • Application sociale populaire Houseparty utilise OpenTok pour créer des salles de vidéo en direct où les utilisateurs peuvent « se détendre » entre amis depuis leur appareil mobile
  • Minerva a créé salles de classe virtuelles où jusqu'à 18 élèves peuvent interagir avec leur professeur en temps réel
  • Babylon Health permet d'organiser facilement des consultations vidéo en temps réel avec des médecins, des thérapeutes et des spécialistes, directement depuis votre téléphone
  • Roll20 a développé un table virtuelle avec des fonctionnalités de chat vidéo et vocal pour les utilisateurs jouant ensemble en ligne
  • Esurance a ajouté évaluation vidéo à leur application, permettant ainsi aux clients de parler à un conseiller et de lui montrer en direct une vidéo des dégâts subis après un accident
  • Be My Eyes met en relation des personnes aveugles et malvoyantes avec des accompagnateurs voyants du monde entier grâce à la vidéo en direct
  • Double Robotics a mis au point des robots de téléprésence qui utilisent la vidéo en temps réel pour offrir aux utilisateurs une présence physique dans un bureau ou tout autre lieu distant
  • Pour découvrir d'autres exemples d'utilisation d'OpenTok, consultez notre Témoignages de clients page.

Voici quelques idées de projets que vous pourriez réaliser pendant votre hackathon :

  • Une application de speed dating par vidéo où les utilisateurs enchaînent les conversations vidéo avec leurs partenaires potentiels
  • Un jeu de société comme les charades ou « Cards Against Humanity », joué par visioconférence
  • Une application dédiée aux technologies au service de la démocratie : réunion publique virtuelle, organisation de manifestations, collecte de fonds
  • Une application de réalité virtuelle intégrant une fonctionnalité de chat vidéo
  • Associez OpenTok à Clarifai pour intégrer la reconnaissance d'images à une application de visioconférence
  • Utilisez OpenTok’s Diffusion HLS et RTMP fonctionnalité permettant de diffuser des flux sur Livestream et/ou JWPlayer, ou vers un serveur RTMP

Démonstration

Pour découvrir OpenTok en action, vous pouvez visionner notre démonstration de visioconférence ci-dessous :

  1. Aller à opentokdemo.tokbox.com ou téléchargez l'application OpenTokApp sur l'App Store
  2. Créer une pièce
  3. Partagez l'URL de la salle (ou son nom) avec un ami, ou ouvrez-la simplement dans un nouvel onglet pour démarrer un chat vidéo

Concepts clés

Sessions et jetons

Chaque conversation vidéo OpenTok se déroule au sein d'un session. On peut considérer une session comme un « salon de discussion » où les clients (navigateur ou application mobile) peuvent publier et s'abonner aux messages les uns des autres cours d'eau. Les sessions sont hébergées sur le cloud OpenTok, et chaque session est associée à un identifiant unique ID de la session. Pour permettre à plusieurs clients de discuter entre eux, il suffit de les faire se connecter au même identifiant de session.

A jeton Il s'agit de votre « clé » d'accès à la session, générée pour un identifiant de session spécifique. Chaque utilisateur doit disposer de son propre jeton pour se connecter à la session. Ces jetons expirent au bout d'un certain délai (défini par le développeur), contrairement à la session elle-même.

Les identifiants de session et les jetons sont généralement créés à l'aide de la côté serveur composant d'une application OpenTok, mais si vous ne faites que créer une démo ou une preuve de concept, vous pouvez les générer dans votre Account - il suffit d'aller sur la page « Aperçu du projet » et de faire défiler vers le bas jusqu'à Outils de projet.

Connexions, éditeurs et abonnés

Une fois qu'un client dispose d'un identifiant de session et d'un jeton, il peut établir une connexion à la session à l'aide du code fourni par les SDK côté client (voir ci-dessous). Cette connexion déclenche un événement vers la session et vers tous les clients déjà connectés. Une fois connecté, le client peut publier un flux audio/vidéo provenant de sa caméra et de son microphone

Lorsqu'un client publie un flux, des événements sont envoyés à tous les clients connectés à la session. À la réception de l'événement, les clients peuvent souscrire vers le flux récemment publié.

Pour plus d'informations sur les sessions, les jetons, les flux et bien plus encore, consultez notre Page « Notions de base sur la Video API ».

Obtenez votre clé API

  1. Obtenez votre clé API en créant un compte gratuit ici. N'oublie pas d'utiliser ton code promo pour le hackathon lors de ton inscription.
  2. Une fois connecté à votre compte, Créer un nouveau projet. Lors du développement de votre application, vous utiliserez le Présentation du projet pour générer des identifiants de session et des jetons (plus d'informations à ce sujet ci-dessous).

Configuration d'un client (avec des applications d'exemple)

Le volet client d'une application OpenTok fournit la plupart des fonctionnalités de celle-ci. Le client utilise l'identifiant de session et le jeton (voir ci-dessus) pour connecter l'utilisateur à une session depuis un navigateur Web ou une application mobile.

Chat vidéo de base

Pour découvrir comment mettre en place le code côté client le plus simple sur le Web, consultez notre Bonjour tout le monde. Pour le développement mobile, vous pouvez cloner ou télécharger nos exemples d'applications côté client pour iOS Swift, iOS Objective-C et Android sur GitHub.

Exemples d'applications Accelerator + bonus

Pour mettre en place assez rapidement une interface client un peu plus aboutie, dotée de quelques fonctionnalités avancées, vous pouvez utiliser nos exemples d'applications Accelerator pour Web, iOSet Android sur GitHub.

Ces exemples d'applications intègrent des fonctionnalités de base de chat audio/vidéo, ainsi que des commandes utilisateur, un chat textuel intégré et du code de démarrage permettant de configurer le partage d'écran et l'archivage. Pour plus d'informations sur la configuration et les fonctionnalités avancées de ces exemples d'applications, consultez leurs fichiers README sur GitHub. Vous pouvez personnaliser l'interface utilisateur de ces exemples à votre guise à l'aide de CSS.

Autres échantillons mobiles

Si vous souhaitez mettre en place un chat à plusieurs participants, des pilotes audio/vidéo personnalisés ou d'autres cas d'utilisation spécifiques sur mobile, nous proposons plusieurs autres exemples d'applications pour Android, iOS Swiftet iOS Objective-C

Plus d'informations

Pour plus d'informations sur la configuration du code côté client de votre application OpenTok, consultez notre Guides du développeur.

Configuration d'un serveur (facultatif)

Le composant côté serveur d'une application OpenTok sert à générer des identifiants de session et des jetons pour les utilisateurs de l'application. Si vous ne faites que créer une démo ou une preuve de concept, vous n'aurez peut-être pas besoin d'un composant côté serveur : vous pouvez générer des identifiants de session et des jetons depuis la page « Aperçu du projet » de votre projet dans votre Video API Account (il suffit d'ouvrir ou de créer un projet, puis de faire défiler la page jusqu'à la section « `Outils du projet` »).

Si vous souhaitez mettre en place un composant côté serveur, voici quelques exemples d'applications de démarrage rapide pour chaque langage pris en charge par le SDK côté serveur :
PHP Java .NET Nœud Rubis Python

Pour plus d'informations sur la configuration du code côté serveur, consultez notre Guides du développeur.

Réalité augmentée et vidéo en direct

Pour vous familiariser avec la réalité augmentée et la vidéo en direct, découvrez les exemples ci-dessous :
ARKit
Métadonnées des images ARKit

Fonctionnalités avancées

Outre le chat vidéo de base, OpenTok permet d'accéder à toute une gamme de fonctionnalités plus avancées. Notre Exemples d'applications Accelerator Le code ci-dessus inclut certaines de ces fonctionnalités (partage d'écran, archivage et chat textuel), mais voici quelques guides utiles contenant des informations supplémentaires sur la configuration des fonctionnalités avancées :

Partage d'écran :
Les Exemples d'applications Accelerator Ce qui précède comprend le code de base pour la fonctionnalité de partage d'écran, mais nous vous invitons également à consulter nos guides sur le partage d'écran pour Web, iOSet Android. En général, pour partager son écran sur Internet, il faut Créer une extension de navigateur personnalisée, mais si vous utilisez uniquement « localhost » pour présenter votre application, vous pouvez utiliser cette extension toute prête.

Autres guides sur les fonctionnalités avancées :
Archivage - Tutoriel Guide
Chat textuel
Radiodiffusion
Interconnexion SIP (permet de relier les sessions OpenTok aux appels SIP et à la téléphonie)

Pour en savoir plus sur la mise en œuvre de ces fonctionnalités et d'autres encore, consultez notre Guides du développeur. Vous pouvez également consulter notre Documentation de référence de l'API pour plus d'informations sur les méthodes et les appels spécifiques.

Conseils et astuces

  • Un serveur web local est le meilleur moyen de présenter rapidement votre application web. Si vous n'en disposez pas, voici quelques services couramment utilisés : XAMPP et MAMP. Vous pouvez également utiliser SimpleHttpServer en Python, un serveur web PHP ou une application Node.js.
  • Si vous souhaitez vous connecter à votre localhost depuis plusieurs appareils (par exemple, un ordinateur portable et un smartphone), ngrok peut être configuré en quelques minutes pour vous permettre d'accéder à votre localhost via une URL publique sécurisée.
  • Vous pouvez consulter la liste des navigateurs pris en charge par OpenTok ici
  • Chrome n'autorise les communications WebRTC que via HTTPS

Obtenir de l'aide

Si vous avez une question ou besoin d'aide pour développer votre application, voici plusieurs moyens de nous contacter pour obtenir une réponse rapide :

  • Si vous participez à un événement Vonage, n'hésitez pas à vous adresser à notre équipe technique présente sur place.
  • Contactez nous