Guide du développeur Video Express

Ce guide du développeur fournit des informations détaillées sur l'utilisation de Video Express.

À propos de Video Express

Vonage Video Express est une bibliothèque JavaScript qui permet de créer rapidement une application web de vidéoconférence multipartite. multipartite. Elle s'appuie sur OpenTok.js, l'API Video de Vonage pour les applications web. pour les applications web.

Mise en place d'un Video Express chambresur la base d'une session Video API, pour permettre à plusieurs clients basés sur le web de se rencontrer.

Video Express comprend les éléments suivants :

A responsable de la mise en pagequi gère la disposition des éléments vidéo dans la page HTML
Un gestionnaire de qualité qui optimise en permanence la résolution du flux et la fréquence d'images, réduisant ainsi l'utilisation de la bande passante par le client.
Un gestionnaire d'expérience qui définit dynamiquement la priorité des orateurs et qui met automatiquement en sourdine les personnes qui se joignent à la réunion lors de réunions plus importantes. pour les réunions plus importantes (voir Détection active du haut-parleur).
Un gestionnaire de salle, qui gère l'interaction de bas niveau avec WebRTC et fournit des primitives de plus haut niveau qui sont plus faciles à construire. primitives de plus haut niveau qui sont plus faciles à construire.

Chargement de la bibliothèque Video Express

Video Express est disponible en tant que module Node à l'adresse suivante npmjs.com:

npm i --save @vonage/video-express

Vous pouvez également charger la bibliothèque Video Express à l'aide d'un fichier script d'une page HTML :

<script src="https://static.opentok.com/v1/js/video-express.js"></script>

Actuellement, Vonage Video Express n'inclut pas d'interface utilisateur par défaut. Vous devrez donc ajouter des feuilles de style CSS pour styliser les composants de la salle dans votre application :

Pour commencer rapidement, copiez le fichier video-express-styles.css et l'inclure dans le fichier head de la page page à l'aide de Video Express :

Rejoindre une salle et publier un flux de données

Appeler le Room pour rejoindre une salle d'express vidéo

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
});

Les apiKey, sessionIdet token sont l'identifiant d'application de votre application vidéo, un identifiant de session pour la salle et un jeton. Le jeton doit inclure un rôle "éditeur". Vous obtenez l'ID de l'application sur votre tableau de bord client Vonage sous "Construire et gérer", puis "Applications".. Créer des identifiants de session et des à l'aide de la fonction SDK serveur.

La procédure suivante instancie une instance de salle (avec tous les paramètres)

const room = new VideoExpress.Room({
  apiKey:'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
    cameraPublisherContainer: "cameraPublisherContainerDiv",
    screenPublisherContainer: "screenPublisherContainerDiv",
  }
});

L'exemple suivant instancie une instance Room mais exclut la caméra et l'éditeur de partage d'écran des conteneurs :

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
  }
});

Lorsque le client rejoint la salle, l'objet Room envoie une commande connected événement :

room.on('connected', () => {
  console.log('Connected');
  // Can use this event to update visual indicator for connection status
});

Voir Evénements pour plus d'informations sur le modèle d'événement Video Express.

Lorsqu'il rejoint une salle, Video Express crée un éditeur de caméra pour le client. Celui-ci envoie la vidéo du client aux autres participants de la salle. L'utilisateur est invité à autoriser l'accès à la caméra et au microphone. Si l'utilisateur refuse l'accès à la caméra et au microphone, le client est déconnecté de la salle. puisque vous n'êtes pas autorisé à rejoindre une salle sans publier un flux de caméra.

Important : Vonage Video Express 1.0 prend actuellement en charge 25 participants simultanés dans une salle. dans une salle. Si vous ajoutez plus de 25 personnes à une session, vous devrez vous assurer que les performances du réseau et du matériel des participants sont suffisantes. que la performance du réseau et du matériel des participants est suffisante.

Quitter une pièce

