Personalización de la interfaz de usuario — Web

Estos son los ajustes que puedes realizar para personalizar la interfaz de usuario de los vídeos de OpenTok:

Configuración de la posición inicial y las dimensiones de un vídeo

Al publicar un vídeo, puede especificar el elemento DOM (o su ID) que sustituirá el editor. También puede especificar la anchura y la altura iniciales del editor:

// Replace the first parameter with ID of the target DOM element:
const publisher = OT.initPublisher('myPublisherElementId',
                                 {width:400, height:300});
session.publish(publisher);

También puede ajustar el insertMode propiedad de las opciones que pasas a la OT.initPublisher() método para 'append' Para que el editor se añada como elemento secundario del elemento DOM (contenedor) que especifiques:

const publisherOptions = {
  insertMode: 'append',
  width: 400,
  height: 300
};
const publisher = OT.initPublisher('publisherContainerElementId', publisherOptions);
session.publish(publisher);

Del mismo modo, cuando se suscribe a un flujo, puede especificar el elemento DOM de destino (o su ID). También puede especificar la anchura y la altura iniciales del suscriptor:

const options = {width: 400, height: 300, insertMode: 'append'}
const subscriber = session.subscribe(stream, 'containerElementId', options);

También puede especificar la anchura y la altura iniciales como porcentaje del tamaño del elemento DOM padre:

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%'
};
const publisher = OT.initPublisher(publisherContainerElement, publisherOptions);
session.publish(publisher);

Si no especifica un ID de elemento de reemplazo (o lo establece como nulo), la aplicación añade un nuevo elemento DOM al cuerpo HTML. La anchura predeterminada es de 264 píxeles y la altura predeterminada es de 198 píxeles.

Si desea aplicar varias reglas CSS, aplíquelas al elemento DOM padre (contenedor):

<style>
	#publisherContainer.large
	{ width: 640px; height: 480px; }
	#publisherContainer.small
	{ width:100px; height: 100px; }
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

Para aplicar un tamaño diferente a un vídeo en un dispositivo móvil, utiliza consultas de medios CSS:

<style>
	#publisherContainer
	{ width: 100px; height: 100px; }
	@media screen and (max-width: 650px) {
	#publisherContainer
	{ width: 89px; height: 50px; }
	}
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

Si quieres cambiar el tamaño del vídeo de forma dinámica, configura el insertMode a 'append' y establecer el height y width a '100%'.

Consulte la siguiente sección para obtener información sobre cómo cambiar el tamaño o la posición de un vídeo de editor o de abonado.

Cambiar el tamaño o la posición de un vídeo

El element Una de las propiedades del objeto Publisher o Subscriber es su elemento DOM HTML. Puedes cambiar la posición de este elemento en el DOM HTML y modificar su tamaño editando su style.width y style.height propiedades, igual que harías con cualquier otro elemento del DOM:

document.getElementById("target").appendChild(publisher.element);
publisher.element.style.width = "100px";
publisher.element.style.height = "75px";

