OpenTok.js

La bibliothèque OpenTok.js vous permet d'utiliser des sessions vidéo basées sur la Video API Vonage sur le Web.

Toutes les Applications qui utilisent l'API Video de Vonage sont composées de deux parties :

  • Le côté client, qui utilise la fonction SDK clients OpenTok et s'exécute dans le navigateur ou l'application mobile de l'utilisateur
  • Le côté serveur, qui utilise la fonction SDK pour serveurs OpenTok et s'exécute sur votre serveur pour transmettre les informations d'authentification au client

Le Client SDK pour la création d'applications basées sur le Web qui utilisent l'API Video de Vonage est le suivant OpenTok.js. Cette bibliothèque JavaScript fournit la plupart des fonctionnalités de base de votre application, y compris :

  • Connexion à une session
  • Publication de flux dans une session
  • S'abonner à des flux dans une session

Des SDK client sont également disponibles pour iOS et Android. Tous les SDK clients OpenTok peuvent interagir entre eux. Pour en savoir plus sur les principes de base des clients, serveurs et sessions OpenTok, ainsi que sur d’autres sujets, consultez notre Les bases de Video API page.

Remarques importantes

  • Chrome M136 sous Windows – problème de détection du périphérique audio. Nous avons constaté un problème avec Chrome M136 sous Windows : le navigateur peut parfois répondre lentement ou ne pas fonctionner correctement lors de la récupération des informations relatives aux périphériques audio. Il s'agit d'un problème connu qui a été résolu dans la version 137.0.7150.0 de Chrome ; le correctif a également été intégré à un prochain correctif de Chrome 136 dont la publication est prévue prochainement. En attendant, si vous rencontrez ce problème, nous vous recommandons soit de revenir à la version 135 de Chrome et de la fixer, soit d'utiliser un autre navigateur. N'hésitez pas à contacter le service d'assistance si vous avez besoin d'aide pour mettre en œuvre une solution de contournement.
  • Problèmes corrigés dans Safari 15.4 et 15.5. Les versions 15.4 et 15.5 de Safari (livrées avec iOS 15.4 et 15.5 et macOS 12.3 et 12.4) corrigent les problèmes suivants, qui pourraient affecter les applications utilisant OpenTok.js (dans Safari) :
    • Problèmes audio lors de l'utilisation de certains modèles de casques Bluetooth. Sur certains modèles d'oreillettes Bluetooth, le son peut s'interrompre. Il s'agit d'une Bogue de WebKit est corrigé dans Safari 15.4.
    • Problèmes d'écho lors du changement de microphone dans macOS Safari. Le changement du microphone utilisé par un éditeur pouvait entraîner un écho de l'audio de l'éditeur. L'écho n'apparaissait pas du côté de l'abonné. Cette situation est due au fait que l'abonné n'a pas d'écho. Bogue de WebKit est corrigé dans Safari 15.5.
    • Bug critique publiant de la vidéo H.264 dans les sessions routées dans iOS 15.1. Dans iOS 15.1, la publication de vidéos H.264 dans les sessions routées échouait. Ce problème a été résolu par la mise en place d'un système de gestion de la vidéo. Bogue de WebKit Ce problème a été corrigé dans Safari 15.4.
    • Volume sonore faible dans Safari sous iOS. Le présent Bogue de WebKit est corrigé dans Safari 15.4.
  • Cryptage de bout en bout — Dans OpenTok.js 2.27.0, le chiffrement de bout en bout ne fonctionnera pas avec les clients utilisant une version antérieure d'OpenTok.js. Lorsque vous mettez à jour votre application pour utiliser OpenTok.js 2.27.0 ou une version ultérieure, assurez-vous que tous les clients utilisent OpenTok.js 2.27.0 ou une version ultérieure si l'application utilise le chiffrement de bout en bout.

Interopérabilité

La version actuelle de la bibliothèque OpenTok.js (2.35.1) est compatible avec les applications OpenTok développées à l'aide des SDK client OpenTok version 2.33 ou supérieure :

  • OpenTok.js
  • SDK OpenTok pour Android
  • SDK OpenTok pour iOS
  • SDK OpenTok pour Windows
  • SDK OpenTok pour macOS
  • SDK OpenTok pour Linux
  • OpenTok React Native SDK

Installation

Pour charger OpenTok.js dans votre page web, ajoutez la balise script suivante :

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

Installation via les paquets GitHub

Outre l'installation à partir du registre npm, les paquets du Client SDK sont également disponibles via Registre NPM des paquets GitHub. Il s'agit d'un canal de distribution alternatif pour les environnements d'entreprise qui nécessitent une gestion des paquets basée sur GitHub.

Packages disponibles

Le paquet suivant est publié sur GitHub Packages :

Instructions d'installation

Pour installer des paquets à partir du registre NPM de GitHub Packages, vous devez configurer npm pour qu'il s'authentifie auprès de GitHub :

1. Créer un jeton d'accès personnel GitHub (PAT)

Générer un jeton d'accès personnel avec read:packages dans les paramètres de votre compte GitHub.

2. Configurez votre .npmrc fichier