Pour quitter la salle, fermez la fenêtre du navigateur ou appelez le leave() de l'objet de l'objet Room :

room.leave();

Détection du moment où le client local quitte la salle

L'objet Room envoie un disconnected lorsque le client quitte la pièce quitte la pièce :

room.on('disconnected', (reason) => {
  console.log('disconnected reason: ', reason);
  // Can use this event to update visual indicator for connection status
});

L'événement émet reason chaîne de caractères identifiant la raison pour laquelle le client s'est déconnecté.

L'objet Room distribue reconnecting et reconnected événements si le client perd sa connexion à la salle et se reconnecte :

// You can use these event to update a UI indicator for connection status
room.on('reconnecting', () => {
  console.log('Temporarily disconnected.');
});

room.on('reconnected', () => {
  console.log('Reconnected.');
});

Détection de l'arrivée et du départ d'autres clients dans la salle

L'objet Room envoie un participantJoined lorsqu'un autre participant (qui n'est pas l'utilisateur local) rejoint la salle l'utilisateur local) rejoint la salle :

room.on('participantJoined', (participant) => {
  console.log('participant joined: ', participant.name);
});

L'événement émet un objet Participant identifiant le participant qui s'est joint à l'événement. Voir la documentation de référence.

L'objet Room envoie un participantLeft lorsqu'un participant (autre que l'utilisateur local) quitte la salle l'utilisateur local) quitte la salle :

room.on('participantLeft', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

L'événement émet un objet Participant identifiant le participant qui est parti et un objet reason chaîne de caractères indiquant la raison du départ du client. Voir aussi la documentation de référence.

Détection de la publication de flux de caméras par d'autres clients

Lorsque d'autres utilisateurs publient des flux de caméras, le gestionnaire de mise en page de Video Express ajoute automatiquement la vidéo à la page HTML. automatiquement la vidéo à la page HTML.

Un objet participant envoie un cameraCreated lorsqu'un participant (qui n'est pas l'utilisateur local) publie un flux de l'utilisateur local) publie un flux vidéo :

participant.on('cameraCreated', (cameraSubscriber) => {
  console.log('new camera stream for ', participant.name);
});

L'événement émet un Abonné à la caméra de l'objet CameraSubscriber. L'objet CameraSubscriber comprend des méthodes permettant d'activer et de désactiver la lecture audio et vidéo dans le client local (voir Activation et désactivation des fonctions audio et vidéo d'un abonné à une caméra).

Un objet participant envoie un cameraDestroyed lorsqu'un participant (qui n'est pas l'utilisateur local) cesse de publier un flux de données de la caméra. l'utilisateur local) cesse de publier un flux de données :

participant.on('cameraDestroyed', () => {
  console.log('camera destroyed for ', participant.name);
});

Interface utilisateur et mise en page

Video Express comprend un gestionnaire de mise en page qui organise automatiquement les éléments vidéo dans le DOM HTML et ajuste la mise en page sur les écrans mobiles. Le gestionnaire de mise en page met automatiquement en évidence les haut-parleurs actifs dans une salle. La mise en page s'ajuste automatiquement pour agrandir les intervenants actifs. Le gestionnaire de mise en page agrandit automatiquement une vidéo de partage d'écran, le cas échéant.

Le gestionnaire de mise en page placera une vidéo en partage d'écran dans la plus grande tuile de la mise en page, même si le haut-parleur actif est appliqué.

Vous pouvez régler la screenPublisherContainer et cameraPublisherContainer des options de l Room() pour que la vidéo de la caméra publiée du client local et les vidéos de partage d'écran apparaissent en dehors de l'interface utilisateur du responsable de la mise en page. publiées du client local apparaissent en dehors de l'interface utilisateur du gestionnaire de mise en page.