Si se especifica el valor inicial width y height del objeto Editor o Suscriptor como un porcentaje (como "100%:), puede cambiar su tamaño redimensionando uno de sus elementos padre. El siguiente ejemplo incluye una función que redimensiona un Publisher:

<script type="text/javascript">
	const publisherOptions = {
		insertMode: "append",
		height: "100%",
		width: "100%"
	}
	const publisher = OT.initPublisher("publisherContainer", publisherOptions);
	session.publish(publisher);

	function resizePublisher() {
		const publisherContainer = document.getElementById("publisherContainer");
		publisherContainer.style.width = "1000px";
		publisherContainer.style.height = "750px";
	}
</script>

<div id="container">
	<div id="publisherContainer"></div>
	<a href="javascript:resizePublisher()">resize</a>
</div>

Véase el apartado anterior, Configuración de las dimensiones iniciales de un vídeo para obtener información sobre la configuración de la posición inicial y las dimensiones de un editor o abonado.

Importante: Si desactivas la interfaz de usuario predeterminada del editor o del suscriptor configurando insertDefaultUI a false Al instanciar el objeto Publisher o Subscriber, el element La propiedad del editor o del suscriptor quedará sin definir. Escucha el videoElementCreated evento y utilizar el element propiedad del objeto de evento que permite acceder al elemento DOM HTML correspondiente al editor o al suscriptor. Véase Acceder directamente al elemento de vídeo para un editor o un suscriptor.

Añadir un nombre a un flujo publicado

Al crear un «Publisher», puedes (si lo deseas) indicar un nombre que se mostrará en el vídeo:

// Replace the first parameter with the target element ID:
const publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

Puedes utilizar este nombre para identificar al cliente.

No introduzcas datos personales en el campo «nombre» del editor. — El nombre del editor puede quedar visible para los demás participantes de la sesión y también puede aparecer en la herramienta Inspector y en los registros internos de Vonage, por lo que nunca debes utilizar información confidencial o personal sin cifrar en el nombre del editor. Consulta las mejores prácticas de seguridad.

Tenga en cuenta que también puede añadir metadatos sobre el cliente al crear un token. Este nombre no se muestra automáticamente en el vídeo. Sin embargo, al añadir los datos al crear un token, puede añadir información de forma más segura (ya que los tokens se crean en el servidor, no en el cliente. Para más información, consulte Creación de un token.

Los clientes pueden optar por ocultar el nombre en la vista de editor o de suscriptor. Consulte la siguiente sección.

Mostrar u ocultar el nombre en un vídeo

Al publicar una retransmisión, puedes indicar un nombre que se mostrará en el vídeo (consulta la sección anterior).

Al crear un Editor, puede especificar si el nombre se muestra en el vídeo del Editor, configurando la opción style.nameDisplayMode propiedad de las opciones que pasas a la OT.initPublisher() método:

// Replace the first parameter with the target element ID:
const publisher = OT.initPublisher("myPublisher",
  {
    name: "John",
    style: { nameDisplayMode: "off" }
  });
session.publish(publisher);

El style.nameDisplayMode Esta propiedad se puede establecer en uno de estos tres valores:

  • "auto" - El nombre se muestra cuando se visualiza el flujo por primera vez y cuando el usuario pasa el ratón por encima del vídeo (por defecto).
  • "off" - El nombre no aparece.
  • "on" - Aparece el nombre.

Una vez creado el Publisher, puedes cambiar el modo de visualización del nombre llamando a la función setStyle() del objeto Editor. (Véase el método documentación para la Publisher.setStyle() método).

Cuando se suscribe a un flujo, puede especificar si el nombre se muestra en el vídeo Suscriptor, configurando el parámetro style.nameDisplayMode propiedad de las opciones que pasas a la Session.subscribe() método:

// Replace the first two parameters with the stream and target element ID:
const subscriber = session.subscribe(stream,
  "mySubscriber",
  {
    style: { nameDisplayMode: "off" }
  });

Una vez creado el abonado, puede cambiar el modo de visualización del nombre llamando a la función setStyle() del objeto Suscriptor. (Véase el método documentación para la Subscriber.setStyle() método).

Mostrar u ocultar el botón de silenciar el audio

De forma predeterminada, la interfaz de usuario de un emisor o un receptor incluye un botón para silenciar el audio. En el caso de un emisor, el usuario puede hacer clic en él para activar o desactivar el micrófono. En el caso de un receptor, el usuario puede hacer clic en él para activar o desactivar el altavoz.

Cuando publique un flujo, puede especificar si se muestra el botón de silencio pasando un parámetro style.buttonDisplayMode propiedad en el OT.initPublisher() método:

const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  {
     name: 'John',
     style: {buttonDisplayMode: 'on'}
  }
);
session.publish(publisher);

El style.buttonDisplayMode Esta propiedad se puede establecer en uno de estos tres valores:

  • "auto" — El botón de silencio aparece cuando se muestra la transmisión por primera vez y cuando el usuario pasa el ratón por encima del vídeo (configuración predeterminada).
  • "off" — No aparece el botón de silencio.
  • "on" — Aparece el botón de silencio.

Del mismo modo, al suscribirte a una transmisión, puedes especificar si se muestra el altavoz silenciado pasando un style.buttonDisplayMode propiedad en el Session.subscribe() método:

const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  {
     style: {buttonDisplayMode: 'on'}
  }
);

