Publicar: Configurações e dispositivos

Use este guia para configurar como capturar e codificar o vídeo e o áudio de saída. Ele aborda permissões e seleção de dispositivos, memorização de dispositivos, modo de orientação da câmera, resolução e taxa de quadros, dicas de conteúdo para movimento ou texto, publicação a partir de fontes alternativas (Canvas, Vídeo, Áudio da Web) e onde encontrar as opções avançadas do Publisher.

Verifique as permissões da câmera e do microfone

Antes que um Publisher possa acessar a câmera e o microfone do cliente, o usuário deve conceder acesso. O objeto Publisher dispara eventos quando o usuário concede ou nega acesso à câmera e ao microfone:

publisher.on({
  accessAllowed: function () {
    // The user granted access to the camera and mic.
  },
  accessDenied: function () {
    // The user denied access to the camera and mic.
  }
});

Ele também dispara eventos quando a caixa de diálogo “Permitir/Negar” é aberta ou fechada:

publisher.on({
  accessDialogOpened: function () {
    // The Allow/Deny dialog box is opened.
  },
  accessDialogClosed: function () {
    // The Allow/Deny dialog box is closed.
  }
});

A editora tem um accessAllowed propriedade que indica se o acesso foi concedido.

Escolha a câmera e o microfone

Escolha qual câmera e qual microfone o Publisher deve usar. Você pode listar os dispositivos e selecionar uma opção nas configurações do Publisher.

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

var audioInputDevices;
var videoInputDevices;
OT.getDevices(function(error, devices) {
  audioInputDevices = devices.filter(function(element) {
    return element.kind == "audioInput";
  });
  videoInputDevices = devices.filter(function(element) {
    return element.kind == "videoInput";
  });
  for (var i = 0; i < audioInputDevices.length; i++) {
    console.log("audio input device: ", audioInputDevices[i].deviceId);
  }
  for (i = 0; i < videoInputDevices.length; i++) {
    console.log("video input device: ", videoInputDevices[i].deviceId);
  }
});

var pubOptions =
  {
    audioSource: audioInputDevices[0].deviceId,
    videoSource: videoInputDevices[0].deviceId
  };
var publisher = OT.initPublisher(null, pubOptions, function(error) {
  console.log("OT.initPublisher error: ", error);
});

Lembrar a seleção do dispositivo

Em contextos HTTPS, alguns navegadores podem lembrar a seleção da câmera e do microfone para visitas posteriores. Por exemplo, no IE, é possível definir usePreviousDeviceSelection: true ao inicializar o Publisher:

var pubOptions = { usePreviousDeviceSelection: true };
var publisher = OT.initPublisher(null, pubOptions, function (error) {
  console.log("OT.initPublisher error:", error);
});

Você também pode definir facingMode para escolher entre a câmera frontal ou traseira em dispositivos compatíveis e desativar o gerenciamento automático do dispositivo de entrada de áudio por meio de disableAudioInputDeviceManagement se você precisar de controle total.

Para solicitar que o usuário selecione a câmera e o microfone a serem usados no IE (e ignorar as seleções anteriores de dispositivos), não defina o usePreviousDevices propriedade nas opções que você passa para o OT.initPublisher() método (ou defina-o como false, o padrão).

Desativar o gerenciamento automático de dispositivos de entrada de áudio (avançado):

var pubOptions = {disableAudioInputDeviceManagement: true};
var publisher = OT.initPublisher(null, pubOptions, function(error) {
  console.log("Publishing a stream");
});

Definir resolução e taxa de quadros

Defina a resolução e a taxa de quadros recomendadas para o vídeo por meio de OT.initPublisher() opções:

var publisher = OT.initPublisher(targetElement, {
  resolution: '1280x720', // 1920x1080, 1280x720, 640x480, or 320x240
  frameRate: 15            // 30, 15, 7, or 1
});

Observação: a resolução e a taxa de quadros reais do assinante podem variar de acordo com as condições da rede e do dispositivo.

Configurações de transmissão (Web)

Para definir uma resolução de vídeo recomendada para uma transmissão publicada, defina o resolution propriedade do properties parâmetro que você passa para OT.initPublisher():

