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);
  },
}}/>

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();