Una vez que hayas creado el editor o el suscriptor, puedes cambiar el modo de visualización del botón de silencio llamando a la función setStyle() método del objeto Publisher o del objeto Subscriber. (Consulta la documentación de Publisher.setStyle() y Subscriber.setStyle().)

Ajustar el recorte de vídeo y el letterboxing

Puede especificar el recorte o el buzón del vídeo de un editor o abonado configurando la opción fitMode de las opciones que introduzca en OT.initPublisher() o Session.subscribe(). Introduce una de las dos cadenas siguientes:

  • "cover" — El vídeo se recorta si sus dimensiones no coinciden con las del elemento DOM. Esta es la configuración predeterminada para los vídeos que publican imágenes de una cámara.
  • "contain" - El vídeo aparece en buzón si sus dimensiones no coinciden con las del elemento DOM. Esta es la configuración predeterminada para los vídeos de pantalla compartida.

Por ejemplo, el siguiente código inicializa un editor con el elemento de vídeo letterboxed:

const publisher = OT.initPublisher("publisher-element-id",
  {fitMode: "contain"});

El siguiente código se suscribe a un flujo con el elemento de vídeo recortado:

const subscriber = session.subscribe(stream,
  "subscriber-element-id",
  {fitMode: "cover"});

Cómo obtener una imagen fija de un vídeo

El siguiente código captura y muestra una imagen estática del vídeo Publisher:

const imgData = publisher.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

El siguiente código captura y muestra una imagen estática de un vídeo de abonado:

const imgData = subscriber.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

Configurar una imagen para que se muestre en modo solo audio

Puedes utilizar el backgroundImageURI estilo de un suscriptor para configurar la imagen que se mostrará cuando no haya vídeo. El valor que establezcas puede ser la URL de una imagen en Internet. También puede ser un data: como, por ejemplo, la que se obtiene con la función getImgData() método del objeto Subscriber (véase el sección anterior).

El siguiente código establece la imagen de fondo del Suscriptor. Cuando la llamada a Session.subscribe() se establece la imagen de fondo. Si hay un flujo de vídeo, el fondo se establece en una imagen estática capturada del vídeo del abonado; de lo contrario, se establece en una imagen cargada desde una URL web:

const subscriber = session.subscribe(event.stream, 'subscriberElement', function(error) {
  if (error) {
    console.log(error.message)'
    return;
  }
  if (subscriber.stream.hasVideo) {
    const imgData = subscriber.getImgData();
    subscriber.setStyle('backgroundImageURI', imgData);
  } else {
    subscriber.setStyle('backgroundImageURI',
      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3Crect width="1" height="1" fill="%23f4eadf"/%3E%3C/svg%3E'
    );
  }
});

Si no se establece una imagen de fondo para un suscriptor, cuando no haya ningún vídeo, se mostrarán las iniciales de la transmisión, siempre que el editor de la transmisión las haya establecido al inicializarla (véase Inicialización de un editor).

Puede eliminar el fondo actual pasando ninguna imagen, por ejemplo: subscriber.setStyle('backgroundImageURI', null). Se mostrarán las iniciales si se han configurado previamente.

Ajuste de la interfaz de usuario en función de los niveles de audio

Distribución de los objetos «Publisher» y «Subscriber» audioLevelUpdated eventos que se producen periódicamente para informar del nivel de audio. Puedes utilizar estos eventos para mostrar un indicador de nivel de audio. También puedes utilizarlos para detectar los altavoces activos en una sesión.

El siguiente ejemplo ajusta el valor de un elemento de contador que muestra el volumen de un abonado. El código ajusta el audioLevelDisplayMode estilo a 'off', lo que desactiva el medidor de nivel de audio predeterminado que se muestra en el Subscriber. Ten en cuenta que el nivel de audio se ajusta de forma logarítmica y se aplica una media móvil:

subscriber.setStyle('audioLevelDisplayMode', 'off');
const movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  const logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('subscriberMeter').value = logLevel;
});

El ejemplo supone que existe un elemento HTML medidor con el ID "subscriberMeter".

Ten en cuenta que, en el modo solo audio, los elementos DOM de tipo «Publisher» o «Subscriber» muestran por defecto un indicador de volumen (en la esquina superior derecha del elemento). Puedes desactivar este elemento predeterminado de la interfaz de usuario y mostrar tu propio medidor de volumen. Consulta el siguiente tema, Ajuste de la interfaz de usuario cuando el vídeo está activado o desactivado.

También puede utilizar la función audioLevelUpdated para determinar cuándo el audio de un editor o suscriptor es lo suficientemente alto durante el tiempo suficiente para etiquetar al participante como que ha empezado a hablar. O, si el audio ha estado en silencio durante el tiempo suficiente, puede identificar al participante como que ha dejado de hablar:

const subscriber = session.subscribe(event.stream);

SpeakerDetection(subscriber, function() {
  console.log('started talking');
}, function() {
  console.log('stopped talking');
});

const SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  const activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    const now = Date.now();
    if (event.audioLevel > 0.2) {
      if (!activity) {
        activity = {timestamp: now, talking: false};
      } else if (activity.talking) {
        activity.timestamp = now;
      } else if (now- activity.timestamp > 1000) {
        // detected audio activity for more than 1s
        // for the first time.
        activity.talking = true;
        if (typeof(startTalking) === 'function') {
          startTalking();
        }
      }
    } else if (activity && now - activity.timestamp > 3000) {
      // detected low audio activity for more than 3s
      if (activity.talking) {
        if (typeof(stopTalking) === 'function') {
          stopTalking();
        }
      }
      activity = null;
    }
  });
};

(En lugar de registrar la información en la consola, tu aplicación podría modificar un elemento de la interfaz de usuario cuando el usuario empiece y deje de hablar.)

Visualización de un elemento de interfaz de usuario personalizado cuando el audio del abonado está bloqueado

Algunos navegadores bloquean automáticamente la reproducción de audio, requiriendo un click antes de que comience la reproducción de audio para los abonados. Estos navegadores incluyen Safari, Firefox 66+ y Chrome 71+.

El objeto «Subscriber» muestra un botón de reproducción de audio si la reproducción de audio está bloqueada. Puedes desactivar el botón de reproducción de audio predeterminado del «Subscriber» y mostrar tu propio elemento de interfaz de usuario en el que el usuario hará clic para iniciar la reproducción de audio.

Para desactivar la visualización del botón predeterminado de reproducción de audio, configura el style.audioBlockedDisplayMode propiedad del options del Session.subscribe() método):

const subscriberOptions = {
    style: { audioBlockedDisplayMode: "off" }
  };
const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

Añadir escuchadores de eventos para el audioBlocked y audioUnblocked enviados por el suscriptor para mostrar y ocultar el elemento de interfaz de usuario personalizado (que indica al usuario que haga clic para reproducir el audio):

subscriber.on({
  audioBlocked: function(event) {
    // display custom UI
  },
  audioUnblocked: function(event) {
    // hide custom UI
  }
});

Cuando el usuario haga clic en tu elemento de interfaz de usuario personalizado, llama a la función OT.unblockAudio() método:

customElement.addEventListener('click', async () => {
  try {
    await OT.unblockAudio();
  } catch (err) {
    console.error('Unblocking audio failed.', err);
    return;
  }
  console.log('Unblocked audio successfully.');
});

Ajuste de la interfaz de usuario cuando el vídeo está activado o desactivado

Adaptación de la interfaz de usuario en función de los eventos de los suscriptores

