Video Express est là et pourquoi il est génial !

Explication expresse

Forte d'une décennie d'expertise en matière de développement vidéo, Vonage a créé une API simple de haut niveau appelée Video Express afin d'accélérer le développement et l'intégration de la vidéo multipartite dans les applications Web.

Multipartite ?

Commençons par définir ce qu'est le multipartisme. Il s'agit d'un appel vidéo auquel participent plusieurs personnes qui publient leurs flux audio et vidéo tout en s'abonnant aux flux de tous les autres participants.

Auparavant, il était assez courant d'avoir des équipes de personnes dans la même pièce, puis de passer un appel vidéo avec une équipe dans une autre pièce.

2 teams 2 streams

Comme vous l'avez peut-être constaté vous-même ces derniers temps, les choses évoluent vers des personnes qui appellent de différents endroits.

6 people 36 streams

Comme vous pouvez le voir sur l'image ci-dessus, il peut rapidement devenir complexe de suivre toutes les connexions des participants.

C'est ici que Video Express intervient. Vous êtes peut-être novice en matière de développement d'applications intégrant la vidéo ou un développeur chevronné qui souhaite se consacrer à d'autres tâches. Video Express permet d'éliminer la complexité et optimise en outre la qualité, l'utilisation de l'unité centrale et la mise en page ! C'est pour cela qu'il est génial !

Voici Video Express utilisé dans un projet JavaScript projet JavaScript vanille que vous pouvez visualiser. Il y a un bouton de déploiement rapide, il vous suffit donc d'entrer votre clé API et votre secret dans le fichier .env et vous aurez votre propre exemple de travail. Il s'agit d'une mise en œuvre dépouillée pour mettre en valeur Video Express.

Supprimer la complexité

Voir la comparaison ci-dessous du code de démarrage nécessaire pour créer un chat vidéo.

Vonage Video API JavaScript Client SDK

const session = OT.initSession(this.apiKey, this.roomId); // Init session
session.on('sessionConnected', ...); // Handle session connected events
session.on('sessionDisconnected', ...); // Handle session end
session.on('streamCreated', ...); // Subscribe to newly published streams
session.on('streamDestroyed', ...); // Clean up on stream end
session.on('connectionCreated', ...); // Handle connection events (join)
session.on('connectionDestroyed', ...); // Handle disconnect events (leave)

// Build your own UI / Layout
// Active Speaker Detection
// Video / Audio Optimizations
const pub = OT.initPublisher(targetElement, options, (err) => console.error(err)); // Create a publisher
session.publish(pub, undefined, err => { // Try to publish media
 if (err) {
   reject(err);
 } else {
   resolve();
 }
});

Vonage Video Express

const room = new VideoExpress.Room({ apiKey, sessionId, token, roomContainer: 'roomContainer’ });

room.join();

Video Express se charge de la publication et de l'abonnement de tous les participants à l'appel vidéo. Il suffit de lui indiquer l'identifiant de l'élément HTML (dans cet exemple, "roomContainer") dans lequel placer la "salle", de le joindre et c'est tout. Lisez notre documentation pour en savoir plus sur ce que vous pouvez faire.

Responsable qualité

Quality Manager diagram

Pour créer un appel vidéo de la meilleure qualité possible, Video Express applique automatiquement diverses méthodes. Il s'agit notamment de maximiser la taille des tuiles pour les flux vidéo visibles et de mettre en pause ceux qui ne peuvent pas être vus. Il ajuste également la résolution et la fréquence d'images en fonction des conditions du réseau et de l'unité centrale. En définissant dynamiquement des priorités plus élevées pour les haut-parleurs et les partages d'écran, les éléments qui nécessitent le plus d'attention peuvent bénéficier de la meilleure qualité.

Gestionnaire de l'expérience

Pour que l'expérience utilisateur soit optimale, Video Express optimisera les choses du côté client. Par exemple, tous les participants après 10 heures sont automatiquement mis en sourdine pour éviter les salles très bruyantes. Lorsque la taille d'une vidéo affichée diminue, un flux plus petit est demandé afin de réduire la bande passante nécessaire à une lecture fluide.

Exemple d'une session vidéo brute, non optimisée

Table with data of an unoptimized multiparty video session

Exemple de session vidéo optimisée

Table with data of an optimized multiparty video session

Responsable de la mise en page

Layout Manager diagram

Video Express ajuste automatiquement la disposition des flux en fonction de la taille de l'écran et du nombre de participants. Les partages d'écran et l'orateur actif ont une priorité plus élevée ou occupent plus d'espace.

Aperçu de l'éditeur

Video Express permet également à l'utilisateur de prévisualiser sa vidéo et son audio avant de rejoindre la salle. Voici un exemple de code :

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia({
  targetElement: 'previewContainer',
  publisherProperties: {
    resolution: '1280x720',
    audioBitrate: 15,
  },
});

Partage d'écran

La dernière caractéristique de Video Express que je souhaite souligner est la façon dont le partage d'écran est géré.

const startScreensharing = () => {
  room.startScreensharing("myScreenshare");
}

const stopScreensharing = () => {
  room.stopScreensharing();
}

screenshareStartBtn.addEventListener("click", startScreensharing, false);

screenshareStopBtn.addEventListener("click", stopScreensharing, false);

Voilà, c'est fait ! Avec ces quelques lignes de code, vous pouvez partager votre écran et Video Express reconfigurera l'agencement de la pièce pour en faire la priorité.

Eh bien...

Prêt à construire quelque chose d'extraordinaire !

Jetez un coup d'œil à la documentation de documentation Video Express pour plus de détails.

Jouez avec le projet de base.

Montrez-nous ce sur quoi vous travaillez et faites-nous part de vos commentaires dans notre canal Slack de la communauté.