Componente de configuração de hardware

O componente “Configuração de hardware” oferece uma interface de usuário para clientes que utilizam o [OpenTok.js] 1 biblioteca para selecionar a câmera e o microfone. O cliente pode usar a câmera e o microfone para publicar um fluxo em uma sessão do OpenTok.js .

Você pode adicionar uma versão pré-configurada do componente de configuração de hardware à sua página da web usando a seguinte tag de script:

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

Você também pode criar (e modificar) o componente a partir do código-fonte no GitHub.

Como usar o componente

Utilize o componente junto com o [OpenTok.js] 1 SDK.

createOpentokHardwareSetupComponent()

Para inicializar o componente “Configuração de Hardware”, chame a função createOpentokHardwareSetupComponent() método. Esse método recebe os seguintes parâmetros:

• targetElement -- O elemento DOM no qual inserir o componente de configuração de hardware. (Consulte a propriedade `insertMode` do próximo parâmetro, `options`.)

• options -- Um argumento opcional que especifica como o componente será inserido no DOM HTML, em relação ao parâmetro `targetElement`. Você pode definir esse parâmetro com um dos seguintes valores:

  • "replace" -- O componente substitui o conteúdo do `targetElement`. Essa é a configuração padrão.
  • "after" -- O componente é um novo elemento inserido após o targetElement no DOM HTML. (Tanto o componente quanto o targetElement têm o mesmo elemento pai .)
  • "before" -- O componente é um novo elemento inserido antes do targetElement no DOM HTML. (Tanto o componente quanto o targetElement têm o mesmo elemento pai .)
  • "append" -- O componente é um novo elemento adicionado como filho do targetElement. Se houver outros elementos filhos, o componente é anexado como o último elemento filho do targetElement.

• completionHandler -- Uma função que é chamada quando o componente é renderizado na página ou em caso de erro ao chamar o método. Em caso de erro, a esta função é passado um objeto que contém um message propriedade, que pode assumir um dos seguintes valores:

  • "Não há elemento fornecido para posicionar o componente"
  • "Este navegador não é compatível com as APIs getMediaDevices"
  • "Não há dispositivos de áudio ou vídeo disponíveis".

  Quando o componente é renderizado com sucesso na página, o manipulador de conclusão é chamado sem nenhum objeto de erro.

O método retorna um objeto `HardwareSetup`, que possui os seguintes métodos: audioSource(), videoSource(), e destroy().

Exemplo:

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

Retorna um objeto que representa a fonte de áudio selecionada. Esse objeto possui um deviceId propriedade, que é o ID exclusivo do dispositivo de áudio (uma string). Você pode armazenar essa string em um cookie para uso em uma sessão futura. Você pode passar o objeto de fonte de áudio ou seu deviceId propriedade como um valor para o audioSource propriedade do objeto `properties` passado para o OT.initPublisher() método.

Exemplo:

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

HardwareSetup.videoSource()

Retorna um objeto que representa a fonte de vídeo selecionada. Esse objeto possui um deviceId propriedade, que é o ID exclusivo do dispositivo de vídeo (uma string). Você pode armazenar essa string em um cookie para uso em uma sessão futura. Você pode passar o objeto de fonte de vídeo ou seu deviceId propriedade como um valor para o videoSource propriedade do objeto `properties` passado para o OT.initPublisher() método.

Exemplo:

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

HardwareSetup.destroy()

Fecha o componente de configuração de hardware (se estiver visível) e o remove do DOM HTML.

Exemplo:

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