Streams abonnieren — React Native

Sobald Sie mit einer Sitzung verbunden, können Sie Streams in der Sitzung abonnieren. Wenn Sie einen Stream abonnieren, wird dessen Videostream auf der Client-Seite angezeigt und der Ton wiedergegeben.

Dieses Thema umfasst die folgenden Abschnitte:

Einen Stream abonnieren

Um alle Streams in der Sitzung zu abonnieren, fügen Sie ein OTSubscriber-Objekt als Chile des OTSession-Objekts hinzu:

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token">
  <OTSubscriber/>
</OTSession>

Nachdem der Client eine Verbindung zur Sitzung hergestellt hat, fügt das OTSubscriber-Objekt Ansichten für Abonnentenvideos hinzu, wenn Streams anderer Clients in der Sitzung verfügbar werden.

Das OTSubscriber-Objekt sendet eine connected Ereignis, wenn ein Abonnent erfolgreich mit dem Streaming beginnt. Es löst ein error Ereignis, falls beim Abonnieren ein Fehler auftritt. Setze ein eventHandlers der Komponente OTSubscriber, und setzen Sie die connected und error Eigenschaften dieses Objekts an Callback-Funktionen:

<OTSubscriber
eventHandlers={{
  connected: () => {
    console.log('The subscriber started streaming.');
  },
  error: () => {
    console.log('The subscriber failed.');
  }
}}/>

Einstellung der Stream-Eigenschaften

Gib ein properties Prop für das OTSubscriber-Objekt, um Eigenschaften festzulegen für alle Abonnenten:

<OTSubscriber
  properties={{
    subscribeToAudio: true,
    subscribeToVideo: false,
    subscribeToCaptions: true,
    preferredResolution: 30,
    preferredFrameRate: '352x288',
    audioVolume: 50,
  }}/>

Alternativ können Sie die streamProperties Die Eigenschaft `OTSubscriber` verweist auf ein Objekt, das individuelle Einstellungen für jeden Stream definiert. Die Eigenschaften des Objekts sind Schlüssel-Wert-Paare, wobei die Stream-ID als Schlüssel dient und der Wert auf ein Objekt gesetzt ist, das subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRateund audioVolume Überschreibungen für den Abonnenten des Streams:

class App extends Component {
constructor(props) {
  super(props);
  this.state = {
    streamProperties: {},
  };

  this.subscriberProperties = {
    subscribeToAudio: false,
    subscribeToVideo: true,
    subscribeToCaptions: false,
  };

  this.sessionEventHandlers = {
    streamCreated: event => {
      const streamProperties = {...this.state.streamProperties, [event.streamId]: {
        subscribeToAudio: true,
        subscribeToVideo: false,
        style: {
          width: 400,
          height: 300,
        },
      }};
      this.setState({ streamProperties });
    },
  };
}

render() {
  return (
    <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sessionEventHandlers}>
      <OTSubscriber
        properties={this.subscriberProperties}
        eventHandlers={this.subscriberEventHandlers}
        style={{ height: 100, width: 100 }}
        streamProperties={this.state.streamProperties}
      />
    </OTSession>
  );
}
}

Die properties Objekt enthält die folgenden Eigenschaften:

Benutzerdefiniertes Rendering von Abonnenten

Standardmäßig fügt der OTSubscriber untergeordnete Ansichten für Abonnentenvideos hinzu. Sie können jedoch eine Render-Funktion hinzufügen, um das OTSubscriber-Objekt zum Hinzufügen von Abonnenten zu nutzen. Der Funktion wird ein Array mit Stream-IDs übergeben:

import { OTSubscriberView, OTSubscriber } from 'opentok-react-native'

// Render method:

<OTSubscriber>
  {streamIds => {
    if (streamIds.length === 0) {
      return null;
    }
    return streamIds.map(streamId => {
      return (
        <OTSubscriberView
          streamId={streamId}
          key={streamId}
          style={{
            width: 200,
            height: 150,
          }}
        />
      );
    });
  }}
</OTSubscriber>

Verwenden Sie die Komponente „OTSubscriberView“, um einzelne Streams darzustellen. Die Komponente „OTSubscriberView“ erbt die Props (wie beispielsweise style) aus der React-Native-View-Komponente. Zudem verfügt sie über eine streamId Ein Prop, mit dem Sie die Stream-ID für den Stream des Abonnenten übergeben.

