Streams veröffentlichen — Web

Sobald Sie mit einer Sitzung verbundenkönnen Sie einen Stream veröffentlichen, den andere mit der Sitzung verbundene Clients anzeigen können.

Dieses Thema umfasst die folgenden Abschnitte:

Veröffentlichen eines Streams

Um einen Stream zu veröffentlichen, fügen Sie eine OTPublisher-Komponente als untergeordnetes Element des OTSession-Objekts hinzu:

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

Der Publisher beginnt mit dem Streaming, wenn der Client eine Verbindung zur Sitzung herstellt. Das OTPublisher-Objekt sendet eine streamCreated Ereignis, wenn es mit dem Streaming zur Sitzung beginnt. Es sendet ein error Ereignis, falls beim Veröffentlichen ein Fehler auftritt. Setzen Sie ein eventHandlers der OTPublisher-Komponente, und setzen Sie die streamCreated und error Eigenschaften dieses Objekts an Callback-Funktionen:

<OTPublisher
eventHandlers={{
  streamCreated: () => {
    console.log('The publisher started streaming.');
  },
  error: event => {
    console.log('Publisher error:', event);
  },
}}/>

Prüfen, ob ein Client über Veröffentlichungsfunktionen verfügt

Sobald Sie eine Verbindung zu einer Sitzung hergestellt haben, können Sie überprüfen, ob der Client Daten veröffentlichen kann. Legen Sie eine Referenz auf das OTSession-Objekt fest und rufen Sie dessen getCapabilites() Methode in der sessionConnected Ereignisbehandler. Diese Methode gibt ein Promise zurück, das ein Objekt enthält, welches ein canPublish Eigenschaft. Sie können dann auf der Grundlage dieses Wertes eine bedingte Veröffentlichung vornehmen:

import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher, OTSubscriber} from 'opentok-react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = 'your API key';
    this.sessionId = 'a session ID';
    this.token = 'a valid token';
    this.state = {canPublish: false};

    this.sessionEventHandlers = {
      sessionConnected: event => {
        this.connectionCount++;
        this.session.getCapabilities().then(capabilities => {
          this.setState({canPublish: capabilities.canPublish});
        });
      },
    };
  }

  render() {
    return (
      <View
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          ref={instance => {
            this.session = instance;
          }}
          eventHandlers={this.sessionEventHandlers}>
          {this.state.canPublish ? (
            <OTPublisher/>
          ) : null}
          <OTSubscriber/>
        </OTSession>
      </View>
    );
  }
}

export default App;

Um zu veröffentlichen, muss der Client eine Verbindung zur Sitzung mit einem Token herstellen, dem ein Rolle die die Veröffentlichung unterstützt.

Festlegen der vom Herausgeber verwendeten Kamera

Sie können den Herausgeber die rückwärtige Kamera des Geräts verwenden lassen, indem Sie eine properties der OTPublisher-Komponente und das Setzen der cameraPosition Eigenschaft dieses Objekts auf "back":

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

Beachten Sie, dass Sie auch einen Bildschirmfreigabe-Stream veröffentlichen können – bei dem die Quelle der Bildschirm des Clients ist und nicht eine Kamera. Weitere Informationen finden Sie unter Bildschirmfreigabe.

Verhindern, dass ein Publisher Daten an eine Sitzung überträgt

Sie können das Streaming des Publishers in die Sitzung unterbinden, indem Sie ihn aushängen (d. h. aus der übergeordneten OTSession-Komponente entfernen). Der folgende Code hebt beispielsweise die Veröffentlichung eines Streams nach 30 Sekunden auf:

import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher} from 'opentok-react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = 'your-api-key';
    this.sessionId = 'valid-session-id';
    this.token = 'valid-token';
    this.publisherOptions = {
      publishCaptions: true,
      publishVideo: true,
      publishAudio: false,
    };
    this.state = {
      publishing: true,
    };
    this.publisherEventHandlers = {
      streamCreated: event => {
        setTimeout(
          function () {
            console.log(10);
            this.setState({publishing: false});
          }.bind(this),
          10000,
        );
      },
    };
  }

  render() {
    return (
      <View>
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          {this.state.publishing ? (
            <OTPublisher
              eventHandlers={this.publisherEventHandlers}
              ref={instance => {
                this.publisher = instance;
              }}
            />
          ) : null}
        </OTSession>
      </View>
    );
  }
}

export default App;

