Componente de configuración del hardware

El componente Hardware Setup proporciona una interfaz de usuario para clientes que utilizan el [OpenTok.js] 1 para seleccionar la cámara y el micrófono. El cliente cliente puede utilizar la cámara y el micrófono para publicar un flujo en una sesión OpenTok.js 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 insertar el componente de configuración de hardware hardware. (Véase la propiedad insertMode del siguiente parámetro, options).

• options -- Un argumento opcional que especifica cómo se insertará el componente insertará en el DOM HTML, en relación con el parámetro targetElement. Puede 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 insertado después del targetElement en el DOM HTML. (Tanto el componente como el targetElement tienen el mismo elemento padre 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 llama cuando el componente 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 tiene un valor message que puede tener 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 o 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 como valor de la propiedad audioSource del objeto de propiedades introducido en el campo 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 como valor de la propiedad videoSource del objeto de propiedades introducido en el campo 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();