Anmerkung: Die streamProperties Die Eigenschaft des OTSubscriber-Objekts wird ignoriert, wenn diese untergeordneten OTSubscriberView-Komponenten hinzugefügt werden.

Erkennen, wann Streams in einer Sitzung erstellt werden

Das OTSession-Objekt sendet eine streamCreated Ereignis, wenn ein neuer Stream (ein anderer als der eigene) in einer Sitzung erstellt wird. Ein Stream wird erstellt, wenn ein Client veröffentlicht einen Stream zur Sitzung. Die streamCreated Das Ereignis wird außerdem bei der ersten Verbindung für jeden vorhandenen Stream in der Sitzung ausgelöst.

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

Die streamCreated Das Ereignisobjekt enthält Details zum Stream, darunter Verbindungsdaten, den Typ der Videoquelle („Kamera“ oder „Bildschirm“) und weitere Informationen. Anhand dieser Informationen können Sie festlegen, wie die Streams angeordnet werden (oder welche Streams einbezogen werden sollen), wenn Sie eine

Abmelden von einem Stream

Abonnements werden automatisch gelöscht, wenn der Veröffentlichungsclient die Veröffentlichung beendet. Um das Abonnement eines laufenden Streams zu beenden, trennen Sie die entsprechende OTSubscriberView-Komponente von der OTSubscriber-Komponente. Siehe Benutzerdefiniertes Rendering von Abonnenten.

Erkennen, wann Streams eine Sitzung verlassen

Wenn ein anderer Stream als der eigene eine Sitzung verlässt, löst das OTSession-Objekt ein streamDestroyed Veranstaltung:

<OTSession
eventHandlers={{
  streamDestroyed: (event) => {
    console.log('Stream destroyed -- stream ID:', event.streamId);
  }
}}/>

Die streamDestroyed Das Ereignisobjekt verfügt über die folgenden Eigenschaften, die den Stream definieren:

  • connection � Ein Objekt, das der Verbindung entspricht, über die der Stream veröffentlicht wird. Dazu gehört ein data Eigenschaft, die Folgendes umfasst: Verbindungsdaten (sofern eine festgelegt wurde) für den Client.

  • creationTime �Der Zeitstempel (eine Zahl) für die Erstellung des Streams. Dieser Wert wird in Millisekunden berechnet.

  • hasAudio (Boolescher Wert) Gibt an, ob der Stream Audio enthält. Diese Eigenschaft kann sich ändern, wenn der Publisher das Audio ein- oder ausschaltet. In diesem Fall sendet das OTSession-Objekt eine streamPropertyChanged Veranstaltung.

  • hasVideo (Boolescher Wert) Gibt an, ob der Stream Videodaten enthält.

  • name �(Zeichenkette) Der Name des Streams, sofern bei der Veröffentlichung des Streams ein Name festgelegt wurde.

videoDimensions – Dieses Objekt verfügt über zwei Eigenschaften: „width“ und „height“. Beide sind Zahlen. Die Eigenschaft „width“ gibt die Breite des kodierten Streams an; die Eigenschaft „height“ gibt die Höhe des kodierten Streams an. (Diese Werte sind unabhängig von der tatsächlichen Breite der dem Stream zugeordneten Publisher- und Subscriber-Objekte.) Diese Eigenschaft kann sich ändern, wenn ein von einem Mobilgerät veröffentlichter Stream aufgrund einer Änderung der Geräteausrichtung in der Größe angepasst wird.

  • videoType �Der Videotyp: entweder „Kamera“ oder „Bildschirm“. Bei einem „Bildschirm“-Video wird die Bildschirmfreigabe des Veröffentlichers als Videoquelle verwendet. Diese Eigenschaft kann sich ändern, wenn die veröffentlichte Übertragung von einer Kamera auf eine Bildschirmfreigabe als Videoquelle umgestellt wird. Weitere Informationen finden Sie unterBildschirmfreigabe — React Native.

Die hasAudio, hasVideo, videoDimensionsund videoType Eigenschaften können sich ändern (beispielsweise, wenn der Herausgeber das Video ein- oder ausschaltet). In diesem Fall sendet das OTSession-Objekt ein streamPropertyChanged Veranstaltung.

Automatische Wiedereinschaltung

