Allgemeine Concepts der Bildschirmfreigabe

Sie können einen Stream veröffentlichen, der eine Videoansicht Ihres Bildschirms (anstelle einer Kamera) als Quelle verwendet.

Ein mit der Sitzung verbundener Client kann den Stream abonnieren (und anzeigen), wie er einen Stream abonnieren würde, der eine Kamera als Quelle verwendet.

Veröffentlichen eines Streams mit einer Bildschirmfreigabequelle

Um einen Screen-Sharing-Stream zu veröffentlichen, setzen Sie die Eigenschaft videoSource der OTPublisher-Eigenschaftsliste auf "screen":

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

Der Stream zur Bildschirmfreigabe nimmt Videos aus der gesamten Ansicht der Anwendung auf. Aus diesem Grund sollten Sie Abonnenten im lokalen Client deaktivieren, wenn Sie einen Stream-Sharing-Stream veröffentlichen (um zu verhindern, dass sie im veröffentlichten Stream angezeigt werden).

Festlegen des Videotyps ("Bildschirm" oder "Kamera") für einen Stream

Sie können einen Stream, der eine Screen-Sharing-Videoquelle verwendet, auf dieselbe Weise abonnieren wie einen Stream, der eine Kamera als Quelle verwendet. Siehe Abonnieren von Streams.

Sie können erkennen, dass ein Stream ein Screen-Sharing-Stream ist, indem Sie die Option videoType Eigenschaft des Ereignisobjekts in der OTSession streamCreated Ereignis. Für einen Screen-Sharing-Stream wird diese Eigenschaft auf "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>

Das OTSession-Objekt sendet ein streamPropertyChanged-Ereignis, wenn sich die Abmessungen des Streams eines anderen Clients ändern. Dies kann der Fall sein, wenn der veröffentlichende Client die Größe eines freigegebenen Fensters ändert (z. B. ein Browserfenster in einer Anwendung, die das Vonage Video Web Client SDK verwendet). Die Eigenschaft changedProperty des Ereignisobjekts wird auf "videoDimensions" gesetzt. Die Eigenschaften stream.height und stream.width des Ereignisobjekts sind die neue Breite und Höhe des Videos.

<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>

Sie können die Videoabmessungen und videoType-Details für Streams verwenden, um die Größe oder Abmessungen der entsprechenden Abonnenten in der Benutzeroberfläche anzupassen. Einzelheiten zum Anpassen des Layouts von Abonnenten in der Benutzeroberfläche finden Sie unter Abonnieren von Streams.

Abonnieren von Streams zur Bildschirmfreigabe

Das Stream-Objekt enthält eine videoType Eigenschaft. Diese kann auf einen der folgenden Werte gesetzt werden

  • "camera" - ein Standard-Videostream, der eine Kamera als Videoquelle verwendet
  • "screen" - einen Video-Stream zur gemeinsamen Nutzung des Bildschirms
  • "custom" - ein von einem Web-Client veröffentlichter Stream, der ein HTML-VideoTrack-Element als Videoquelle verwendet
  • undefined - ein Stream ist rein sprachlich (siehe die Anleitung nur mit Stimme)

Diese Eigenschaft kann sich ändern, wenn ein von einem mobilen Gerät veröffentlichter Stream von einem Kamera- zu einem Bildschirmfreigabevideotyp wechselt. Wenn sich der Videotyp ändert, sendet das Sitzungsobjekt eine streamPropertyChanged Veranstaltung.

Der folgende Code abonniert Streams und fügt sie je nach Videotyp zu verschiedenen HTML-DIV-Containerelementen hinzu:

<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>