Compartilhar via

Práticas recomendadas para assinar feeds de vídeo

Um elemento crucial a ser considerado ao criar aplicativos Web é como integrar melhor o vídeo ao layout da página. O posicionamento e o número de vídeos podem afetar o desempenho da página, a experiência de qualidade do usuário e a estética geral. Este artigo inclui diretrizes para ajudar os desenvolvedores a determinar quantos vídeos colocar em uma página da Web e o melhor tamanho de resolução de vídeo para otimizar a experiência do usuário final.

Noções básicas sobre resolução de vídeo

Os desenvolvedores precisam saber detalhes importantes sobre a resolução de vídeo. A resolução refere-se ao número de pixels exibidos em uma saída de vídeo, normalmente medido no width x height formato. Resolução mais alta significa mais pixels, levando a imagens mais nítidas e mais claras. As resoluções de vídeo de entrada disponíveis na chamada de vídeo dos Serviços de Comunicação do Azure incluem:

  • 1080p (Full HD): 1920 x 1080 pixels
  • 720p (HD): 1280 x 720 pixels
  • 540p (qHD): 960 x 540 pixels
  • 360p (SD): 640 x 360 pixels
  • 240p: 426 x 240 pixels
  • 180p: 320 x 180 pixels

Fatores que influenciam a qualidade do vídeo

Vários fatores influenciam quantos vídeos você pode colocar efetivamente em uma página da Web. Esses fatores incluem o tipo de dispositivo, resolução, largura de banda disponível e considerações de experiência do usuário.

Habilidades de dispositivo local

O tipo de dispositivo usado para exibir a página da Web desempenha um papel significativo. Por exemplo, desktops e laptops com telas maiores podem acomodar mais vídeos do que dispositivos móveis. É recomendável usar técnicas de design responsivo para ajustar o número e os tamanhos dos vídeos com base nas dimensões da tela.

Além disso, o computador local deve processar, codificar e exibir esses vídeos corretamente. O tamanho da tela do monitor local e as habilidades do navegador também determinam o número de vídeos ativos que podem ser exibidos simultaneamente em uma página da Web.

Resolução e tamanho da tela de vídeo

A resolução de exibição do dispositivo do usuário final afeta diretamente o número de vídeos que você pode exibir por página. Quanto maior a resolução do monitor e da tela, mais vídeos você pode exibir.

Lembre-se de que, para cada vídeo que você colocar em uma página, os vídeos exigem mais largura de banda da Internet. Além disso, o computador local deve ter recursos de desempenho suficientes para codificar e exibir o vídeo corretamente.

É recomendável equilibrar a qualidade e o desempenho do vídeo. Não preencha todos os pixels na tela com a saída do vídeo, o que pode sobrecarregar o usuário. Considere a largura de banda de entrada e saída à medida que você adiciona mais vídeos a uma página.

Considerações sobre a largura de banda da Internet

Para melhorar a experiência do usuário final, precisamos entender como as velocidades da Internet são medidas e quais fatores podem influenciá-las. As velocidades da Internet normalmente são medidas em megabits por segundo (Mbps), o que indica a taxa na qual os dados são baixados ou carregados. Vários fatores podem afetar essas velocidades, incluindo o tipo de conexão com a Internet (fibra, cabo, wifi, celular), a qualidade do equipamento de rede (modem, roteador) e o número de dispositivos conectados à rede.

Ao colocar vários vídeos em uma página da Web, considere a largura de banda de rede do usuário. Vídeos de resolução mais alta exigem mais dados para serem transmitidos. Quanto mais vídeos no total colocados em uma página, mais banda larga cada um consome. Se alguém se conectar à Internet por meio de uma conexão com menor taxa de transferência geral de largura de banda, sua capacidade de transmitir vídeos de maior resolução ou vários vídeos em uma página será limitada. Por outro lado, se alguém tiver maior largura de banda da Internet para tráfego de entrada e saída, ele terá uma maior capacidade de entregar e consumir vídeos de alta resolução e acomodar mais vídeos na página.

Métodos para otimizar melhor como você lida com fluxos de vídeo de entrada

Usar a Biblioteca da Interface do Usuário Web

A Biblioteca de Interface do Usuário da Web dos Serviços de Comunicação do Azure é uma ferramenta poderosa para desenvolvedores que buscam criar aplicativos Web contínuos e visualmente atraentes. A Biblioteca de Interface do Usuário da Web oferece um conjunto abrangente de componentes de interface do usuário predefinidos que são fáceis de integrar e altamente personalizáveis. Essa solução permite que os desenvolvedores se concentrem na criação de funcionalidades em vez de projetar do zero.

