Hoje vou falar sobre o módulo
Hardware no Voximplant Web SDK. Este módulo substituiu o antigo sistema de gerenciamento de dispositivos de áudio e vídeo. Mas primeiro, um pouco sobre gerenciamento de dispositivos na pilha WebRTC e por que tudo isso é necessário.
Raramente, os usuários finais têm vários microfones. Ou existem vários alto-falantes: por exemplo, alto-falantes comuns e fones de ouvido bluetooth; ou alto-falante e viva-voz para smartphone.
Mas duas câmeras no mundo moderno são muito comuns. Em tablets e telefones: regular e frontal. Em laptops: interno e melhor externo. E assim por diante e assim por diante. O usuário pode ficar muito chateado se, por padrão, o conjunto errado de dispositivos estiver selecionado e ele não puder alterá-los de nenhuma maneira. Este é o primeiro aplicativo de gerenciamento de mídia no WebRTC.
A segunda aplicação é o ajuste fino de áudio e vídeo. Todos os tipos de cancelamento de eco, redução de ruído, configuração da resolução de vídeo, taxa de quadros, balanço de branco e outras coisas que o seu navegador suporta especificamente.
Anteriormente, para o gerenciamento de dispositivos, fornecíamos a interface de
restrições , e o desenvolvedor precisava definir todas as restrições e parâmetros da solicitação de mídia de forma independente. Aqui está um pequeno exemplo de uma solicitação de áudio e vídeo totalmente personalizada:
const myConstraints = { audio:{ sampleSize: 16, channelCount: 2, noiseSuppression: true, echoCancellation: false }, video:{ width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectRatio: 1.777777778, frameRate: { max: 30 }, facingMode: { exact: "user" } } };
Isso oferece uma flexibilidade incrível ao configurar áudio e vídeo, mas sempre há um "MAS". Como as estatísticas da pesquisa de suporte mostraram, os clientes basicamente não usaram essa opção, pois somos uma plataforma amigável e estamos acostumando os usuários à simplicidade. Quem se atreveu a usar isso, muitas vezes se matou logo acima do joelho, já que os navegadores têm uma ligeira incompatibilidade neste momento no espaço.
Agora está claro como chegamos a essa vida. É hora de começar a trabalhar: uma rápida olhada no módulo; para uma leitura detalhada, deixarei um link para a
documentação em nosso site .
O ponto de entrada para este módulo é o
StreamManager . Historicamente, [a imagem com o elephant.jpg], muitas partes do nosso Web SDK são singleton e essa classe não é exceção: você pode obter uma instância usando a função
get () . Há um mar de razões para isso, mas mais sobre isso outra hora, talvez.
const streamManager = VoxImplant.Hardware.StreamManager.get();
Com o StreamManager, você pode ativar ou desativar o vídeo local e
para obter fluxos de mídia para ele - na verdade, é tudo. O ponto de entrada não é muito grande quando se olha para interfaces externas.
(async () => { try{ console.log('[WebSDK] '); await streamManager.showLocalVideo(); console.log('[WebSDK] '); await streamManager.hideLocalVideo(); console.log('[WebSDK] !'); } catch(e){ console.log('[WebSDK] - . , ?!'); console.error(e); } })();
Um fato interessante sobre o vídeo local: o vídeo local não é transmitido ao interlocutor de forma alguma. Por exemplo, o usuário pode exibir uma imagem em HD e transmitir 320 * 240, ou vice-versa, se um vídeo local estiver oculto em um canto. Abaixo, mostramos como fazer esse truque.
Existem 3 eventos no StreamManager:
Usando a função
getLocalMediaRenderers () , é útil obter links para elementos DOM com vídeo local se você não salvou o objeto em si mesmo.
streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); });
Vamos para as configurações de vídeo (as mais deliciosas, observe suas mãos). De repente,
CameraManager . Novamente, um singleton com a função
get () chata:
const cameraManager= VoxImplant.Hardware.CameraManager.get();
Quais configurações podemos definir? Vamos dar uma olhada na interface
CameraParams :
Outras três opções são responsáveis pelo tamanho do vídeo:
Vamos voltar ao CameraManager e aplicar as configurações! Dentro, existem 2 getters e 2 setters de configurações:
Tudo isso com "Padrão" são as configurações "padrão", como você pode imaginar. Eles serão usados para receber vídeo local, para novas chamadas de entrada e saída.
E agora o foco prometido:
console.log('[WebSDK] .'); await cameraManager.setDefaultVideoSettings({ frameWidth:320, frameHeight:240, frameRate:12 }); await streamManager.showLocalVideo(); cameraManager.setDefaultVideoSettings({ frameWidth:640, frameHeight:480, frameRate:25 }); const newCall = client.call('mySchoolFriendBoris');
Emparelhar com
Chamada no nome é um pouco mais complicado. Essas funções foram projetadas para receber e definir preferências durante uma chamada que já está em andamento. Ao alterar as configurações, o evento
CallEvents.Updated ocorrerá .
console.log('[WebSDK] .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK] .'); });
Duas funções do CameraManager permanecem. Muito poderoso, mas sofisticado. A enumeração
VideoQuality tem três significados interessantes:
- VIDEO_QUALITY_HIGH;
- VIDEO_QUALITY_MEDIUM;
- VIDEO_QUALITY_LOW.
Uma pergunta lógica: “Igor! Se o SDK da Web conhece a melhor, pior e média qualidade, por que não existe um método para listar as resoluções suportadas pela webcam?! ” Tsimes não sabe.
E para descobrir, você precisa literalmente ordenar todas as permissões possíveis. O que eu consegui obter é suportado. Parece bem simples, mas na verdade leva alguns minutos. Portanto, não podemos fazer isso na inicialização do WebSDK, por exemplo. Para que você possa fazer isso no momento mais confortável para o usuário - se você quiser fazer isso - e houver
testResolutions . Seria bom salvar o resultado do trabalho da função em localStorage e carregá-lo posteriormente por meio de
loadResolutionTestResult quando a página for recarregada:
console.log('[WebSDK] , WebSDK .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions));
Por último, mas não menos importante,
AudioDeviceManager . A classe é muito semelhante ao
CameraManager . Apenas para som, suas configurações são refletidas na interface
AudioParams :
- strict - true é responsável por seguir rigorosamente sua vontade;
- inputId - seleção de microfone. Uma lista de todos os microfones pode ser obtida através do AudioDeviceManager.getInputDevices ;
- outputId - escolha dos alto-falantes. Essa opção funciona apenas no Chrome, outros navegadores a ignoram. Você pode obter uma lista de dispositivos através de getOutputDevices ;
- noiseSuppression - redução de ruído. Por padrão, a redução de ruído está ativada e funciona muito bem. Mas a perda parcial de voz pode ocorrer se o usuário trabalha em uma sala onde fala muito, por exemplo, em um call center. O filtro pode apenas cometer um pequeno erro e reduzir o excesso. Se você tiver problemas dessa natureza, vale a pena definir esta opção como false ;
- echoCancellation - remove o eco do microfone. Ele deve ser desativado junto com a opção anterior;
- autoGainControl - inclui um mecanismo para ajustar automaticamente o ganho do microfone embutido no sistema operacional. A opção não tem efeitos colaterais, mas sua operação é altamente dependente do sistema operacional e do hardware. Às vezes, pode simplesmente não funcionar e o ganho será constante, o que também é bom.