Beachten Sie, dass Sie die Übertragung von Video oder Audio einzeln unterbrechen können (während die Veröffentlichung weiterhin läuft). Weitere Informationen finden Sie unter Einstellen von Audio und Video.

Erkennen, wenn ein veröffentlichter Stream eine Sitzung verlässt

Das OTPublisher-Objekt sendet eine streamDestroyed Ereignis, wenn das Streaming zur Sitzung beendet wird:

<OTPublisher
  eventHandlers={{
    streamDestroyed: function() {
      console.log('The publisher stopped streaming.');
    },
  }}
/>

Einstellen der Videoauflösung eines Streams

Um eine empfohlene Videoauflösung für einen veröffentlichten Stream festzulegen, setzen Sie die resolution Eigenschaft der properties Stütze, die Sie in die OTPublisher Komponente:

<OTPublisher
  properties={{
    resolution: '320x240',
    // other properties
  }}
/>

Die resolution ist ein String, der die gewünschte Auflösung des Videos angibt. Das Format des Strings ist _width_x_height, wobei Breite und Höhe in Pixeln angegeben werden. Gültige Werte sind „1920x1080“, „1280x720“, „640x480“ und „320x240“. Das veröffentlichte Video verwendet die gewünschte Auflösung nur, wenn die Client-Konfiguration diese unterstützt. Einige Geräte und Clients unterstützen nicht alle diese Auflösungseinstellungen.

Anmerkung: Siehe die 1080p-Entwicklerhandbuch für Überlegungen zur Verwendung der 1080p-Auflösung.

Einstellen der Bildrate eines Streams

Um eine empfohlene Videoauflösung für einen veröffentlichten Stream festzulegen, setzen Sie die frameRate Eigenschaft der properties Stütze, die Sie in die OTPublisher Komponente:

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

Stellen Sie den Wert auf die gewünschte Bildrate des Videos in Bildern pro Sekunde ein. Gültige Werte sind 30, 15, 7 und 1.

Für Sitzungen, bei denen der OpenTok Media Router verwendet wird (Sitzungen mit dem Medienbetrieb (auf „routed“ gesetzt), führt eine proportionale Verringerung der Bildrate zu einer Verringerung der maximalen Bandbreite, die der Stream nutzen kann. Allerdings wird in einer Sitzung mit dem Medienbetrieb auf "Relayed" eingestellt ist, wird durch die Verringerung der Bildrate die Bandbreite des Streams nicht verringert.

Einstellung der maximalen Bitrate für einen Stream

Sie können die maximale Bitrate für einen veröffentlichten Stream festlegen. Die Einstellung der Bitrate kann dazu beitragen, den Bandbreitenverbrauch zu reduzieren, wenn ein Benutzer über eine gebührenpflichtige Verbindung verbindet. Siehe diese Dokumentation.

Abrufen von Statistiken über den Stream eines Verlegers

Der OTP-Verlag audioNetworkStats und audioNetworkStats Ereignisse liefern ein Array von Objekten, die die aktuellen Audio- oder Videostatistiken für den Herausgeber definieren. Für einen Verleger in einer gerouteten Sitzung (eine, die die OpenTok Media Router), enthalten diese Ereignis-Arrays jeweils ein Objekt, das die Statistiken für die Audio- oder Videodaten definiert, die an den OpenTok Media Router gesendet werden. In einer weitergeleiteten Sitzung enthält das Array ein Objekt für jeden Abonnenten des veröffentlichten Streams. Jedes Objekt im Array verfügt über die folgenden Eigenschaften:

  • videoBytesSent — Die Gesamtzahl der gesendeten Audio- und Video-Bytes
  • videoPacketsSent — Die Gesamtzahl der gesendeten Audio- und Videopakete
  • videoPacketsSent — Die Gesamtzahl der verlorenen Audio- und Videopakete

Außerdem enthält jedes Objekt im Array für einen Verleger in einer weitergeleiteten Sitzung die folgenden zwei Eigenschaften:

  • connectionId — Die eindeutige ID der Verbindung des abonnierenden Clients, die mit der connectionId Eigenschaft der connectionCreated Ereignis für die Verbindung dieses Kunden.

  • subscriberId - Die eindeutige ID des Teilnehmers.

Der folgende Code protokolliert diese Statistiken für den Stream des Herausgebers jede Sekunde:

<OTPublisher
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('publisher audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('publisher videoNetworkStats event', event);
    },
  }}
/>

Um detailliertere Stream-Statistiken zu erhalten, verwenden Sie die OTPublisher.getRtcStatsReport() Methode. Der Aufruf dieser Methode führt dazu, dass die OTPublisher-Instanz eine rtcStatsReport Veranstaltung:

