Partage d'écran — React Native

Vous pouvez publier un flux qui utilise une vue vidéo de votre écran (au lieu d'une caméra) comme source.

Un client connecté à la session peut s'abonner à un flux de partage d'écran (et le visionner), tout comme il s'abonnerait à un flux dont la source est une caméra.

Cette rubrique comprend les sections suivantes :

Publication d'un flux avec une source de partage d'écran

Pour diffuser un flux de partage d'écran, configurez le videoSource propriété de l'OTPublisher properties prop à "screen":

<OTPublisher
  properties={{
    videoSource: 'screen',
  }}
/>

Le flux de partage d'écran capturera la vidéo de l'ensemble de la vue de l'application. Pour cette raison, vous pouvez désactiver les abonnés dans le client local lors de la publication d'un flux de partage d'écran (pour éviter qu'ils n'apparaissent dans le flux publié).

Pour plus d'informations sur la publication, consultez ce guide du développeur.

S'abonner à des flux de partage d'écran

Vous pouvez vous abonner à un flux utilisant une source vidéo de partage d'écran de la même manière que vous vous abonnez à un flux utilisant une caméra comme source. Voir S'abonner à des flux.

Vous pouvez détecter qu'un flux est un flux de partage d'écran en vérifiant le paramètre videoType de l'objet événement dans l'OTSession streamCreated événement. Pour un flux de partage d'écran, cette propriété est définie sur "screen":

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamCreated: event => {
      console.log(event.videoType, 'stream created', event.streamId);
    }
  }}>
  { /* ... */ }
</OTSession>

L'objet OTSession envoie un streamPropertyChanged événement déclenché lorsque les dimensions du flux d'un autre client changent. Cela peut se produire lorsque le client éditeur redimensionne une fenêtre partagée (comme une fenêtre de navigateur dans une application utilisant le Vonage Client SDK). Le changedProperty de l'objet événement est fixée à "videoDimensions". Les stream.height et stream.width Les propriétés de l'objet événement correspondent à la nouvelle largeur et à la nouvelle hauteur de la vidéo.

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token"
  eventHandlers={{
    streamPropertyChanged: event => {
      console.log(event.stream.streamId, 'stream property', event.changedProperty, 'changed:', event.stream.height, event.stream.width);
    }
  }}>
  { /* ... */ }
</OTSession>

Vous pouvez utiliser les dimensions de la vidéo et videoType informations destinées aux flux permettant d'ajuster la taille ou les dimensions des abonnés correspondants dans l'interface utilisateur. Pour plus de détails sur la personnalisation de la disposition des abonnés dans l'interface utilisateur, consultez S'abonner à des flux.

Optimisation des performances vidéo de certains flux de partage d'écran

Vous pouvez définir un indice de contenu vidéo pour améliorer la qualité et les performances d'une vidéo de partage d'écran qui contiendra principalement du texte ou du contenu vidéo. Pour plus d'informations, voir Définition de conseils sur le contenu vidéo pour améliorer les performances de la vidéo dans certaines situations.