Publicar: Conceptos básicos

Esta guía cubre los pasos esenciales para publicar un flujo: crear un Publisher, iniciar el flujo en una sesión, detenerlo de forma segura y destruir los recursos cuando haya terminado.

Un objeto Editor se utiliza para capturar un flujo de audio y video desde el micrófono y la cámara de los sistemas para su uso en una sesión de Vonage Video.

También puede utilizar un Editor para publicar un compartir pantalla transmisión de vídeo.

Inicialización de un objeto editor

En OT.initPublisher() inicializa y devuelve un objeto Publisher. El objeto Publisher representa la vista de un vídeo que usted publica:

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.');
  }
});

En OT.initPublisher() recibe tres parámetros:

  • targetElement- (Opcional) Define el elemento DOM al que sustituye el vídeo del editor.

  • properties- (Opcional) Conjunto de propiedades que personalizan el Editor. En properties también incluye opciones para especificar un dispositivo de entrada de audio y vídeo utilizado por el editor. La dirección properties también incluye opciones para personalizar el aspecto de la vista en la página HTML (véase Personalizar la interfaz de usuario) y seleccione si desea publicar audio y vídeo (véase Publicar sólo audio o vídeoPara más opciones de editor, consulte la documentación de la función properties parámetro de la OT.initPublisher() método.

  • completionHandler- (Opcional) Un controlador de finalización que especifica si el editor se ha instanciado correctamente o con un error.

Puede pasar este objeto Publisher a la función Session.publish() para publicar un flujo en una sesión.

Antes de llamar Session.publish()puede utilizar este objeto Publisher para probar el micrófono y la cámara conectados al Publisher.

En insertMode propiedad del properties del OT.initPublisher() especifica cómo se insertará el objeto Publisher en el DOM HTML, en relación con el método targetElement parámetro. Puede establecer este parámetro en uno de los siguientes valores:

  • "replace" - El objeto Publisher sustituye el contenido del targetElement. Este es el valor predeterminado.
  • "after" - El objeto Publisher es un nuevo elemento insertado después del targetElement en el DOM HTML. (Tanto el Publisher como el targetElement tienen el mismo elemento padre).
  • "before" - El objeto Publisher es un nuevo elemento insertado antes del targetElement en el DOM HTML. (Tanto el Publisher como el targetElement tienen el mismo elemento padre).
  • "append" - El objeto Publisher es un nuevo elemento que se añade como hijo del targetElement. Si hay otros elementos hijos, el Publisher se añade como último elemento hijo del targetElement.

Por ejemplo, el siguiente código añade un nuevo objeto Publisher como hijo de un objeto publisherContainer Elemento DOM:

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

Publicar un flujo

Una vez que tenga un objeto Publisher y un sesiónEl siguiente paso es pasarlo al objeto de sesión para iniciar la transmisión.

Para publicar un flujo, añada un componente OTPublisher como hijo del objeto OTSession:

<OTSession
  applicationId="your-application-id"
  sessionId="the session ID"
  token="the token">
  <OTPublisher/>
</OTSession>

El publicador inicia el streaming cuando el cliente se conecta a la sesión. El objeto OTPublisher envía un streamCreated cuando comienza a transmitir a la sesión. Envía un evento error si hay un evento error editorial. Establecer un eventHandlers del componente OTPublisher, y establezca la propiedad streamCreated y error de ese objeto a funciones de devolución de llamada:

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

Establecer una preferencia de degradación del editor

Cuando el ancho de banda o la CPU son limitados, el motor de vídeo puede reducir la frecuencia de imagen y/o la resolución del vídeo del editor para ajustarse a las limitaciones.

La preferencia de degradación es un ajuste de configuración que permite modificar este comportamiento.

Los desarrolladores son responsables de definir y aplicar las preferencias de degradación en función de sus casos de uso y requisitos.

Funciona como una preferencia, lo que significa que el motor de vídeo intentará seguir la preferencia seleccionada, pero no hay garantías sobre el resultado.

Esta preferencia puede comportarse de forma diferente cuando se utiliza vídeo escalabledonde el motor de vídeo puede decidir eliminar capas en lugar de degradar la resolución.

Sugerencia de contenido y la preferencia de degradación sirven a propósitos diferentes pero relacionados: La sugerencia de contenido describe el tipo de contenido que se transmite, mientras que la preferencia de degradación controla la estrategia de codificación. Al definir una sugerencia de contenido, el motor de vídeo determina automáticamente la preferencia de degradación adecuada (por ejemplo, "texto" selecciona automáticamente mantener la resolución). Una preferencia de degradación establecida explícitamente anulará esta selección automática.

Setting the degradation preference

Para establecer la preferencia de degradación del editor, utilice publisher.setDegradationPreference con cualquiera de las opciones disponibles en DegradationPreference:

publisher.setDegradationPreference(DegradationPreference.DegradationPreferenceMaintainResolution);

Los siguientes DegradationPreference están disponibles:

  • DegradationPreferenceNotSet: El valor por defecto. El motor de vídeo decidirá la preferencia de degradación óptima.

  • DegradationPreferenceMaintainFrameRateAndResolution: El motor de vídeo intentará mantener constante la frecuencia de imagen y no reducir la resolución.

  • DegradationPreferenceMaintainFrameRate: El motor de vídeo intentará mantener constante la frecuencia de imagen, pero puede reducir la resolución si es necesario.

  • DegradationPreferenceMaintainResolution: El motor de vídeo no reducirá la resolución, pero puede reducir la frecuencia de imagen si es necesario.

  • DegradationPreferenceBalanced: El motor de vídeo intentará alcanzar un equilibrio entre la reducción de la resolución y la velocidad de fotogramas cuando sea necesario.

Getting the current degradation preference

Para recuperar la preferencia de degradación del editor actualmente configurada, utilice publisher.getDegradationPreference:

DegradationPreference preference = publisher.getDegradationPreference();

Impedir que un editor retransmita

Controle quién puede publicar e impida que un editor transmita a una sesión cuando sea necesario.

Puede hacer que el editor deje de transmitir a la sesión desmontándolo (eliminándolo del componente OTSession padre). Por ejemplo, el siguiente código detiene la publicación de un flujo después de 30 segundos:

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;

Tenga en cuenta que puede detener individualmente el envío de vídeo o audio (sin dejar de publicar).

Detectar cuándo un flujo publicado abandona una sesión

El objeto OTPublisher envía un streamDestroyed cuando deja de transmitir a la sesión:

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

Eliminar un editor (limpieza)

Puede eliminar un editor llamando a su destroy() método. Llamada a destroy() borra el objeto Publisher y lo elimina del DOM HTML:

publisher.destroy();