<OTPublisher
  eventHandlers={{
    streamCreated: event => {
      console.log('publisher streamCreated', event);
      setTimeout(() => this.publisher.getRtcStatsReport(), 12000)
    },
    rtcStatsReport: event => {
      console.log('publisher rtcStatsReport event', event);
    },
  }}
/>

Für einen Publisher in einer gerouteten Sitzung enthält das Event-Array ein Objekt, das die Statistiken des an den OpenTok Media Router gesendeten Streams definiert. In einer weitergeleiteten Sitzung enthält das Array ein Objekt, das die RTC Stats Reports für jeden Teilnehmer des veröffentlichten Streams definiert. Jedes Objekt im Array hat eine jsonArrayOfReports Eigenschaft, die die Daten enthält. Die Struktur des JSON-Arrays ähnelt dem Format des in Webbrowsern implementierten RtcStatsReport-Objekts (siehe die Mozilla-Dokumentation). Siehe auch diese W3C-Dokumentation.

Filter und Effekte auf veröffentlichte Videos anwenden

Sie können Videofilter auf veröffentlichte Videos anwenden – siehe dieses Thema.

Einstellen von Hinweisen zu Videoinhalten zur Verbesserung der Videoleistung in bestimmten Situationen

Sie können einen Hinweis auf den Videoinhalt einstellen, um die Qualität und Leistung eines veröffentlichten Videos zu verbessern. Dies kann in bestimmten Situationen nützlich sein:

  • Bei der Veröffentlichung von Videos zur Bildschirmfreigabe, die in erster Linie entweder Text- oder Videoinhalte enthalten.

  • Wenn Sie eine Kamera als Videoquelle verwenden und lieber die Bildrate reduzieren, aber die Auflösung beibehalten möchten, können Sie den Content-Hinweis auf „text“ oder „detail“ setzen. In einer gerouteten Sitzung sendet der Publisher einen Stream in voller Auflösung mit niedriger Bildrate und – sofern die Netzwerkbedingungen dies zulassen – einen Stream in voller Auflösung mit normaler Bildrate. Der OpenTok Media Router leitet einen dieser Streams an die Abonnenten weiter.

Dadurch wird der Client angewiesen, Kodierungs- oder Verarbeitungsmethoden zu verwenden, die für die von Ihnen angegebene Art von Inhalt besser geeignet sind.

Setzen Sie die videoContentHint Eigentum von OTPublisher properties Requisite:

<OTPublisher
  properties={{
    videoContentHint: 'text',
  }}
/>

Stellen Sie den Hinweis für Videoinhalte auf einen der folgenden Werte ein:

  • "" — Es wird kein Hinweis angegeben (Standardeinstellung). Der Veröffentlichungsclient versucht, möglichst genau zu ermitteln, wie der Videoinhalt behandelt werden soll.

  • „Bewegung“ – Die Spur sollte so behandelt werden, als ob sie Videomaterial enthielte, bei dem Bewegung eine wichtige Rolle spielt. Diese Einstellung können Sie beispielsweise für einen Bildschirmfreigabe-Videostream verwenden, der Videomaterial enthält.

  • „Detail“ – Die Spur sollte so behandelt werden, als seien Videodetails besonders wichtig. Diese Einstellung können Sie beispielsweise für einen Bildschirmfreigabe-Videostream verwenden, der Textinhalte, Malereien oder Strichzeichnungen enthält.

  • „Text“ – Der Track sollte so behandelt werden, als ob Textangaben besonders wichtig wären. Diese Einstellung können Sie beispielsweise für einen Video-Stream mit Bildschirmfreigabe verwenden, der Textinhalte enthält.

Bei den Inhaltshinweisen „text“ und „detailed“ versucht der Client, eine hohe Auflösung beizubehalten, auch wenn er dafür die Bildrate des Videos reduzieren muss. Beim Inhaltshinweis „motion“ reduziert der Client die Auflösung, um ein Abfallen der Bildrate zu verhindern.

Weitere Informationen zu diesen Optionen finden Sie in der W3C-Arbeitsentwurf.

Wenn Sie sich mit einer niedrigen Bildrate abfinden können, könnten Sie auch Folgendes in Betracht ziehen: Begrenzung der Bildrate von abonnierten Streams.

Andere Audio- und Videooptionen

Weitere Informationen finden Sie im Entwicklerhandbuch unter Einstellen von Audio und Video.