Un objeto Suscriptor envía los siguientes eventos relacionados con la activación o desactivación del vídeo para el flujo del suscriptor:

  • videoEnabled — Se envía cuando se ha activado el vídeo después de haberlo desactivado previamente.
  • videoDisabled — Se envía cuando se ha desactivado el vídeo. El reason del objeto de evento indica por qué se ha desactivado el vídeo. (Este objeto de evento es un Evento VideoEnabledChangedEvent objeto.)
  • videoDisableWarning — Se envía cuando el OpenTok Media Router detecta que la calidad de la transmisión se ha deteriorado y que el vídeo se desactivará si la calidad sigue empeorando. Si la calidad sigue empeorando, el suscriptor desactiva el vídeo y envía un videoDisabled evento. Este evento también puede activarse al utilizar la función de alternativa de audio del editor si la calidad de la transmisión del editor se ve reducida. Consulte el Guía para desarrolladores sobre soluciones alternativas de audio.
  • videoDisableWarningLifted - El vídeo se ha activado después de que anteriormente estuviera desactivado.

El videoDisableWarning y videoDisableWarningLifted sólo están disponibles en las sesiones que utilizan la función OpenTok Media Router (sesiones con el modo de medios configurado en «enrutado»), salvo que se utilice el Función de alternativa de audio del editor, donde los eventos estarán disponibles en sesiones en directo o en diferido.

Por defecto, el Suscriptor muestra un indicador de advertencia de vídeo desactivado y un indicador de vídeo desactivado cuando el videoDisableWarning y videoDisableWarningLifted se envían los eventos. Puede desactivar la visualización por defecto del indicador configurando la opción videoDisabledDisplayMode configuración de estilo del objeto «Subscriber».

En el siguiente ejemplo se utiliza la función videoDisabledDisplayMode para que el indicador de advertencia de vídeo desactivado y un indicador de vídeo desactivado parpadeen cada un segundo cuando el videoDisableWarning y videoDisableWarningLifted se envían los eventos:

const indicatorBlinker = new IndicatorBlinker(subscriber);

const IndicatorBlinker = function(subscriber) {
  const timer;
  const indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  const start = function() {
    subscriber.setStyle('videoDisabledDisplayMode', 'on');
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function() {
      if (indicatorOn) {
        subscriber.setStyle('videoDisabledDisplayMode', 'off');
      } else {
        subscriber.setStyle('videoDisabledDisplayMode', 'on');
      }
      indicatorOn = !indicatorOn;
    }, 1000);
    indicatorOn = true;
  };
  const stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

También puede ajustar el videoDisabledDisplayMode estilo a 'off' y añada sus propios elementos de interfaz de usuario basados en el videoDisableWarning, videoDisabled, videoDisableWarningLiftedy videoEnabled eventos.

Ajuste de la interfaz de usuario en función de los eventos de Publisher

En opción alternativa de audio del editor Si está activada, el objeto Publisher emite estos eventos en respuesta a los cambios en las condiciones de calidad:

  • videoDisableWarning - Se envía cuando el Editor determina que la calidad del flujo se ha degradado y el vídeo se desactivará si la calidad se degrada más.
  • videoDisableWarningLifted — Se envía cuando el editor determina que la calidad de la transmisión ha mejorado hasta el punto de que el vídeo que se va a desactivar ya no supone un riesgo inmediato.
  • videoDisabled — Se envía cuando el editor determina que la calidad de la transmisión se ha deteriorado y se ha desactivado el transporte de vídeo saliente. Nota: aunque el vídeo esté desactivado, el editor sigue mostrando el vídeo del editor (como la imagen de la cámara) en la interfaz de usuario del cliente de publicación.
  • videoEnabled — Enviado con motivo: quality cuando el editor determine que la calidad de la transmisión ha mejorado y se haya reactivado el transporte de vídeo saliente.

Por defecto, el Editor muestra iconos cuando el videoDisableWarning y videoDisabled ocurren los acontecimientos.