Sur un appareil mobile, le gestionnaire de mise en page n'affiche que 4 vidéos de caméras. De même, les vidéos de partage d'écran et de haut-parleur actif occupent tout l'écran sur un appareil mobile. Vous pouvez utiliser la fonction participantJoined et participantLeft événements envoyés par l'objet Room pour avoir un indicateur d'interface utilisateur personnalisé montrant le nombre total de participants dans une salle.

Par défaut, le gestionnaire de mise en page détermine automatiquement si un client s'exécute sur un appareil mobile, en fonction de l'agent utilisateur du client. en fonction de l'agent utilisateur du client. Le gestionnaire de mise en page managedLayoutOptions du paramètre Constructeur Room() comprend une option deviceLayoutMode propriété. La valeur de cette propriété est "desktop" ou "mobile" pour de définir explicitement la disposition du dispositif.

Options de mise en page

Il existe deux présentations :

grid - Les vidéos sont présentées sous forme de grille.
active-speaker - Un locuteur actif (le participant qui parle actuellement) est automatiquement automatiquement mis en évidence dans un élément DOM plus grand.

Les Room() comprend un managedLayoutOptions qui vous permet de définir la lorsque vous rejoignez une salle :

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  roomContainer: 'roomContainer',
  managedLayoutOptions: {
    layoutMode: 'active-speaker'
  }
});

Vous pouvez également modifier le mode de présentation en appelant la fonction Room.setLayoutMode() méthode :

room.setLayoutMode('grid'); // Set layout mode to grid
room.setLayoutMode('active-speaker'); // Set layout mode to active-speaker

Les managedLayoutOptions du paramètre Constructeur Room() comprend également une option deviceLayoutMode propriété. La valeur de cette propriété est "desktop" ou "mobile" pour de définir explicitement la disposition du périphérique. Par défaut, le gestionnaire de disposition détermine automatiquement si un client s'exécute sur un appareil mobile, en se basant sur l'agent utilisateur du client. de l'agent utilisateur du client.

L'option mediaShutoffThreshold du paramètre Constructeur Room() définit un seuil pour le nombre actuel de participants dans la salle (lors de l'adhésion) qui empêchera le CameraPublisher du client local de publier de l'audio et de la vidéo.

L'option maxVideoParticipantsOnScreen du paramètre Constructeur Room() définit le nombre maximum de vidéos CameraSubscriber affichées simultanément dans une salle. Ce paramètre n'affecte que l'affichage des vidéos dans le client local.

Changement de la caméra et du microphone utilisés

Réglage des périphériques audio/vidéo de l'éditeur de l'appareil photo

// Changes the audio input device
room.camera.setAudioDevice(audioDeviceId);

// Changes the video input device
room.camera.setVideoDevice(videoDeviceId);

Obtenir les dispositifs audio/vidéo de l'éditeur de l'appareil photo

// Returns the current audio input device
const currentAudioDevice = await room.camera.getAudioDevice();

// Returns the current video input device
const currentVideoDevice = room.camera.getVideoDevice();

Réglage du périphérique de sortie audio

Pour obtenir un tableau des périphériques de sortie audio disponibles, appelez la fonction VideoExpress.getAudioOutputDevices() méthode :

const devices = await VideoExpress.getAudioOutputDevices();

Pour obtenir l'identifiant et l'étiquette du périphérique de sortie audio actuel, appelez la commande VideoExpress.getActiveAudioOutputDevice() méthode :

const device = await VideoExpress.getActiveAudioOutputDevice();
console.log(device.deviceId, device.label);

Pour définir le périphérique de sortie audio, appelez le VideoExpress.setAudioOutputDevice() en indiquant l'identifiant de l'appareil :

const devices = await VideoExpress.setAudioOutputDevice(deviceId);

Le code suivant montre comment mettre en œuvre des méthodes permettant de parcourir les périphériques de sortie audio disponibles. disponibles :

const currentAudioIndex;

const devices = await VideoExpress.getAudioOutputDevices;
const currentDevice = await devices.getActiveAudioOutputDevice();
  devices.forEach((device, index) => {
    if (device.label === currentDevice.label) {
      currentAudioIndex = index;
    }
  });

