Componente de configuración del hardware

El componente Hardware Setup proporciona una interfaz de usuario para clientes que utilizan el [OpenTok.js] 1 biblioteca para seleccionar la cámara y el micrófono. El cliente puede utilizar la cámara y el micrófono para publicar una transmisión en una sesión de OpenTok.js .

Puede añadir una versión prediseñada del componente de configuración de hardware a su página web con la siguiente etiqueta de script:

<script src="https://static.opentok.com/hardware-setup/v1/js/opentok-hardware-setup.min.js"></script>

También puede crear (y modificar) el componente a partir del archivo código fuente en GitHub.

Utilización del componente

Utiliza el componente junto con el [OpenTok.js] 1 SDK.

createOpentokHardwareSetupComponent()

Para inicializar el componente Hardware Setup, llame a la función createOpentokHardwareSetupComponent() método. Este método toma los siguientes parámetros:

• targetElement -- El elemento DOM en el que se insertará el componente de configuración de hardware. (Véase la propiedad `insertMode` del siguiente parámetro, `options`.)

• options -- Un argumento opcional que especifica cómo se insertará el componente en el DOM HTML, en relación con el parámetro `targetElement`. Puedes establecer este parámetro en uno de los siguientes valores:

  • "replace" -- El componente reemplaza el contenido del targetElement. Por por defecto.
  • "after" -- El componente es un nuevo elemento que se inserta después del «targetElement» en el DOM HTML. (Tanto el componente como el «targetElement» tienen el mismo elemento padre .)
  • "before" -- El componente es un nuevo elemento insertado antes del targetElement en el DOM HTML. (Tanto el componente como el targetElement tienen el mismo elemento padre padre).
  • "append" -- El componente es un nuevo elemento añadido como hijo del targetElement. Si hay otros elementos hijos, el componente se añade como el último elemento hijo del targetElement.

• completionHandler -- Una función que se invoca cuando el componente se muestra en la página o cuando se produce un error al llamar al método. En caso de error, a esta función se le pasa un objeto que contiene un message propiedad, que puede adoptar uno de los siguientes valores:

  • "No se proporciona ningún elemento para colocar el componente"
  • "Este navegador no soporta la API getMediaDevices"
  • «No hay dispositivos de audio ni de vídeo disponibles».

  Cuando el componente se renderiza correctamente en la página, se llama al manejador de finalización sin objeto de error.

El método devuelve un objeto HardwareSetup, que tiene los siguientes métodos: audioSource(), videoSource()y destroy().

Ejemplo:

// Replace this with the ID of the target DOM element for the component
var element = document.querySelector('#hardware-setup');

var options = {
  insertMode: 'append' // Or use another insertMode setting.
};

var component = createOpentokHardwareSetupComponent(element, options, function(error) {
  if (error) {
    console.error('Error: ', error);
    element.innerHTML = '<strong>Error getting devices</strong>: '
      error.message;
    return;
  }
  // Add a button to call component.destroy() to close the component.
});

HardwareSetup.audioSource()

Devuelve un objeto que representa la fuente de audio seleccionada. Este objeto tiene un deviceId que es el ID único del dispositivo de audio (una cadena). Puede almacenar esta cadena en una cookie para utilizarla en una sesión futura. Puede pasar el objeto objeto fuente de audio o su deviceId propiedad como valor para el audioSource propiedad del objeto «properties» pasado al OT.initPublisher() método.

Ejemplo:

// component is the object returned by createOpentokHardwareSetupComponent()
var publisherOptions = {
  audioSource: component.audioSource(),
  videoSource: component.videoSource()
};
OT.initPublisher(targetElement, publisherOptions);

HardwareSetup.videoSource()

Devuelve un objeto que representa la fuente de vídeo seleccionada. Este objeto tiene un deviceId que es el identificador único del dispositivo de vídeo (una cadena). Puede almacenar esta cadena en una cookie para utilizarla en una sesión futura. Puede pasar el objeto objeto fuente de vídeo o su deviceId propiedad como valor para el videoSource propiedad del objeto «properties» pasado al OT.initPublisher() método.

Ejemplo:

// component is the object returned by createOpentokHardwareSetupComponent()
var publisherOptions = {
  audioSource: component.audioSource(),
  videoSource: component.videoSource()
};
OT.initPublisher(targetElement, publisherOptions);

HardwareSetup.destroy()

Cierra el componente de configuración de hardware (si está visible) y lo elimina del DOM HTML.

Ejemplo:

// component is the object returned by createOpentokHardwareSetupComponent()
component.destroy();