Veröffentlichen: Grundlagen

In diesem Leitfaden werden die wichtigsten Schritte zur Veröffentlichung eines Streams beschrieben: Erstellen eines Publishers, Starten des Streams in einer Sitzung, sicheres Beenden des Streams und Zerstören der Ressourcen, wenn Sie fertig sind.

Ein Publisher-Objekt wird verwendet, um einen Audio-Video-Stream vom Mikrofon und der Kamera des Systems zur Verwendung in einer Vonage Video-Sitzung zu erfassen.

Sie können auch einen Publisher verwenden, um eine Bildschirmfreigabe Video-Stream.

Initialisierung eines Verlagsobjekts

Die OT.initPublisher() Methode initialisiert und gibt ein Publisher-Objekt zurück. Das Publisher-Objekt stellt die Ansicht eines Videos dar, das Sie veröffentlichen:

var publisher;
var targetElement = 'publisherContainer';

publisher = OT.initPublisher(targetElement, null, function(error) {
  if (error) {
    // The client cannot publish.
    // You may want to notify the user.
  } else {
    console.log('Publisher initialized.');
  }
});

Die OT.initPublisher() erhält drei Parameter:

  • targetElement- (Optional) Legt das DOM-Element fest, das durch das Publisher-Video ersetzt wird.

  • properties- (Optional) Eine Reihe von Eigenschaften, mit denen der Publisher angepasst wird. Die properties Parameter enthält auch Optionen zur Angabe eines vom Herausgeber verwendeten Audio- und Video-Eingabegeräts. Der properties Parameter enthält auch Optionen zur Anpassung des Erscheinungsbildes der Ansicht in der HTML-Seite (siehe Anpassen der Benutzeroberfläche) und wählen Sie, ob Audio und Video veröffentlicht werden sollen (siehe Nur Audio oder Video veröffentlichenWeitere Optionen für Verlage finden Sie in der Dokumentation des Programms properties Parameter des OT.initPublisher() Methode.

  • completionHandler- (Optional) Ein Beendigungshandler, der angibt, ob der Publisher erfolgreich oder mit einem Fehler instanziiert wurde.

Sie können dieses Publisher-Objekt an die Session.publish() Methode, um einen Stream in einer Sitzung zu veröffentlichen.

Vor dem Anruf Session.publish()können Sie dieses Publisher-Objekt verwenden, um das Mikrofon und die Kamera zu testen, die mit dem Publisher verbunden sind.

Die insertMode Eigenschaft der properties Parameter des OT.initPublisher() Methode gibt an, wie das Publisher-Objekt in das HTML-DOM eingefügt wird, und zwar in Bezug auf die targetElement Parameter. Sie können diesen Parameter auf einen der folgenden Werte einstellen:

  • "replace" - Das Publisher-Objekt ersetzt den Inhalt des targetElements. Dies ist der Standard.
  • "after" - Das Publisher-Objekt ist ein neues Element, das nach dem targetElement im HTML-DOM eingefügt wird. (Publisher und targetElement haben beide dasselbe Elternelement).
  • "before" - Das Publisher-Objekt ist ein neues Element, das vor dem targetElement im HTML-DOM eingefügt wird. (Publisher und targetElement haben beide dasselbe Elternelement).
  • "append" - Das Publisher-Objekt ist ein neues Element, das als untergeordnetes Element des targetElements hinzugefügt wird. Wenn es weitere untergeordnete Elemente gibt, wird der Publisher als letztes untergeordnetes Element des targetElements angefügt.

Der folgende Code fügt zum Beispiel ein neues Publisher-Objekt als Kind einer publisherContainer DOM-Element:

// Try setting insertMode to other values: "replace", "after", or "before":
var publisherProperties = {insertMode: "append"};
var publisher = OT.initPublisher('publisherContainer', publisherProperties, function (error) {
  if (error) {
    console.log(error);
  } else {
    console.log("Publisher initialized.");
  }
});

Veröffentlichen eines Streams

Sobald Sie ein Publisher-Objekt und eine SitzungDer nächste Schritt ist die Übergabe an das Sitzungsobjekt, um das Streaming zu starten.

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

<OTSession
  applicationId="your-application-id"
  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, wenn es ein error Veröffentlichung. Einstellen 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);
  },
}}/>