const cycleAudioOutput = () => {
  currentAudioIndex += 1;
  let deviceId = devices[currentAudioIndex % devices.length].deviceId;
  VideoExpress.setAudioOutputDevice(deviceId);
};

Création d'un éditeur de prévisualisation

Vous pouvez éventuellement configurer un élément éditeur de prévisualisation avant de rejoindre la salle :

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

L'utilisateur est invité à autoriser l'accès à la caméra et au microphone. Si l'utilisateur accorde l'accès l'accès, la promesse renvoyée par la fonction previewPublisher.previewMedia() est résolue. Dans le cas contraire, elle est rejetée.

Vous pouvez utiliser l'éditeur de prévisualisation pour que l'utilisateur sélectionne la caméra et le microphone avant de rejoindre la salle :

// Get the current audio input device
const currentAudioDevice = await previewPublisher.getAudioDevice();

// Change the audio input device
previewPublisher.setAudioDevice(audioDeviceId);

// Get the current video input device
const currentVideoDevice = previewPublisher.getVideoDevice();

// Change the video input device
previewPublisher.setVideoDevice(videoDeviceId);

Pour obtenir une liste des périphériques d'entrée audio et vidéo disponibles, appelez la fonction VideoExpress.getDevices() méthode :

const devices = await VideoExpress.getDevices();

Le code suivant montre comment mettre en œuvre des méthodes pour parcourir les périphériques d'entrée audio et vidéo disponibles. disponibles :

let currentAudioIndex;
let currentVideoIndex;

VideoExpress.getDevices((err, devices) => {
  audioInputs = devices.filter((device) => device.kind === 'audioInput');
  // Find the right starting index for cycleMicrophone
  audioInputs.forEach((device, index) => {
    if (device.label === previewPublisher.getAudioSource().label) {
      currentAudioIndex = index;
    }
  });

  currentAudioIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'audioInput')
    // Find the right starting index for cycleMicrophone
    .findIndex((device) => device.label === previewPublisher.getAudioSource().label);

  currentVideoIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'videoInput')
    // Find the right starting index for cycleCamera
    .findIndex((device) => device.label === previewPublisher.getVideoDevice().label);
});

const cycleMicrophone = () => {
  currentAudioIndex += 1;
  let deviceId = audioInputs[currentAudioIndex % audioInputs.length].deviceId;
  previewPublisher.setAudioSource(deviceId);
};

const cycleCamera = () => {
  currentVideoIndex += 1;
  let deviceId = videoInputs[currentVideoIndex % videoInputs.length].deviceId;
  previewPublisher.setVideoSource(deviceId);
};

Avant de rejoindre la salle, vous pouvez détruire l'éditeur de prévisualisation (en le supprimant de la page). la page) :

previewPublisher.destroy();

Activation et désactivation de la vidéo publiée

Accès à l'audio/vidéo de l'éditeur de l'appareil photo

// Check whether a camera publisher video is enabled or not:
room.camera.isVideoEnabled();

// Check whether a camera publisher audio is enabled or not:
room.camera.isAudioEnabled();

// Enable the camera publisher's video:
room.camera.enableVideo();

// Disable the camera publisher's video:
room.camera.disableVideo();

// Enable the camera publisher's audio:
room.camera.enableAudio();

// Disable the camera publisher's audio:
room.camera.disableAudio();

Activation et désactivation des fonctions audio et vidéo d'un abonné à une caméra

Ces méthodes n'affectent que l'audio et la vidéo de l'abonné du client local.

// Check whether a camera subscriber's video is enabled or not:
participant.camera.isVideoEnabled();

// Check whether a camera subscriber's audio is enabled or not:
participant.camera.isAudioEnabled();

// Enable a camera subscriber's video:
participant.camera.enableVideo();

// Disable a camera subscriber's video:
participant.camera.disableVideo();