A Biblioteca de Interface do Usuário da Web garante padrões de design consistentes em diferentes projetos e plataformas, aprimorando a experiência do usuário e reduzindo o tempo de desenvolvimento. Sua extensa documentação e suporte à comunidade ativa fazem dele uma excelente opção para iniciantes e desenvolvedores experientes. Aplicando a Biblioteca de Interface do Usuário da Web, você pode simplificar seu fluxo de trabalho, criar interfaces de qualidade profissional e fornecer aplicativos Web envolventes com mais eficiência. Além disso, usar a Biblioteca da Interface do Usuário Web elimina as suposições ao determinar quantos vídeos você pode assinar de forma ideal ao mesmo tempo.

Usar a API de contagem ideal de vídeos

O SDK do WebJS dos Serviços de Comunicação do Azure introduziu a Contagem de Vídeo Ideal (OVC) que informa aos aplicativos quantos vídeos de entrada de diferentes participantes podem ser renderizados de forma ideal durante uma chamada em grupo. A optimalVideoCount propriedade é ajustada dinamicamente com base na largura de banda de rede e nas funcionalidades de hardware. A contagem de vídeo ideal retorna um inteiro definindo o número ideal de vídeos que podem ser exibidos em uma página da Web. Os aplicativos devem atualizar o número de vídeos renderizados de acordo com a saída do OVC. Os desenvolvedores devem garantir que o aplicativo assine as alterações na Optimal Video Count nas chamadas de grupo e ajuste o número de vídeos que são renderizados em uma página da Web dinamicamente com base na contagem OVC. O valor da contagem de vídeo ideal (OVC) é atualizado a cada 10 segundos.

Você precisa referenciar o recurso OptimalVideoCount por meio do método de recurso do objeto Call. Em seguida, você pode definir um ouvinte por meio do método on do OptimalVideoCountCallFeature a ser notificado quando a optimalVideoCount for alterada. Para cancelar a assinatura das alterações, você pode chamar o método off. O número máximo atual de vídeos de entrada que podem ser renderizados em uma página da Web é 16. Para dar suporte adequado a 16 vídeos de entrada, o computador deve ter um mínimo de 16 GB de RAM e uma CPU de 4 núcleos ou maior que não tenha mais de três anos.

const optimalVideoCountFeature = call.feature(Features.OptimalVideoCount);
optimalVideoCountFeature.on('optimalVideoCountChanged', () =\> {
    const localOptimalVideoCountVariable = optimalVideoCountFeature.optimalVideoCount;
})

Quando houver uma alteração no valor ideal da contagem de vídeos, se o resultado indicar maior capacidade no computador local para mais vídeos de entrada, você poderá criar um novo vídeo de entrada usando o createView método para exibir mais fluxos de vídeo de entrada a serem exibidos na página.

Por outro lado, se a contagem ideal diminuir e for menor que o número atual de vídeos na página, considere descartar um vídeo usando o método de descarte e atualizar o layout do aplicativo adequadamente.

Coisas a serem consideradas ao adicionar um vídeo de 1080p ou 720p a uma página.

  • Você pode colocar um vídeo de entrada de 1080p com o restante menor que 720p.
  • Você pode colocar dois vídeos de entrada de 720p, sendo que os restantes sejam menores que 720p.

O SDK de chamada do WebJS dá suporte ao streaming de vídeo 1080p. Para enviar um 1080p de um navegador da área de trabalho da Web, você deve usar a versão 134.1 ou superior do SDK de chamadas em disponibilidade geral ou versão preliminar pública.