El style propiedad del options parámetro para OT.initPublisher() ahora incluye un videoDisabledDisplayMode propiedad. Puedes configurar la videoDisabledDisplayMode La asignación de esta propiedad a uno de los siguientes valores de cadena determina cómo se muestran los elementos predeterminados de la interfaz de usuario:

  • auto (por defecto) — Los iconos se muestran automáticamente cuando el vídeo está desactivado o corre el riesgo de desactivarse debido a una mala calidad de la transmisión.
  • off — Los iconos no se muestran. Puedes mostrar tus propias notificaciones en la interfaz de usuario en función de los eventos descritos anteriormente.
  • on — Los iconos aparecen automáticamente cuando el vídeo se desactiva o corre el riesgo de desactivarse debido a una mala calidad de la transmisión.

Por ejemplo, el siguiente código desactiva los elementos predeterminados de la interfaz de usuario relacionados con el vídeo y gestiona los eventos correspondientes (para que puedas proporcionar tus propias notificaciones en la interfaz de usuario):

// Enabled
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  },
  style: {
    videoDisabledDisplayMode: 'off',
  }
});

publisher.on({
  videoDisableWarning: () => {
    // Custom action — for example, add custom UI notification
  },
  videoDisableWarningLifted: () => {
    // Custom action — for example, remove custom UI notification
  },
  videoDisabled: () => {
    // Custom action — for example, add custom UI notification
  },
  videoEnabled: () => {
    // Custom action — for example, remove custom UI notification
  },
});

También puede ajustar el videoDisabledDisplayMode estilo de forma dinámica llamando a la función Publisher.setStyle() método:

publisher.setStyle('videoDisabledDisplayMode', 'off');

// Alternately:

publisher.setStyle({
  videoDisabledDisplayMode: 'off',
  // other styles ...
});

Ocultar todos los controles integrados de la interfaz de usuario para los vídeos

Los objetos Publisher y Subscriber incluyen los siguientes controles de interfaz de usuario integrados:

  • Visualización del nombre del flujo
  • El indicador de nivel de audio
  • El botón de silenciar el audio
  • El indicador de vídeo desactivado y el icono de advertencia de vídeo desactivado (solo para suscriptores)

Puede desactivar todas estas opciones configurando la opción showControls propiedad a false en el properties que se pasa al parámetro OT.initPublisher() o el método Session.subscribe() método.

Por ejemplo, el siguiente código crea un objeto Publisher que no incluye controles de interfaz de usuario incorporados:

const publisherOptions = {
     showControls: false
  };
const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  publisherOptions
);

El siguiente código crea un objeto «Subscriber» que no incluye controles de interfaz de usuario integrados:

const subscriberOptions = {
     showControls: false
  };
const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

Puedes controlar la visualización de los controles individuales de la interfaz de usuario dejando el showControls con el valor true (la opción predeterminada); en ese caso, consulta estos temas:

Acceder directamente al elemento «Video» para un editor o un suscriptor

Puede desactivar los elementos predeterminados de la interfaz de usuario para un Editor o Abonado y acceder al HTML Video directamente. Al publicar o suscribirse a un flujo, establezca el elemento insertDefaultUI propiedad a false al llamar a la OT.initPublisher() o Session.subscribe() método. Si configuras esta opción en false, OpenTok.js no inserta ningún elemento de interfaz de usuario predeterminado en el DOM HTML, y el element La propiedad del objeto Publisher o Subscriber no está definida. En su lugar, el elemento Publisher envía un videoElementCreated situación en la que el Video Se crea el elemento. El element La propiedad del objeto de evento es una referencia al Video elemento. Añádelo al DOM HTML para mostrar el vídeo.

El siguiente código inicializa un editor e inserta su Video en el DOM de HTML:

const publisher = OT.initPublisher({insertDefaultUI: false});
publisher.on('videoElementCreated', function(event) {
  document.getElementById('publisher-video-parent-id').appendChild(event.element);
});

El siguiente código se suscribe a un flujo e inserta su Video en el DOM de HTML:

const subscriber = session.subscribe(stream, {insertDefaultUI: false});
subscriber.on('videoElementCreated', function(event) {
  document.getElementById('subscriber-video-parent-id').appendChild(event.element);
});

Si configuras el insertDefaultUI propiedad a falseno ponga el targetElement parámetro al llamar a OT.initPublisher() o Session.subscribe(). (Se produce un error).