Einstellen einer Präferenz für den Verlagsabbau

Wenn die Bandbreite oder die CPU begrenzt sind, kann die Video-Engine die Bildrate und/oder die Auflösung des Herausgebervideos reduzieren, um sich an die Einschränkungen anzupassen.

Die Degradationspräferenz ist eine Konfigurationseinstellung, mit der dieses Verhalten angepasst werden kann.

Die Entwickler sind für die Definition und Anwendung von Degradationspräferenzen entsprechend ihrem Anwendungsfall und ihren Anforderungen verantwortlich.

Es handelt sich um eine Voreinstellung, d. h. die Video-Engine versucht, die gewählte Voreinstellung zu befolgen, aber es gibt keine Garantie für das Ergebnis.

Diese Einstellung kann sich anders verhalten, wenn Sie skalierbares VideoDie Video-Engine kann beschließen, Ebenen zu entfernen, anstatt die Auflösung zu verringern.

Hinweis auf den Inhalt und Degradationspräferenz dienen unterschiedlichen, aber verwandten Zwecken: Der Inhaltshinweis beschreibt die Art des zu übertragenden Inhalts, während die Degradationspräferenz die Codierungsstrategie steuert. Wenn Sie einen Inhaltshinweis festlegen, bestimmt die Video-Engine automatisch die entsprechende Degradierungspräferenz (z. B. wird bei "Text" automatisch die Auflösung beibehalten). Eine explizit festgelegte Degradationspräferenz setzt diese automatische Auswahl außer Kraft.

Setting the degradation preference

Um die Präferenz für die Degradierung von Verlagen festzulegen, verwenden Sie publisher.setDegradationPreference mit einer der verfügbaren Optionen, die in DegradationPreference:

publisher.setDegradationPreference(DegradationPreference.DegradationPreferenceMaintainResolution);

Die folgenden DegradationPreference Werte verfügbar sind:

  • DegradationPreferenceNotSet: Der Standardwert. Die Video-Engine entscheidet über die optimale Degradierungspräferenz.

  • DegradationPreferenceMaintainFrameRateAndResolution: Die Video-Engine wird versuchen, die Bildrate konstant zu halten und die Auflösung nicht zu verringern.

  • DegradationPreferenceMaintainFrameRate: Die Video-Engine versucht, die Bildrate konstant zu halten, kann aber gegebenenfalls die Auflösung reduzieren.

  • DegradationPreferenceMaintainResolution: Die Video-Engine reduziert die Auflösung nicht, kann aber gegebenenfalls die Bildrate verringern.

  • DegradationPreferenceBalanced: Die Video-Engine versucht, ein Gleichgewicht zwischen der Verringerung der Auflösung und der Bildrate zu erreichen, wenn dies erforderlich ist.

Getting the current degradation preference

Um die aktuell konfigurierte Einstellung für den Verlagsabbau abzurufen, verwenden Sie publisher.getDegradationPreference:

DegradationPreference preference = publisher.getDegradationPreference();

Streaming eines Herausgebers stoppen

Kontrollieren Sie, wer veröffentlichen darf, und stoppen Sie bei Bedarf das Streaming eines Verlegers zu einer Sitzung.

Sie können das Streaming des Publishers in die Sitzung stoppen, indem Sie ihn aus der übergeordneten OTSession-Komponente entfernen (unmounten). Der folgende Code beendet beispielsweise die Veröffentlichung eines Streams nach 30 Sekunden:

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
          applicationId={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 das Senden von Video- oder Audiodateien individuell beenden können (während Sie noch veröffentlichen).

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

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

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

Löschen eines Publishers (Bereinigung)

Sie können einen Publisher löschen, indem Sie seine destroy() Methode. Aufruf von destroy() löscht das Publisher-Objekt und entfernt es aus dem HTML-DOM:

publisher.destroy();