var publisherProperties = {resolution: '1280x720'};
var publisher = OT.initPublisher(targetElement, publisherProperties);
publisher.on('streamCreated', function(event) {
  console.log('Stream resolution: ' + event.stream.videoDimensions.width + 'x' + event.stream.videoDimensions.height);
});

Os valores válidos são "1920x1080", "1280x720", "640x480", e "320x240". O padrão é 640x480.

Para definir uma taxa de quadros recomendada para uma transmissão publicada, defina o frameRate propriedade:

var publisherProperties = {frameRate: 7};
var publisher = OT.initPublisher(targetElement, publisherProperties);
publisher.on('streamCreated', function(event) {
  console.log('Frame rate: ' + event.stream.frameRate);
});

Os valores válidos são 30, 15, 7 e 1.

Se o editor especificar uma taxa de quadros, a taxa de quadros real do fluxo de vídeo é definida como a frameRate propriedade do objeto Stream, embora a taxa de quadros real varie de acordo com as condições variáveis da rede e do sistema. Se você não especificar uma taxa de quadros ao chamar OT.initPublisher, essa propriedade não está definida.

Para sessões que utilizam o Media Router (sessões com o modo de mídia (configurado como “routed”), reduzir a taxa de quadros diminui proporcionalmente a largura de banda máxima que a transmissão pode utilizar.

No entanto, nas sessões com o modo de mídia Quando configurado para retransmissão, a redução da taxa de quadros não diminui a largura de banda da transmissão.

O videoHeight() e videoWidth() Esses métodos retornam a resolução configurada do objeto Publisher. A resolução real de um fluxo de vídeo do Subscriber é retornada pelo videoWidth() e videoHeight() métodos do objeto Subscriber. Esses valores podem diferir dos valores do resolution propriedade que você passou para OT.initPublisher() se o navegador de publicação não for compatível com a resolução solicitada.

Dicas sobre conteúdo em vídeo

É possível definir uma dica de conteúdo de vídeo para melhorar a qualidade e o desempenho de um vídeo publicado. Isso pode ser útil em determinadas situações:

• Ao publicar um vídeo de compartilhamento de tela que conterá principalmente texto ou conteúdo de vídeo.
• Ao usar uma fonte de vídeo de câmera, se você preferir reduzir a taxa de quadros e manter a resolução, pode definir a sugestão de conteúdo como “texto” ou “detalhe”. Em uma sessão roteada, se o emissor for compatível com vídeo escalável, ele enviará um fluxo em resolução total com baixa taxa de quadros e — se as condições da rede permitirem — um fluxo em resolução total com taxa de quadros normal. O OpenTok Media Router encaminhará um desses fluxos aos assinantes.

Isso indica ao navegador que utilize métodos de codificação ou processamento mais adequados ao tipo de conteúdo que você especificar.

Defina a dica de conteúdo de vídeo inicial para uma transmissão configurando o videoContentHint propriedade das opções que você passa para o OT.initPublisher() método:

var publisherOptions = {
  videoContentHint: "text",
  // other options, such as videoSource: "screen"
};
var publisher = OT.initPublisher(targetElement, publisherOptions, callbackFunction);

É possível alterar a dica de conteúdo do vídeo dinamicamente chamando a função setVideoContentHint() método de um objeto Publisher:

publisher.setVideoContentHint("motion");

Você pode definir a dica de conteúdo de vídeo como um dos seguintes valores:

• "" — Não é fornecida nenhuma indicação (configuração padrão). O cliente de publicação fará a melhor estimativa possível sobre como o conteúdo de vídeo deve ser tratado.
• "motion" — A trilha deve ser tratada como se contivesse vídeo em que o movimento seja importante. Por exemplo, você pode usar essa configuração para uma transmissão de vídeo com compartilhamento de tela que contenha vídeo.
• "detail" — A trilha deve ser tratada como se os detalhes do vídeo fossem extremamente importantes. Por exemplo, você pode usar essa configuração para uma transmissão de vídeo com compartilhamento de tela que contenha texto, pinturas ou desenhos a linha.
• "text" — A faixa deve ser tratada como se os detalhes do texto fossem extremamente importantes. Por exemplo, você pode usar essa configuração para uma transmissão de vídeo com compartilhamento de tela que contenha conteúdo de texto.

Com as dicas de conteúdo “text” e “detailed”, o navegador tenta manter uma alta resolução, mesmo que precise reduzir a taxa de quadros do vídeo. No caso da dica de conteúdo “motion”, o navegador reduz a resolução para evitar que a taxa de quadros fique lenta.

O Chrome 60+, o Safari 12.1+, o Edge 79+, o Opera 47+, as versões recentes do Samsung Internet, o WebView para Android e o WebView no iOS 12.2+ oferecem suporte a dicas de conteúdo de vídeo. Essa configuração é ignorada em outros navegadores.

Definir taxa de bits máxima

É possível definir uma taxa de bits máxima de vídeo para um Publisher a fim de limitar o uso de largura de banda (por exemplo, em redes com plano de dados limitado). Use as predefinições disponíveis (DEFAULT, BW_SAVER, EXTRA_BW_SAVER) ou defina um valor de taxa de bits bruta; o codificador se adaptará dentro do intervalo permitido, com base nas condições da rede. Consulte esta documentação.

Publicar a partir de fontes alternativas (Web)

Publicar a partir de fontes de vídeo personalizadas

É possível definir a fonte de vídeo de um Publisher como um objeto MediaStreamTrack de vídeo. Isso permite que você faça o seguinte:

• Publique o vídeo usando um elemento HTML Canvas como fonte do vídeo. Você pode chamar o captureStream() método do objeto HTMLCanvasElement e chamar o getVideoTracks() método do objeto CanvasCaptureMediaStream resultante para obter um objeto MediaStreamTrack de vídeo.

• Publique um vídeo a partir de um elemento “Vídeo”. Chame a função captureStream() método de um objeto HTMLVideoElement para obter um objeto MediaStream. O getVideoTracks() O método do objeto MediaStream retorna uma matriz de objetos MediaStreamTrack de áudio (geralmente um). Você pode então usar o objeto MediaStreamTrack como o audioSource propriedade do options objeto que você passa para o OT.initPublisher() método.

Você pode usar um objeto MediaStreamTrack de vídeo como o videoSource propriedade do options objeto que você passa para o OT.initPublisher() método. Isso faz com que o vídeo representado pelo objeto MediaStreamTrack seja a fonte de vídeo para a transmissão publicada.

A configuração da fonte de vídeo como um objeto MediaStreamTrack não é compatível com o plug-in de vídeo da Vonage para o Internet Explorer.

Publicar a partir de fontes de áudio personalizadas

É possível definir a fonte de áudio de um Publisher como um objeto MediaStreamTrack de áudio. Isso permite que você faça o seguinte:

• Publique o áudio de um elemento de áudio ou vídeo. Chame o captureStream() método de um objeto HTMLAudioElement ou de um objeto HTMLVideoElement para obter um objeto MediaStream. O getAudioTracks() O método do objeto MediaStream é uma matriz de objetos MediaStreamTrack de áudio (geralmente um). Você pode então usar o objeto MediaStreamTrack como o audioSource propriedade do options objeto que você passa para o OT.initPublisher() método.
• Publique áudio a partir de um objeto `MediaStreamTrack`. Por exemplo, você pode usar o objeto `AudioContext` e a API de áudio da Web para gerar áudio dinamicamente. Em seguida, você pode chamar createMediaStreamDestination().stream.getAudioTracks()[0] no objeto AudioContext para obter o objeto MediaStreamTrack de áudio a ser usado como o audioSource propriedade do options objeto que você passa para o OT.initPublisher() método.

Aplicação de filtros e efeitos

É possível aplicar filtros e efeitos ao áudio ou vídeo captado por um microfone ou câmera usados como fonte para uma transmissão publicada. Consulte Filtros e efeitos.

Outras opções de áudio e vídeo

Veja a lista completa de opções em Configurações do editor.