Ajoutez la configuration suivante au fichier .npmrc ou votre fichier ~/.npmrc fichier :

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@vonage:registry=https://npm.pkg.github.com

Remplacer YOUR_GITHUB_TOKEN avec votre jeton d'accès personnel GitHub.

3. Installer le paquet

Une fois configuré, vous pouvez installer le paquet à l'aide de la commande standard npm install :

npm install @opentok/client

Note sur la disponibilité des paquets

Le registre traditionnel de npm et le registre des paquets de GitHub sont synchronisés. Vous pouvez choisir l'une ou l'autre méthode de distribution en fonction des préférences de votre organisation en matière de gestion des paquets. La méthode d'installation traditionnelle de npm (via npm install @opentok/client à partir du registre par défaut) reste entièrement pris en charge et ne nécessite aucune configuration supplémentaire.

Pour plus d'informations sur l'utilisation du registre NPM de GitHub Packages, voir la section Documentation sur les paquets GitHub.

Configuration requise

Pour une diffusion vidéo fiable dans les navigateurs modernes, assurez-vous que votre appareil répond aux spécifications recommandées :

  • PROCESSEUR : Un processeur récent à deux cœurs ; un processeur à quatre cœurs (par exemple, Intel Core i5 / Ryzen 5) ou mieux pour le 1080p ou le multitâche lourd.
  • GPU : Graphiques intégrés modernes (Intel UHD/Iris Xe ou AMD Radeon ou Nvidia Graphics) pour 1080p ; la prise en charge du décodage matériel pour le codage vidéo est fortement recommandée.
  • MÉMOIRE VIVE : Au moins 8 Go pour le streaming quotidien ; 16 Go recommandés si vous gardez de nombreux onglets ou applications ouverts.
  • Stockage : SSD de préférence pour un chargement rapide et une bonne réactivité du système.
  • Réseau : Connectivité internet fiable ; fonctionne sur Wi-Fi, Ethernet ou cellulaire.
  • Autre : L'accélération matérielle doit être activée dans le navigateur pour des performances optimales.

Ces recommandations garantissent une lecture stable, une utilisation réduite de l'unité centrale et des performances fluides lors de la diffusion de vidéos.

Apprendre à construire

La meilleure façon d'apprendre à utiliser la bibliothèque OpenTok.js est de suivre notre tutoriel « Chat vidéo de base » pour le Web :

Consulter le tutoriel

Une fois que vous maîtriserez les bases du développement avec OpenTok.js, vous pourrez obtenir des informations plus détaillées et découvrir comment personnaliser votre application grâce à notre Guides du développeur. Pour en savoir plus sur certaines classes et méthodes de l'API, vous pouvez consulter la Référence OpenTok.js.

Support des navigateurs

La bibliothèque OpenTok.js est actuellement prise en charge dans :

  • Google Chrome (dernière version)
  • Google Chrome pour Android (dernière version)
  • Google Chrome pour iOS (dernière version)
  • Firefox (dernière version)
  • Firefox pour Android (dernière version)
  • Prise en charge de la version bêta de Firefox pour iOS (dernière version)
  • Microsoft Edge versions 79+ pour Windows et macOS (versions de Edge basées sur Chromium)
  • Safari sur macOS et iOS (dernière version disponible). Pour plus d'informations sur l'interopérabilité vidéo et d'autres sujets, consultez la Prise en charge du navigateur Safari page.
  • Opera (dernière version de la version de bureau uniquement)
  • Electron (dernière version)
  • Samsung Internet (dernière version)
  • WebView (android.webkit.WebView) Niveau d'API Android 36 ou supérieur
  • WebView (wkwebview) iOS 18.6 ou version ultérieure

Important : La version 2.16 d'OpenTok.js était la dernière à prendre en charge le plugin OpenTok pour Internet Explorer. La version 2.16 d'OpenTok.js a été dépréciée en mai 2020 pour l'environnement Standard et en juin 2020 pour l'environnement Enterprise.

Prise en charge d'Async/Await et des Promise

À partir de la version 2.35.1, le SDK JS prend en charge les technologies modernes async/await et des modèles basés sur les promesses, parallèlement à l'API existante basée sur les callbacks. Cette modification est entièrement rétrocompatible : tout le code existant basé sur les callbacks continue de fonctionner sans modification.

Remarque : Dans le cadre de ces travaux, le SDK a permis d'affiner la gestion des erreurs dans ses flux internes et affiche désormais les informations relatives aux erreurs avec plus de précision. À partir de la version 2.35.1, certaines fonctions signalent des erreurs qui passaient auparavant inaperçues. Il ne s'agit pas de nouvelles défaillances, mais d'erreurs préexistantes qui sont désormais correctement propagées ; vous pourrez donc constater l'apparition d'erreurs dans des cas qui passaient auparavant inaperçus.

Deux modèles sont disponibles selon la méthode choisie :