Por exemplo, em uma chamada em grupo em que sete participantes têm suas câmeras de vídeo ativadas, em cada página do cliente, você pode selecionar que os vídeos de dois participantes são exibidos em resoluções mais altas. Esses dois participantes configuraram para exibir seu vídeo em 720p ajustando suas configurações de exibição na página da Web com 720 pixels de altura por 1280 pixels de largura (ou mais). Os cinco vídeos restantes dos participantes devem estar configurados para uma resolução mais baixa, como 360p ou inferior.

  • Verifique se o número total de vídeos renderizados não excede o valor de OVC (Contagem de Vídeo Ideal) do OVC .

  • Cada cliente pode escolher o feed de vídeo de usuários específicos e ajustar o tamanho da resolução em seus dispositivos individuais.

  • A capacidade de cada participante de enviar uma resolução de vídeo específica pode variar. Alguns computadores são equipados com câmeras de maior qualidade, permitindo que eles transmitam um vídeo 1080p. Por outro lado, alguns navegadores móveis têm recursos de transmissão de vídeo mais baixos, como apenas 540p. Se você inseriu a resolução de vídeo como 1080p ou 720p em uma página, o vídeo de entrada pode não corresponder a essa resolução. Nesse caso, o sistema dimensiona o fluxo de vídeo para preencher o tamanho do renderizador de vídeo.

  • Atualmente, um máximo de dois fluxos de vídeo de 720p podem ser renderizados em uma página da Web. Se mais de dois fluxos de 720p estiverem habilitados, todas as representações de vídeo 720p serão transmitidas a 540p.

  • O número máximo de fluxos remotos de entrada que podem ser assinados é de 16 fluxos de vídeo mais 1 compartilhamento de tela em navegadores da área de trabalho e 4 fluxos de vídeo mais 1 compartilhamento de tela em navegadores móveis da Web.

  • A capacidade de simulcast de vídeo dos Serviços de Comunicação do Azure aprimora o streaming de vídeo habilitando um único vídeo entregue por um cliente final em várias resoluções e taxas de bits simultaneamente.

    Essa função permite que os visualizadores com diferentes condições de rede selecionem qual representação de vídeo selecionar para receber a melhor qualidade de vídeo possível sem buffers ou interrupções. Ao otimizar o uso de largura de banda, o simulcast envia fluxos de resolução mais altos somente para usuários que podem dar suporte a eles. Esse comportamento minimiza a transmissão de dados desnecessária. O Simulcast melhora a experiência geral do usuário fornecendo qualidade de vídeo estável e consistente e habilita o streaming adaptável.

    Não há suporte para o Simulcast em todos os navegadores, especificamente navegadores móveis e macOS Safari. Se um participante usando o iOS Safari, Android Chrome ou macOS Safari renderizar um vídeo 720p e outro participante tentar renderizar o mesmo vídeo em uma resolução inferior, ambos receberão a resolução inferior. Isso acontece porque esses dispositivos priorizam resoluções menores quando o envio de simulcast não tem suporte.

Como configurar para enviar um fluxo 1080p

Ao usar o SDK do WebJS para enviar vídeo em uma resolução de 1080p, você deve usar a API de Restrições de Vídeo e especificar que deseja usar 1080p. Se a API de Restrições de Vídeo não for usada e 1080p não for especificada, a resolução de fluxo de vídeo padrão será 720p.

    const callOptions = {
        videoOptions: {
            localVideoStreams: [...],
            constraints: {
                send: {
                    height: {
                        max: 1080
                    }
                }
            }
        },
        audioOptions: {
            muted: false
        }
    };
    // make a call
    this.callAgent.startCall(identitiesToCall, callOptions);

Itens a serem observados ao enviar um fluxo de vídeo 1080p

  • A câmera em uso deve ser capaz de enviar um vídeo 1080p. Para verificar quais resoluções sua câmera dá suporte, você pode usar o exemplo javaScript a seguir para determinar as resoluções disponíveis.
async function getSupportedResolutions() {
  const constraints = {
    video: {
      width: { ideal: 4096 }, // Try to get the maximum width
      height: { ideal: 2160 } // Try to get the maximum height
    }
  };
 
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoTrack = stream.getVideoTracks()[0];
    const settings = videoTrack.getSettings();
    
    console.log(`Supported resolution: ${settings.width}x${settings.height}`);
    
    // Stop the video track to release the camera
    videoTrack.stop();
  } catch (error) {
    console.error('Error accessing media devices.', error);
  }
}
 
getSupportedResolutions();
  • O computador que envia um 1080p deve ter um computador avançado o suficiente para dar suporte ao envio de um 1080p.
  • O cliente no lado receptor (pessoas que recebem um vídeo em 1080p) deve ter um elemento de renderização de vídeo em HTML5 capaz de 1080p para aceitar 1080p. Se algum participante da chamada não tiver um elemento 1080p habilitado para receber o vídeo, a chamada será ajustada e negociará para uma resolução menor.
  • Todas as pessoas na chamada que estão enviando e recebendo um fluxo de vídeo 1080p devem ter a largura de banda para dar suporte a um fluxo de 1080p.
Resolução Taxa de quadros mínima Taxa de quadros máxima Taxa de bits máxima
1080p 30 30 4 M
720p 30 30 2,5 M
540p 30 30 2 Milhões
360p 30 30 1 milhão
240p 15 15 650 K
180p 7,5 15 250 K (350 K se 15 FPS)

Você pode usar a API de estatísticas de qualidade de mídia no SDK do WebJS para determinar a resolução de envio e recebimento de vídeo em tempo real. Veja aqui para obter mais detalhes.

Conclusão

Para determinar quantos vídeos colocar em uma página da Web, você precisa considerar cuidadosamente a resolução, o tipo de dispositivo, a largura de banda e a experiência do usuário. Siga estas diretrizes e práticas recomendadas para criar aplicativos Web que não só parecem atraentes, mas também funcionam perfeitamente, fornecendo uma experiência de exibição ideal para usuários em vários dispositivos e velocidades de conexão.