Réglage du son et de la vidéo — React Native

Vous pouvez régler les paramètres audio et vidéo de publié et abonné flux :

Publication d'audio ou de vidéo uniquement

Pour activer ou désactiver l'audio et la vidéo, réglez le paramètre publishAudio et publishVideo les propriétés de la properties propriété transmise à la Composant OTPublisher:

<OTPublisher
  properties={{
    publishAudio: true,
    publishVideo: false,
  }}
/>

Par défaut, ils sont définis comme suit true (l'audio et la vidéo sont publiés).

Lorsque vous activez ou désactivez l'audio ou la vidéo, l'objet OTSession de chaque client connecté envoie un streamPropertyChanged avec l'événement changedProperty de l'objet de l'événement à "hasAudio" ou "hasVideo".

Publication dans une session vocale uniquement

Pour mettre en place un session vocale uniquement, fixer le videoTrack les propriétés de la properties propriété transmise à la Composant OTPublisher à false:

<OTPublisher
  properties={{
    videoTrack: false,
  }}
/>

Réglage de la résolution et de la fréquence d'images d'une vidéo

Pour définir une résolution vidéo recommandée pour un flux publié, définissez le paramètre resolution de la propriété properties prop du composant OTPublisher :

<OTPublisher
  properties={{
    resolution: '1280x720',
  }}
/>

Le présent resolution est une chaîne de caractères définissant la résolution souhaitée pour la vidéo. Le format de la chaîne est le suivant "widthxheight"où la largeur et la hauteur sont représentées en pixels. Les valeurs valables sont "1920x1080", "1280x720", "640x480"et "320x240".

La résolution par défaut d'un flux (si vous ne spécifiez pas de résolution) est de 640x480 pixels. Si le système client ne peut pas prendre en charge la résolution que vous avez demandée, le flux utilisera le paramètre suivant le plus élevé.

Il est préférable d'essayer d'adapter la résolution à la taille d'affichage de la vidéo. Si vous n'affichez la vidéo qu'à 320x240 pixels, il est inutile de la diffuser à 1280x720 ou 1920x1080. La réduction de la résolution permet d'économiser de la bande passante et de réduire les encombrements et les interruptions de connexion.

Remarque : Voir le Guide du développeur 1080p pour les considérations relatives à l'utilisation de la résolution 1080p.

Pour définir une fréquence d'images recommandée pour un flux publié, définissez le paramètre frameRate de la propriété properties prop du composant OTPublisher :

<OTPublisher
  properties={{
    frameRate: 7,
  }}
/>

Réglez la valeur sur la fréquence d'images souhaitée, en images par seconde, pour la vidéo. Les valeurs valides sont 30 (valeur par défaut), 15, 7 et 1.

Pour les sessions qui utilisent OpenTok Media Router (sessions avec lemode média (réglé sur « routed »), la réduction de la fréquence d'images diminue proportionnellement la bande passante maximale que le flux peut utiliser. Cependant, lors d'une session avec le mode média est réglé sur relayed, la réduction de la fréquence d'images ne réduit pas la bande passante du flux.

La réduction de la fréquence d'images peut permettre de réduire la bande passante nécessaire. Les vidéos à faible résolution peuvent avoir une fréquence d'images plus faible sans que l'utilisateur ne remarque vraiment la différence. Ainsi, si vous utilisez une faible résolution, vous pourriez également envisager d'opter pour une faible fréquence d'images.

Vous pouvez également limiter la fréquence d'images du flux vidéo d'un abonné. Pour plus d'informations, consultez Limitation de la fréquence d'images d'un flux auquel on est abonné.

Configuration de la caméra utilisée par l'éditeur

Vous pouvez demander à l'éditeur d'utiliser l'appareil photo orienté vers l'arrière de l'appareil en définissant une valeur de properties du composant OTPublisher et en définissant la propriété cameraPosition de cet objet à "back":

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

Notez que vous pouvez également diffuser un flux de partage d'écran, c'est-à-dire un flux dont la source est l'écran du client et non une caméra. Pour plus d'informations, consultez Partage d'écran.

Activation de la torche de l'appareil photo (lampe de poche)

Régler le cameraTorch de l'objet transmis en tant que properties prop de la OTPublisher pour activer ou désactiver la lampe torche de la caméra lors de la capture vidéo :

<OTPublisher
  properties={{
    cameraTorch: false,
  }}
/>

La valeur par défaut est false (la lampe de poche n'est pas utilisée).

Notez que toutes les caméras de l'appareil ne disposent pas d'une lampe de poche. Si la caméra active ne prend pas en charge la fonctionnalité d'éclairage de la caméra (par exemple, la caméra frontale ne la prend généralement pas en charge), le réglage du paramètre cameraTorch n'a aucun effet.

Réglage du zoom de l'appareil photo

Régler le cameraZoomFactor de l'objet transmis en tant que properties prop de la OTPublisher pour définir le taux (facteur) de zoom de l'appareil photo :

<OTPublisher
  properties={{
    cameraZoomFactor: 0.7,
  }}
/>

La valeur du rapport/facteur est comprise entre 0,5 et le facteur de zoom maximal. Les valeurs comprises entre 0,5 et 1,0 représentent un ultra grand angle (zoom arrière), et les valeurs comprises entre 1,0 et le facteur de zoom maximal représentent un zoom avant. Le facteur de zoom réel appliqué est limité à la plage prise en charge par la configuration de la caméra active. Si la caméra ne prend pas en charge l'ultra grand angle, les facteurs de zoom définis en dessous de 1,0 ne seront pas pris en compte et aucun zoom ne sera appliqué. Pour les valeurs supérieures au facteur de zoom maximal pris en charge par la caméra, le facteur de zoom sera fixé à la valeur maximale prise en charge.

Abonnement audio ou vidéo uniquement

Pour désactiver le son ou la vidéo d'un abonné, définissez le subscribeToAudio ou subscribeToVideo les propriétés de la properties a été transmis à l'Assemblée générale des Nations unies. OTSubscriber de la composante :

<OTSubscriber
  properties={{
    subscribeToAudio: true,
    subscribeToVideo: false,
  }}
/>

Par défaut, ils sont définis comme suit true (la consommation porte à la fois sur l'audio et la vidéo).

Régler le subscribeToAudio pro Lorsque vous s'abonner à un flux, vous pouvez choisir de vous abonner d'abord au flux audio ou au flux vidéo (s'ils sont disponibles). Par exemple, le code suivant permet de s'abonner uniquement au flux audio :

Notez toutefois que vous ne pouvez vous abonner au flux audio ou vidéo que si le client qui diffuse ce flux inclut effectivement de l'audio ou de la vidéo. Par exemple, en définissant subscribeToVideo à false n'aura aucun effet si le client qui publie le flux ne publie que de l'audio.

Modification du niveau sonore d'un abonné

Lorsque vous s'abonner à un fluxVous pouvez régler le volume initial de l'abonné lorsque vous appelez le numéro de téléphone de l'abonné. subscribe() de l'objet Session :

// Set a value between 0 (silent) and 100 (full volume):
var subOptions = {audioVolume = 10};

// Replace stream and replacementElementId with your own values:
subscriber = session.subscribe(stream,
                             replacementElementId,
                             subOptions);

Après avoir créé un objet Abonné, vous pouvez définir son volume en appelant son objet setAudioVolume() en transmettant une valeur comprise entre 0 (silence) et 100 (plein volume) :

subscriber.setAudioVolume(0); (silent)

Détecter si un flux contient de l'audio ou de la vidéo

Dans l'OTSession streamCreated L'événement comprend hasAudio et hasVideo propriétés :

<OTSession
  eventHandlers={{
    streamCreated: event => {
      console.log('Stream created -- stream ID:', event.streamId);
      console.log('hasAudio:', event.hasAudio);
      console.log('hasVideo:', event.hasVideo);
    }
  }}/>

Il se peut que vous souhaitiez définir les propriétés de l'état en fonction de l'élément hasAudio et hasVideo et ajuster l'interface utilisateur pour le OTSubscriber en fonction de ces valeurs d'état. Il se peut que vous souhaitiez adapter l'interface utilisateur en fonction de la présence d'audio ou de vidéo dans le flux. Par exemple, vous pouvez indiquer à l'utilisateur si un flux est audio ou non, ou ne pas masquer un abonné si un flux n'a pas de vidéo.

Détecter quand un flux ajoute ou supprime du contenu audio ou vidéo

L'objet OTSession envoie un streamPropertyChanged lorsqu'un flux active ou désactive l'audio ou la vidéo. L'objet événement possède un élément changedProperty est définie comme étant la propriété hasAudio ou hasVideo lorsque l'audio ou la vidéo change. Les newValue La propriété est définie sur une valeur booléenne. Par exemple, le code suivant surveille les modifications apportées à un flux audio ou vidéo :

<OTSession
eventHandlers={{
  streamPropertyChanged: event => {
    if (event.changedProperty === 'hasAudio')
      // Adjust the UI for the subscriber to event.streamId.
    } else if (event.changedProperty === 'hasVideo') {
      // Adjust the UI for the subscriber to event.streamId.
    }
}}/>

Réglage du débit binaire audio

Pour définir le débit binaire audio pour le flux audio d'un éditeur, définissez le paramètre audioBitrate de la propriété properties a été transmis à l'Assemblée générale des Nations unies. OTPublisher de la composante :

<OTPublisher
  properties={{
    audioBitrate: 48000,
  }}
/>

Les audioBitrate est le débit souhaité pour l'audio publié, en bits par seconde. Les valeurs prises en charge sont comprises entre 6 000 et 510 000. Cette valeur permet d'activer l'audio de haute qualité (ou de réduire l'utilisation de la bande passante avec de l'audio de qualité inférieure).

Les paramètres suivants sont recommandés :

  • 8 000 - 12 000 pour la parole en bande étroite (NB)
  • 16 000 - 20 000 pour la parole à large bande (WB)
  • 28 000 - 40 000 pour la parole en bande complète (FB)
  • 48 000 - 64 000 pour la musique à bande complète (FB)

Réduction de la bande passante audio avec Opus DTX

Opus DTX (transmission discontinue) est un codec audio qui permet de réduire l'utilisation de la bande passante lorsqu'un participant ne parle pas. Cela peut s'avérer utile lors de sessions importantes avec de nombreux participants audio.

Vous activez Opus DTX en réglant le paramètre enableDtx de la propriété properties a été transmis à l'Assemblée générale des Nations unies. OTPublisher de la composante :

<OTPublisher
  properties={{
    enableDtx: true,
  }}
/>

Pour plus d'informations, consultez ceci Article de la base de connaissances de Vonage Video API.

Appliquer des filtres à une vidéo publiée

Utiliser le OTPublisher.setVideoTransformers() pour appliquer un filtre vidéo à la vidéo publiée. Vous pouvez appliquer un filtre de flou d'arrière-plan ou un filtre d'image d'arrière-plan.

Important : À partir de la version 2.28.0 du SDK Vonage Video pour React Native, vous devez installer la bibliothèque multimédia Vonage séparément du SDK Vonage Video pour React Native. Pour plus d'informations, consultez Intégration de la médiathèque de Vonage.

Le code suivant applique un filtre de flou d'arrière-plan à la vidéo d'un éditeur :

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundBlur',
          properties: JSON.stringify({
            radius: 'low',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Il convient de noter que le OTPublisher.setVideoTransformers() prend un tableau d'objets transformateurs. Chaque objet possède deux propriétés :

  • A name qui doit être définie comme suit 'BackgroundBlur' ou 'BackgroundReplacement'.

  • A properties définissant les options du filtre.

Pour plus de détails, voir la documentation relative à l'option OTPublisher.setVideoTransformers() méthode.

Le code suivant applique un filtre de remplacement de l'arrière-plan à la vidéo d'un éditeur (pris en charge sur iOS uniquement) :

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setVideoTransformers([
        {
          name: 'BackgroundReplacement',
          properties: JSON.stringify({
            image_file_path: 'path/to/image',
          }),
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Pour supprimer les filtres vidéo du flux publié, appelez la méthode OTPublisher.setVideoTransformers() et transmet un tableau vide.

Important : Les filtres de flou d'arrière-plan et de remplacement d'arrière-plan sollicitent fortement les ressources et nécessitent des appareils dotés d'une puissance de traitement élevée. Il est recommandé de n'utiliser ces transformations que sur les appareils compatibles. Consultez la documentation suivante :

Application d'un filtre de suppression du bruit à une vidéo publiée

Utiliser le OTPublisher.setAudioTransformers() pour appliquer un transformateur audio à une vidéo publiée. Un seul transformateur, le filtre de suppression du bruit, est pris en charge.

Important : Le filtre de suppression du bruit utilise la bibliothèque multimédia Vonage. Vous devez installer la bibliothèque multimédia Vonage séparément du SDK Vonage Video React Native. Pour plus d'informations, consultez Intégration de la médiathèque de Vonage.

Le code suivant applique un filtre de suppression du bruit à la vidéo d'un éditeur :

<OTPublisher
  eventHandlers={{
    streamCreated: () => {
      this.publisher.setAudioTransformers([
        {
          name: 'NoiseSuppression',
          properties: '',
        }
      ])
    }
  }}
  ref={instance => {
    this.publisher = instance;
  }}
/>

Pour supprimer les transformateurs audio du flux publié, appelez la fonction OTPublisher.setAudioTransformers() et transmet un tableau vide.

Important : Les transformations audio sont gourmandes en ressources et nécessitent des appareils dotés d'une puissance de traitement élevée. Il est recommandé de n'utiliser ces transformations que sur les appareils compatibles. Consultez la documentation suivante :

Publication d'audio uniquement pour les éditeurs disposant d'une faible bande passante

Les éditeurs peuvent être configurés pour désactiver la vidéo, tout en conservant l'audio, dans les situations de faible bande passante. La publication de la vidéo reprendra lorsque la bande passante de l'éditeur s'améliorera.

Pour plus d'informations, voir le Repli audio guide du développeur.

Définition des préférences de l'éditeur en matière de dégradation de la qualité vidéo

Lorsque la bande passante ou l'unité centrale sont limitées, le moteur vidéo peut réduire la fréquence d'images et/ou la résolution de la vidéo de l'éditeur pour s'adapter à ces limitations.

La « préférence de dégradation » est un paramètre de configuration qui permet d'ajuster ce comportement.

Les développeurs sont chargés de définir et d'appliquer les préférences de dégradation en fonction de leur cas d'utilisation et de leurs exigences.

Il s'agit d'une préférence, ce qui signifie que le moteur vidéo essaiera de suivre la préférence sélectionnée, mais il n'y a aucune garantie quant au résultat.

Cette préférence peut se comporter différemment lors de l'utilisation de vidéo évolutiveoù le moteur vidéo peut décider de supprimer des couches au lieu de dégrader la résolution.

Indice de contenu et la préférence de dégradation ont des objectifs différents mais liés : L'indication de contenu décrit le type de contenu transmis, tandis que la préférence de dégradation contrôle la stratégie d'encodage. Lorsque vous définissez une indication de contenu, le moteur vidéo détermine automatiquement la préférence de dégradation appropriée (par exemple, "texte" sélectionne automatiquement le maintien de la résolution). Une préférence de dégradation explicitement définie remplacera cette sélection automatique.

Vous pouvez définir cette valeur à l'aide de l'une des options suivantes DegradationPreference valeurs :

Non défini

<OTPublisher properties={{ degradationPreference: DegradationPreference.NotSet }}/>

Valeur par défaut. Le moteur vidéo déterminera le niveau de dégradation optimal.

Conserver la fréquence d'images et la résolution

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainFrameRateAndResolution }}/>

Le moteur vidéo s'efforcera de maintenir une fréquence d'images constante sans réduire la résolution.

Maintenir la fréquence d'images

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainFrameRate }}/>

Le moteur vidéo s'efforcera de maintenir une fréquence d'images constante, mais pourra réduire la résolution si nécessaire.

Conserver la résolution

<OTPublisher properties={{ degradationPreference: DegradationPreference.MaintainResolution }}/>

Le moteur vidéo ne réduira pas la résolution, mais pourra réduire la fréquence d'images si nécessaire.

Équilibré

<OTPublisher properties={{ degradationPreference: DegradationPreference.Balanced }}/>

Le moteur vidéo s'efforcera de trouver un juste équilibre entre la réduction de la résolution et celle de la fréquence d'images lorsque cela s'avérera nécessaire.