El elemento de interfaz de usuario por defecto contiene controles de interfaz de usuario, un indicador de carga de vídeo y recorte automático de vídeo o letter-boxing, además del vídeo. Si deja insertDefaultUI ajustado a true (el valor predeterminado), puede controlar la configuración individual de la interfaz de usuario mediante la opción fitMode, showControlsy style opciones. Consulte los demás temas de esta página.

También puedes acceder al objeto MediaStream de un suscriptor (y utilizarlo en tu propio Video elemento). Véase la siguiente sección.

Acceso a los objetos MediaStream para editores y suscriptores a través de la API «Media Stream Available»

Se puede acceder al objeto MediaStream escuchando el comando mediaStreamAvailable enviado por editores y suscriptores. La Media Stream Available API está disponible desde la versión 2.27.7; las versiones anteriores deberán utilizar la API Acceso a objetos MediaStream para abonados anteriores a la versión 2.27.7 guía enlazada más abajo.

Notas importantes:

  • Los objetos Publisher y Subscriber deben seguir utilizándose para controlar todos los aspectos de la API de vídeo, como el silenciamiento, la desconexión, etc.
  • El audio se reproducirá tanto a través del elemento personalizado como del widget «Publisher» o «Subscriber». Los elementos personalizados deben silenciarse para evitar el eco.
  • No aparecerán los elementos de OpenTok para Chrome, como la silueta y los controles de vídeo.
  • El objeto MediaStream tiene en cuenta cualquier cambio provocado por el enrutamiento adaptativo de medios.

A continuación se ofrece un ejemplo de ganchos de contexto de sesión, suscriptor y editor de React que utilizan la Media Stream Available API. Aunque en el ejemplo se utiliza React, la Media Stream Available API es independiente del framework. Tenga en cuenta que el oyente debe adjuntarse inmediatamente después de que se creen el editor y los suscriptores, no como parte de la devolución de llamada.

Componente de la sesión

const [subscriberStream, setSubscriberStreams] = useState([]);
  async function subscribe(stream, session, options = {}) {
    if (session) {
      const subscriber = session.current.subscribe(stream, null, { ...options, insertDefaultUI: false });
      subscriber.on('mediaStreamAvailable', ({ mediaStream }) => {
        setSubscriberStreams((prev) => [...prev, { mediaStream, subscriber }]);
      });
    }
  }

Componente de suscriptor

import { useEffect, useRef } from 'react';

    const Subscriber = ({ subscriber, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={subscriber.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Subscriber;

Componente de publicación

import { useEffect, useRef } from 'react';

    const Publisher = ({ publisher, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={publisher.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Publisher;

Acceso a objetos MediaStream para abonados anteriores a la versión 2.27.7

Ten en cuenta que la API «Media Stream Available», tal y como se ha descrito anteriormente, es el método recomendado para acceder a los MediaStreams. Esta solución alternativa solo es necesaria en las versiones de OpenTok anteriores a la 2.27.7.

Puedes acceder al objeto `MediaStream` que utiliza un suscriptor. El objeto `HTMLVideoElement` (en el videoElementCreated enviado por el Suscriptor, descrito en la sección anterior), tiene un evento srcObject propiedad. Este es el objeto MediaStream para el flujo de audio-vídeo del suscriptor. Puedes utilizar ese objeto MediaStream como MediaStream de origen para otro Video (como su elemento srcObject propiedad):

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
  });
});

En una sesión enrutada que utiliza Enrutamiento adaptativo de contenidos multimediaEl MediaStream de un abonado puede cambiar cuando la sesión pasa de flujos retransmitidos a flujos enrutados (véase este enlace). Artículo de la base de conocimientos del Centro de ayuda). Añade un detector de eventos para el play Evento del elemento «Video» de un objeto «Subscriber» para obtener la instancia actualizada de «MediaStream»:

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
    myVideoElement.play()
    event.element.addEventListener('play', () => {
      // The MediaStram has changed
      myVideoElement.srcObject = event.element.srcObject;
      myVideoElement.play();
    });
  });
});