Wenn ein Client die Verbindung zu einem abonnierten Stream unterbricht (z. B. aufgrund einer Unterbrechung der Netzwerkverbindung bei einem der beiden Clients), versucht er automatisch, die Verbindung zum Stream wiederherzustellen. Wenn der Stream unterbrochen wird und der Client versucht, die Verbindung wiederherzustellen, sendet das OTSubscriber-Objekt eine disconnected Ereignis. Wenn der Stream wiederhergestellt ist, sendet das OTSubscriber-Objekt ein connected Ereignis. Wenn der Client den Stream nicht wiederherstellen kann, sendet das OTSubscriber-Objekt ein destroyed Veranstaltung.

Als Reaktion auf diese Ereignisse kann Ihre Anwendung (optional) Benachrichtigungen auf der Benutzeroberfläche anzeigen, die den Zustand der vorübergehenden Unterbrechung, der Wiederverbindung und der Zerstörung angeben:

<OTSubscriber
  eventHandlers={{
    disconnected: (event) => {
      console.log('stream disconnected -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
    connected: (event) => {
      console.log('stream connected -- stream ID:', event.streamId);
      // Adjust user interface.
    },
    destroyed: (event) => {
      console.log('stream destroyed -- stream ID:', event.streamId);
      // Adjust user interface.
    }
  }}/>

Einstellung der bevorzugten Bildrate und Auflösung

Beim Abonnieren eines Streams, der die Skalierbare Videofunktion, können Sie die gewünschte Bildrate und die gewünschte Auflösung für den Stream festlegen, den der abonnierte Client vom OpenTok Media Router empfängt.

<OTSubscriber
    properties={{
      preferredFrameRate: 7,
      preferredResolution: '352x288',
  }}/>

  • preferredFrameRate — Die bevorzugte Bildrate in Bildern pro Sekunde. Gültige Werte sind 30, 15, 7 und 1. Lassen Sie dieses Feld leer, um die bevorzugte Bildrate zu deaktivieren; in diesem Fall verwendet der Client die höchstmögliche Bildrate.

  • preferredResolution — Die bevorzugte Auflösung. Gültige Werte sind „1280x720“, „640x480“ und „352x288“. Lassen Sie dieses Feld leer, um die bevorzugte Auflösung zu deaktivieren; in diesem Fall verwendet der Client die höchstmögliche Bildrate.

Erkennen, wenn das Video eines Abonnenten deaktiviert ist

Wenn das Video eines Abonnenten deaktiviert wird, sendet das OTSubscriber-Objekt eine videoDisabled Veranstaltung:

<OTSubscriber
  eventHandlers={{
    videoDisabled: (event) => {
      console.log('stream video disabled -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
  }}/>

Wenn der OpenTok Media Router das Video eines Teilnehmers deaktiviert, möchten Sie möglicherweise die Benutzeroberfläche für diesen Teilnehmer anpassen.

Die Eigenschaft „reason“ des „videoDisabled“-Ereignisobjekts gibt den Grund an, warum das Video deaktiviert wurde. Hierfür stehen folgende Werte zur Auswahl:

  • "PublisherPropertyChanged" - Der Verlag hat die Veröffentlichung von Videos eingestellt.

  • "QualityChanged" — Der OpenTok Media Router hat aufgrund von Änderungen der Stream-Qualität die Videoübertragung an den Teilnehmer eingestellt. Diese Funktion des OpenTok Media Routers bewirkt, dass der Teilnehmer den Videostream trennt, wenn sich die Verbindungsqualität verschlechtert. (Der Teilnehmer empfängt weiterhin den Audiostream, sofern vorhanden.)

    Bevor dieses Ereignis gesendet wird, löst das OTSubscriber-Objekt, sobald sich die Stream-Qualität des Abonnenten so stark verschlechtert, dass die Gefahr besteht, dass der Videostream deaktiviert wird, ein videoDisableWarning Veranstaltung.

    Sollte sich die Verbindung wieder so verbessern, dass die Videoübertragung erneut möglich ist, löst das OTSubscriber-Objekt ein videoEnabled und der Abonnent nimmt den Videoempfang wieder auf.

    Diese Funktion ist nur in Sitzungen verfügbar, die den OpenTok Media Router verwenden (Sitzungen mit dem Medienbetrieb (auf „geroutet“ gesetzt), nicht in Sitzungen, bei denen der Medienmodus auf „weitergeleitet“ gesetzt ist.

    Wenn Sie einen Stream veröffentlichen, können Sie verhindern, dass das Video aufgrund der Streamqualität deaktiviert wird. einstellen audioFallbackEnabled zu false im properties Prop in die OTPublisher-Komponente übergeben.

  • "SubscriberPropertyChanged" - Der Abonnent hat ein Videoabonnement begonnen oder beendet, indem er subscribeToVideo auf „false“ im properties An die OTSubscriber-Komponente übergebene Eigenschaft.

  • "CodecNotSupported" - Der Abonnent hat das Videoabonnement aufgrund eines inkompatiblen Codecs beendet (siehe die Video-Codecs Entwicklerhandbuch).

Das OTSubscriber-Objekt leitet weiter videoEnabled Ereignis, wenn das Video fortgesetzt wird:

Die reason Die Eigenschaft des „videoEnabled“-Ereignisobjekts gibt den Grund an, aus dem das Video aktiviert wurde. Sie kann auf einen der folgenden Werte gesetzt werden:

  • "PublisherPropertyChanged" - Der Verlag hat die Veröffentlichung von Videos wieder aufgenommen.

  • "QualityChanged" — Der OpenTok Media Router hat die Videoübertragung an den Teilnehmer aufgrund von Änderungen der Stream-Qualität wieder aufgenommen. Diese Funktion des OpenTok Media Routers sorgt dafür, dass der Teilnehmer den Videostream unterbricht, wenn sich die Verbindung verschlechtert, und den Videostream wieder aufnimmt, sobald sich die Stream-Qualität verbessert.

    Diese Funktion ist nur in Sitzungen verfügbar, die den OpenTok Media Router verwenden (Sitzungen mit dem Medienbetrieb (auf „geroutet“ gesetzt), nicht in Sitzungen, bei denen der Medienmodus auf „weitergeleitet“ gesetzt ist.

  • "SubscriberPropertyChanged" - Der Abonnent hat ein Videoabonnement begonnen oder beendet, indem er subscribeToVideo auf „false“ im properties An die OTSubscriber-Komponente übergebene Eigenschaft.

  • „CodecNotSupported“ – Das Abonnentenvideo wurde nach einem Codec-Wechsel von einem inkompatiblen Codec freigeschaltet (siehe den Video-Codecs Entwicklerhandbuch).

Erkennen, wenn sich die Videodimensionen eines Streams ändern

Die Videoabmessungen eines Streams können sich ändern, wenn ein von einem Mobilgerät veröffentlichter Stream aufgrund einer Änderung der Geräteausrichtung in der Größe angepasst wird. Dies kann auch passieren, wenn die Videoquelle ein Bildschirmfreigabefenster ist und der Nutzer, der den Stream veröffentlicht, die Größe des Fensters ändert, das als Quelle für den Stream dient.

Wenn sich die Videoabmessungen eines Streams ändern, löst das Session-Objekt ein „streamPropertyChanged“-Ereignis aus, wobei die changedProperty Eigenschaft des Ereignisses, die auf "videoDemensions".

Abrufen von Stream-Statistiken

Um Audio- und Videostatistiken für Abonnenten zu erhalten, fügen Sie Ereignisbehandler für die audioNetworkStats und videoNetworkStats Ereignis, das vom OTSubscriber ausgelöst wird. Sie enthalten Informationen über den Stream des Abonnenten, darunter die folgenden:

  • Die Gesamtzahl der verlorenen Audio- und Videopakete
  • Die Gesamtzahl der empfangenen Audio- und Videopakete
  • Die Gesamtzahl der empfangenen Audio- und Videobytes
  • Die aktuelle durchschnittliche Videobildrate
<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

Um detailliertere Stream-Statistiken abzurufen, verwenden Sie die Methode `Subscriber.getRtcStatsReport()` des `OTSubscriber`-Objekts. Diese gibt ein Promise zurück, das im Erfolgsfall eine JSON-Darstellung eines RtcStatsReport Objekt für den abonnierten Stream:

<OTSubscriber
  eventHandlers={{
    connected: event => {
      setTimeout(() => {
        this.subscriber.getRtcStatsReport();
      }, 4000);
    },
    rtcStatsReport: event => {
      console.log('subscriber rtcStatsReport event', event);
    },
  }}
/>