// Enable a camera subscriber's audio:
participant.camera.enableAudio();

// Disable a camera subscriber's audio:
participant.camera.disableAudio();

Réglage des filtres vidéo

Vous pouvez définir des filtres de flou d'arrière-plan et de remplacement d'arrière-plan pour une CameraPublisher vidéo avec le CameraPublisher.setVideoFilter() méthode. Vous pouvez supprimer les filtres à l'aide de la méthode CameraPublisher.clearVideoFilter() méthode.

// Applying a background blur filter
room.camera.setVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high'
});

// Removing the filter
room.camera.clearVideoFilter();

Définition d'images lorsqu'une vidéo est désactivée

Vous pouvez définir l'image d'arrière-plan d'une vidéo à l'aide de la fonction setDisabledImageURI disponible pour la méthode CameraSubscriber, CameraPublisher, ScreenSubscriber, ScreenPublisheret PreviewPublisher classes. Cette image apparaît lorsque le son de la vidéo est coupé.

const disabledImageURI = 'https://path-to.file/dog-dance.jpg';
room.camera.setDisabledImageURI(disabledImageURI);

Détection active du haut-parleur

Le gestionnaire de mise en page de Video Express organise automatiquement les éléments vidéo dans le DOM HTML et ajuste la mise en page sur les écrans mobiles. Le gestionnaire de mise en page met automatiquement en évidence les haut-parleurs actifs dans une salle. La mise en page s'ajuste automatiquement pour agrandir l'orateur actif. Le gestionnaire de mise en page agrandit automatiquement une vidéo de partage d'écran, le cas échéant. Le gestionnaire de mise en page affiche automatiquement l'enceinte active si elle est cachée.

Pour activer la mise en évidence du haut-parleur actif, réglez le paramètre managedLayoutOptions.speakerHighlightEnabled option de l'option Constructeur Room() à true. Pour personnaliser la couleur de surbrillance, réglez le paramètre managedLayoutOptions.speakerHighlightColor de l'option Room() constructeur.

L'objet Room envoie un activeSpeakerChanged lorsqu'il y a un nouveau locuteur actif dans la salle. Lorsque cet événement est déclenché, vous pouvez ajouter des effets d'interface utilisateur en fonction du participant qui parle activement. est en train de parler.

room.on('activeSpeakerChanged', (participant) => {
  console.log('Active speaker: ', participant.name);
});

L'événement émet un objet Participant, qui identifie le locuteur actif.

Partage d'écran

Pour lancer le partage d'écran, appelez le Room.startScreensharing() méthode :

room.startScreensharing('screenContainer')
  .then(() => console.log('Started screen sharing'))
  .catch((err) => console.err(err));

La méthode prend un paramètre facultatif : l'élément HTML cible qui sera le conteneur de la vidéo de partage d'écran. Il peut s'agir d'un élément HTMLElement ou d'une chaîne de caractères (la méthode id de l'élément de l'élément HTML). Si aucun paramètre n'est fourni, le conteneur est l'élément screenPublisherContainer de la propriété managedLayoutOptions paramètre passé dans le Constructeur Room()ou à l'adresse roomContainer propriété transmise dans le Room() constructor. Si aucun de ces éléments n'est spécifié, la vidéo de l'éditeur de partage d'écran est ajoutée en tant qu'enfant de la vidéo de l'éditeur. est ajoutée en tant qu'enfant de la vidéo de l'éditeur de partage d'écran body de la page HTML.

L'utilisateur est invité à autoriser l'accès à l'écran. Si l'utilisateur accorde l'accès à l'écran, la promesse renvoyée par la fonction Room.startScreensharing() est résolue lorsque le partage d'écran commence. Dans le cas contraire, la promesse est rejetée.

Pour arrêter le partage d'écran, appelez le Room.stopScreenSharing() méthode :

room.stopScreenSharing();

Lorsque l'éditeur de partage d'écran démarre, un abonné de partage d'écran correspondant est automatiquement ajouté au gestionnaire de mise en page de la page de chaque autre participant.

