Partage d'écran : Concepts généraux

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 au flux (et le visualiser) comme il s'abonnerait à un flux utilisant une caméra comme source.

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

Pour publier un flux de partage d'écran, définissez la propriété videoSource de la propriété OTPublisher sur "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é).

Détermination du type de vidéo ("écran" ou "caméra") pour un flux

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
  applicationId="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 événement streamPropertyChanged lorsque les dimensions du flux d'un autre client changent. Cela peut se produire lorsque le client publiant redimensionne une fenêtre partagée (telle qu'une fenêtre de navigateur dans une application utilisant le SDK du client Web de Vonage Video). La propriété changedProperty de l'objet de l'événement est définie sur " videoDimensions ". Les propriétés stream.height et stream.width de l'objet event sont les nouvelles largeur et hauteur de la vidéo.

<OTSession
  applicationId="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 les détails du type de vidéo pour les flux afin d'ajuster la taille ou les dimensions de leurs abonnés correspondants dans l'interface utilisateur. Pour plus d'informations sur la personnalisation de la présentation des abonnés dans l'interface utilisateur, voir S'abonner à des flux.

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

L'objet Stream contient un videoType propriété. Elle peut prendre l'une des valeurs suivantes

  • "camera" - un flux vidéo standard qui utilise une caméra comme source vidéo
  • "screen" - un flux vidéo de partage d'écran
  • "custom" - un flux publié par un client web utilisant un élément HTML VideoTrack comme source vidéo
  • undefined - un flux est uniquement vocal (voir le Guide vocal)

Cette propriété peut changer si un flux publié à partir d'un appareil mobile passe d'un type de vidéo de type caméra à un type de vidéo de type partage d'écran. Lorsque le type de vidéo change, l'objet Session envoie un message streamPropertyChanged événement.

Le code suivant s'abonne aux flux et les ajoute à différents éléments HTML DIV, en fonction du type de vidéo :

<div id="people"></div>
<div id="screens"></div>
<script>
session.on('streamCreated', function(event) {
  var subOptions = {insertMode: 'append'};
  if(event.stream.videoType === 'screen') {
    session.subscribe(event.stream, 'screens', subOptions);
  } else {
    session.subscribe(event.stream, 'people', subOptions);
  }
});
</script>