Les méthodes qui renvoyaient auparavant void (par exemple session.signal(), OT.getDevices() et d'autres) acceptent désormais un callback facultatif et renvoient également un Promise. Consultez la liste complète sous les extraits de code :

// Callback style (still works)
session.signal({ data: 'hello' }, function(error) {
  if (error) { console.error(error); }
  else { console.log('Signal sent'); }
});

// Promise / async-await style (new in 2.35.1)
try {
  await session.signal({ data: 'hello' });
  console.log('Signal sent');
} catch (error) {
  console.error(error);
}

Méthodes qui renvoyaient auparavant un objet (par exemple OT.initPublisher(), session.publish()et session.subscribe()) dévoilent un nouveau .promise() fonction de la méthode elle-même. Consultez la liste complète sous les extraits de code :

// Callback style (still works)
const publisher = OT.initPublisher(targetElement, properties, function(error) {
  if (error) { console.error(error); }
});

// Promise / async-await style (new in 2.35.1)
try {
  const publisher = await OT.initPublisher.promise(targetElement, properties);
} catch (error) {
  console.error(error);
}

Méthodes mises à jour

Les méthodes suivantes ont été mises à jour pour prendre en charge les « promises » :

Les fonctions qui renvoyaient auparavant void — le paramètre de rappel est désormais facultatif et la fonction renvoie également un Promise:

Méthode Retours
OT.checkScreenSharingCapability Promise<void>
OT.getDevices Promise<Device[]>
OT.reportIssue Promise<void>
publisher.getStats Promise<void>
publisher.publishCaptions Promise<void>
session.disconnect Promise<void>
session.forceDisconnect Promise<void>
session.forceUnpublish Promise<void>
session.signal Promise<void>
subscriber.getStats Promise<void>
subscriber.setPreferredFrameRate Promise<void>
subscriber.setPreferredResolution Promise<void>

Fonctions qui renvoyaient auparavant un objet — un nouveau .promise() La fonction est exposée au niveau de la méthode elle-même :

Méthode Retours
OT.initPublisher .promise() retours Promise<Publisher>
publisher.destroy .promise() retours Promise<void>
publisher.publishAudio .promise() retours Promise<void>
publisher.publishVideo .promise() retours Promise<void>
session.connect .promise() retours Promise<Session>
session.publish .promise() retours Promise<Publisher>
session.subscribe .promise() retours Promise<Subscriber>
subscriber.setAudioVolume .promise() retours Promise<void>
subscriber.restrictFrameRate .promise() retours Promise<void>
subscriber.subscribeToAudio .promise() retours Promise<void>
subscriber.subscribeToVideo .promise() retours Promise<void>

Les définitions TypeScript ont été mises à jour afin de refléter toutes les nouvelles signatures.

Remarque : Pour un guide complet sur la migration de votre code existant basé sur les callbacks vers les promesses, consultez le Guide de transition des callbacks du SDK JS vers les Promises.

Numéros de version

Vous pouvez inclure la bibliothèque OpenTok.js dans votre page web à l'aide d'une balise <script> étiquette :

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

Le numéro de version d'OpenTok.js se compose de trois parties :

  • Le numéro de version majeure - Ce numéro (le premier) est incrémenté lorsqu'une nouvelle version inclut une modification de l'API qui n'est pas rétrocompatible.
  • Le numéro de version mineure - Ce numéro (le deuxième) est incrémenté lorsqu'une nouvelle version ajoute de nouvelles fonctionnalités.
  • Le numéro de patch - Ce numéro (le troisième) est incrémenté lorsqu'il existe une nouvelle version qui corrige des bogues ou améliore les performances sans ajouter de nouvelles fonctionnalités.

Par exemple, v2.4.0 est la version majeure 2, la version mineure 4 (de la version majeure 2) et la révision 0 (de v2.4). Au fur et à mesure que les versions de révision sont publiées, les modifications sont incluses dans la révision mineure racine. Par exemple, lorsque la version 2.2.3 est publiée, ses modifications sont incluses dans la version 2.2.

Pour faire référence à une révision spécifique, vous pouvez inclure le numéro de version complet (tel que "v2.4.0") dans le champ src attribut. Nous vous recommandons toutefois de n'indiquer que le numéro de version majeur. Vonage prend officiellement en charge la version actuelle de la bibliothèque. Si vous utilisez une version plus ancienne, nous vous invitons à effectuer une mise à jour afin de bénéficier des derniers correctifs et des dernières fonctionnalités de la plateforme OpenTok.

Important : Utilisez toujours les bibliothèques que nous fournissons sans les modifier. Vous êtes ainsi assuré d'utiliser le code le plus récent et le plus testé. L'API Video de Vonage ne prend pas en charge l'utilisation de bibliothèques modifiées.

Pour plus d'informations sur les versions spécifiques d'OpenTok.js, consultez le site d'OpenTok notes de mise à jour. Pour savoir quand de nouvelles versions d'OpenTok.js sont disponibles, rendez-vous sur la page Video API - Nouvelles versions page, puis cliquez sur le Suivre bouton.

Échantillons de code

Pour obtenir un exemple de code, visitez notre site dépôt « video-api-web-samples » sur GitHub.

Documentation et informations complémentaires

Voir le Référence de l'API OpenTok.js et le Guides du développeur OpenTok.

Pour une liste des nouvelles fonctionnalités et des problèmes connus, voir la page notes de mise à jour.