Accès à l'audio/vidéo de l'éditeur de partage d'écran

Le code suivant vérifie si une vidéo de l'éditeur de partage d'écran est activée ou non :

room.screen.isVideoEnabled();

Le code suivant vérifie si l'audio d'un éditeur de partage d'écran est activé ou non :

room.screen.isAudioEnabled();

Pour activer la vidéo de l'éditeur de partage d'écran :

room.screen.enableVideo();

Pour désactiver la vidéo de l'éditeur de partage d'écran :

room.screen.disableVideo();

Pour activer l'audio de l'éditeur de partage d'écran :

room.screen.enableAudio();

Pour désactiver l'audio de l'éditeur de partage d'écran :

room.screen.disableAudio()

Détection des flux de partage d'écran publiés par d'autres clients

Lorsque d'autres utilisateurs publient des flux de partage d'écran, le gestionnaire de mise en page de Video Express ajoute automatiquement la vidéo à la page HTML. automatiquement la vidéo à la page HTML.

Un objet participant envoie un screenCreated lorsque le participant (et non l'utilisateur local) publie un flux de partage d'écran. l'utilisateur local) publie un flux de partage d'écran :

participant.on('screenCreated', (screenSubscriber) => {
  console.log('new screen-sharing stream for ', participant.name);
});

L'événement émet un Abonné à l'écran (objet ScreenSubscriber). L'objet ScreenSubscriber comprend des méthodes permettant d'activer et de désactiver la lecture audio et vidéo pour le flux de partage d'écran dans le client local (voir Activation et désactivation de l'audio et de la vidéo d'un abonné au partage d'écran).

Un objet participant envoie un screenDestroyed lorsqu'un participant (qui n'est pas l'utilisateur local) cesse de publier un flux de données de la caméra. l'utilisateur local) cesse de publier un flux de données :

participant.on('screenDestroyed', () => {
  console.log('screen-sharing stream destroyed for ', participant.name);
});

Activation et désactivation de l'audio et de la vidéo d'un abonné au partage d'écran

// Check whether a screen-sharing subscriber video is enabled or not:
participant.screen.isVideoEnabled();

// Check whether a screen-sharing subscriber audio is enabled or not:
participant.screen.isAudioEnabled();

// Enable a screen-sharing subscriber's video:
participant.screen.enableVideo();

// Disable a screen-sharing subscriber's video:
participant.screen.disableVideo();

// Enable a screen-sharing subscriber's audio:
participant.screen.enableAudio();

// Disable a screen-sharing subscriber's audio:
participant.screen.disableAudio();

Evénements

Les événements Video Express utilisent la fonction émetteur d'événements modèle.

Vous ajoutez des récepteurs d'événements pour un objet en appelant son on() méthode. Par exemple, le code suivant ajoute un écouteur pour la méthode connected envoi d'événements par la salle :

room.on('connected', () => {
  console.log('Connected');
});

Les on() prend deux paramètres : le nom de l'événement (une chaîne de caractères) et une fonction de rappel ("callback") qui est appelée lorsque l'événement est déclenché. qui est appelée lorsque l'événement est déclenché.

Pour certains événements, des arguments sont transmis à la fonction de rappel. L'événement est dit à émettre ces objets. Par exemple, la salle disconnected émet un reason chaîne de caractères :

room.on('disconnected', (reason) => {
  console.log('Disconnected:', reason);
});

La chambre participantLeft émet deux objets - un objet Participant et un objet reason chaîne de caractères :

room.on('connected', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

Fonctionnalités avancées

Cryptage de bout en bout

Pour utiliser le chiffrement de bout en bout, instanciez la fonction Room avec un secret de cryptage :

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  encryptionSecret: 'this-is-a-secret',
});

Une fois qu'une pièce est créée avec un secret de chiffrement, elle peut être mise à jour pour utiliser un nouveau secret en appelant la fonction Room.setEncryptionSecret(encryptionSecret) méthode :

room.setEncryptionSecret('this-is-a-secret');

Remarque : Le chiffrement de bout en bout doit d'abord être activé via les SDK du serveur. Voir la page Guide du développeur Video Express.

Signalisation

Une fois que vous avez rejoint une salle, vous pouvez utiliser la fonction Room.signal() méthode pour envoyer un signal à un ou plusieurs participants dans la salle.

Le code suivant envoie un signal à tous les participants de la salle :

room.signal({
  data: 'hello.'
});

Le code suivant envoie un signal à un participant spécifique de la salle :

room.signal({
  to: participant, // this is a Participant object
  data: `hello ${participant.name}.`
});

Vous pouvez inclure un type du signal options pour aider à identifier le signal :

room.signal({
  type: 'greeting',
  data: `hello.`
});

Lorsqu'un signal est reçu, l'objet Room envoie une commande signal qui émet un objet SignalEvent émet un objet SignalEvent qui définit le signal :

room.on('signal', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

Lorsqu'un signal comprenant un type est reçu, l'objet Room envoie une commande signal:type événement, qui émet un objet SignalEvent définissant le signal :

room.on('signal:greeting', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

Pour plus d'informations, voir le Room.signal() et le signal et signal : événements dans la documentation de référence de Video Express. Voir également la section Aperçu de la signalisation.

Définition d'une URL de proxy

Avec la fonction proxy IP, les clients acheminent tout le trafic internet (à l'exception des flux multimédias) via votre serveur proxy. Le trafic non multimédia comprend les communications avec les serveurs Video API et l'infrastructure de journalisation. l'infrastructure de journalisation.

La fonction de proxy IP est disponible en tant que fonction complémentaire.

Le code suivant définit l'URL du serveur proxy IP. Appelez-le avant d'appeler la fonction Room() constructeur :

VideoExpress.setProxyUrl('https://123.123.123.123:8080');

Pour plus d'informations, voir le Guide du développeur de proxy IP.

Utilisation de serveurs TURN personnalisés

La fonction configurable du serveur TURN est disponible en tant que fonction complémentaire. Pour configurer les serveurs TURN utilisés par le client Video Express, paramétrer les options de l'interface iceConfig de la propriété options du paramètre Constructeur Room().

Pour plus d'informations, voir le Guide du développeur du serveur TURN configurable.

Utilisation des données de connexion

Lorsque vous appelez le service de connexion à une salle Video Express, vous transmettez un jeton de connexion. Un jeton peut comporter une chaîne de données de connexion facultative, contenant des métadonnées. Vous pouvez accéder à ces données à l'aide de la fonction Room.participantConnectionData et Participant.connectionData propriétés.

Code côté serveur (Node.js)

Cet exemple montre comment ajouter des données de connexion lors de la génération d'un jeton à l'aide du OpenTok Node SDK :

// Generating token from your server
const token = opentok.generateToken(sessionId, {
  role: 'moderator',
  data: '{"disabledImageURI":"https://path-to.file/jason.jpg"}',
});

Code côté client (Video Express)

// Setting a participant's disabledImageURI with data from token
participant.on('cameraCreated', (cameraSubscriber) => {
  // connectionData is a JSON string from some your server
  const { connectionData } = participant;
  const { disabledImageURI } = JSON.parse(connectionData);
  cameraSubscriber.setDisabledImageURI(disabledImageURI);
});

Pour plus d'informations, voir Aperçu de la création de jetons.

Utilisation de Video Express dans l'environnement Enterprise

Vonage Video Express n'offre actuellement qu'un environnement standard. Cependant, vous pouvez utiliser Enterprise avec Video Express. Cela garantit que Video Express utilise l'infrastructure de Vonage. Les serveurs de signalisation et de médias qui sont dédiés aux applications des partenaires utilisent l'environnement Enterprise. Cela offre une plus grande stabilité face aux changements et une plus grande résilience face aux pics de charge de la plateforme.

Utilisation de Video Express dans les applications mobiles

Voir le Démonstration de Vonage Video Express iOS et Android sur GitHub. Cette application utilise Video Express dans les vues web (telles que WKWebView dans iOS et WebView sous Android) pour les applications mobiles.

Problèmes et limites connus

Vonage Video Express fonctionne sur OpenTok.js, l'API Video de Vonage pour JavaScript. Tous les clients qui se connectent à une salle Vonage Video Express doivent utiliser Vonage Video Express. L'utilisation d'autres SDK clients de l'API Video de Vonage (y compris les clients Web construits directement à l'aide des API d'OpenTok.js) n'est pas recommandée. OpenTok.js) peut désactiver certaines fonctions de Vonage Video Express.

Il existe certaines limitations des fonctionnalités d'OpenTok.js et de la plateforme Video API qui ne sont pas prises en charge par Vonage Video Express. Vonage Video Express ne prend pas en charge :

Video Express ne prend pas en charge grandes émissions interactives car Video Express exige actuellement que chaque client qui rejoint une salle publie un flux de caméra.
La connexion de Video Express peut prendre un peu plus de temps lorsqu'elle est utilisée avec l'application
Liste des IP autorisées fonctionnalité. Video Express se concentre sur la simplification de l'expérience des développeurs. C'est pourquoi, Video Express essaiera de télécharger des fichiers de configuration via un CDN (qui peut être bloqué par votre pare-feu) avant d'utiliser les adresses figurant sur la liste des adresses IP autorisées. Vous ne pouvez pas spécifier qu'un client doit utiliser uniquement les adresses IP autorisées (comme vous le feriez avec l'option ipWhitelist dans OpenTok.js OT.initSession() ). Un client Video Express peut mettre un peu plus de temps à se connecter qu'un client utilisant OpenTok.js configuré avec la méthode prendre un peu plus de temps pour se connecter qu'un client utilisant OpenTok.js configuré avec la méthode ipWhitelist L'option est réglée sur true lors de l'utilisation de Liste des IP autorisées avec des pare-feu qui bloquent les réseaux de diffusion de contenu.

Les participants dans Video Express correspondent à connexions. Les flux de caméras et de partage d'écran dans Video Express correspondent à des flux de cours d'eau. Les données et les événements pour les connexions et les flux apparaissent dans outils pour les développeurs tels que Inspector, Insights et autres. Video Express fournit des identifiants de connexion, par le biais de Participant.id, Room.participantIdet les clés de Room.participants, qui peuvent être utilisés pour identifier des utilisateurs spécifiques pour les événements et les données de connexion et de flux. Certaines fonctions nécessitant des identifiants de connexion et de flux ne sont pas prises en charge par Video Express. Il s'agit notamment de

La plupart des Caractéristiques de la modération. Cependant, vous pouvez utiliser la méthode de l'API REST pour forcer tous les flux d'une salle Video Express à couper le son (mais vous ne pouvez pas inclure une liste d'ID de flux à exclure). une liste d'identifiants de flux à exclure). D'autres fonctionnalités de modération de Video Express seront bientôt disponibles.
Sélection des cours d'eau à inclure dans une archive ou diffusion en direct.
Changer la classe de présentation pour une archive ou diffusion en direct qui utilise une mise en page personnalisée.

Vonage Video Express n'offre pas d'accès au système sous-jacent OpenTok.js Éditeur et Abonné objets. Vous ne pouvez donc pas utiliser la fonction getStats() et getRtcStatsReport() de ces objets. Video Express optimise automatiquement la fréquence d'images et la résolution de tous les flux vidéo. l'objet setPreferredFrameRate() et setPreferredResolution() pour un abonné ou un éditeur.

Pour plus d'informations sur les problèmes connus et les problèmes corrigés, voir la section Notes de mise à jour de Vonage Video Express.

Navigation