Escrever um chat de vídeo para uma rede local ou dominar WebRTC em 2020

Contra o pano de fundo de eventos bem conhecidos , não havia nada a fazer como parte do meu crescimento profissional, estou tentando dominar o WebRTC. Como você sabe, a melhor maneira de aprender é fazer algo pelo menos potencialmente útil. E ao mesmo tempo trocar experiências de criação e recheio de cones.



Como tarefa, optou-se por fazer uma aplicação simples que permita chamadas de áudio e vídeo entre dois (por enquanto) dispositivos fixos ou móveis em uma rede local sem a necessidade de conexão à Internet. A instalação e configuração inicial de tal aplicativo deve ser simples o suficiente para que qualquer enikey avançado possa lidar com ele sem problemas e mostrar aos usuários como fazer chamadas, e se ele tiver as habilidades apropriadas, ele pode fazer pequenas melhorias em termos de design e recursos. O cliente deve ser qualquer dispositivo equipado com dispositivos de entrada-saída de multimídia e permitindo que você execute um navegador adequado (Firefox ou Chrome - testando em maio, ao que parece).



Como isso é feito



Como você sabe, a tecnologia WebRTC para comunicação entre dois assinantes sugere o uso de um objeto do tipo RTCPeerConnection, e a principal tarefa do desenvolvedor é organizar a troca de informações de texto (oferta SDP, resposta SDP, candidato ICE) entre o chamador e o receptor. Em outras palavras, o desenvolvedor precisa primeiro criar um chat de texto com uma API para JavaScript do navegador e, em seguida, anexar a parte multimídia a ele - eventos RTCPeerConnection e métodos para transmitir e processar o recebimento de dados.



A escolha das tecnologias de implementação e da API de chat de texto permanece com o desenvolvedor. Muitos (e em particular o Mozilla em seu exemplo oficial de RTCPeerConnection) preferem usar a API WebSocket e o servidor correspondente - por exemplo, no Node.JS. Mas, levando em consideração nossa tarefa de torná-lo o mais simples possível para implantação, decidi começar por não complicar demais o aplicativo do servidor, especialmente para entregar páginas e scripts ao dispositivo cliente, um servidor Web adicional foi necessário. Portanto, a API decidiu usar xmlHttpRequest com chamadas periódicas de clientes para o mesmo servidor web. Não posso dizer que funcione perfeitamente em termos de consumo de recursos (e bateria) do dispositivo do cliente e a ausência de freios, mas funciona exatamente se algumas nuances forem levadas em conta no desenvolvimento. Talvez,em alguma próxima versão adicionarei um servidor WebSocket e reprojetarei a API de acordo, mas não de uma vez.



Foi decidido fazer a parte do servidor no Lazarus for Windows; recursos de rede são fornecidos pelo pacote Synapse. De certa forma, isso é provavelmente uma perversão, e eu tive que consertar seriamente e dar alguns solavancos para fazer tudo funcionar como planejado. Mas um exe, duas dlls (bibliotecas OpenSSL), arquivos de um certificado SSL autoassinado e uma chave para ele e alguns arquivos de configuração (mais estáticos) permitem que você não se preocupe muito com o nível de tecnologia do servidor e a forma como o aplicativo é iniciado. Eu testei a primeira versão deste servidor em uma compilação de 32 bits mesmo em um Asus Eee PC 900 2009 sob Windows XP, embora não fosse sem um truque na forma de uma substituição recente de um SSD super-lento regular por um mais moderno e volumoso. Isso é em termos de desempenho. E a "instalação" do servidor é descompactar o arquivo zip baixado em qualquer pasta adequada,editar o arquivo JSON da configuração das contas do usuário e lançar o arquivo exe do programa (também existe um botão na janela, mas você pode especificar um parâmetro na linha de comando para iniciar o servidor Web imediatamente). De uma forma ou de outra, estou pensando em uma parte de servidor mais séria, já que tenho essa experiência. Tudo tem o seu tempo.



Além da organização real da API, nosso servidor serve arquivos estáticos para navegadores (páginas da web de login e chat, estilos, imagens, scripts, toque). Em geral, tentei ficar sem bibliotecas de terceiros tanto quanto possível, mas devido ao fato de que meu design e layout html não são tão bons, decidi usar jQuery.UI e, consequentemente, jQuery, que o servidor Web também envia como estático. Todos os arquivos estáticos estão em uma subpasta separada da pasta do programa; eles, é claro, podem ser observados e até mesmo alterados se desejado e com as habilidades apropriadas. Em JavaScript, o código é comentado e você pode aprender com ele, se necessário.



Como organizar a comunicação



Para organizar a comunicação, o principal é selecionar e combinar dispositivos clientes (computadores, laptops, smartphones, tablets) e uma máquina Windows com um "servidor" (também pode atuar como cliente) em uma rede comum. A partir de dispositivos clientes, testei vários smartphones baratos lançados nos últimos anos no Android a partir da versão 7, bem como um computador e laptop no Windows 10, inclusive com duas câmeras da Web conectadas; eles tiveram um bom desempenho. Para me divertir, até testei a primeira versão no Orange Pi One com Lubuntu (ou Kubuntu, não me lembro de cara) do fabricante. Surpreendentemente, até funcionou, embora o vídeo tenha ficado lento e a página de chat tenha sido aberta por um instante (nem quero falar em carregar o sistema e abrir o navegador).



Nosso servidor é instalado na máquina de escrever "servidor" da maneira acima e as contas de usuário são configuradas. Cada usuário deve receber um login com uma senha.



Tudo funciona assim. Os usuários acessam a máquina de escrever do "servidor" com um navegador via protocolo https, usando seu endereço IP ou nome de domínio. Lá, eles inserem seu nome de usuário e senha e vão para a página de chat com uma lista de contatos. Ao clicar em um contato, uma janela de diálogo é aberta com o histórico das mensagens de texto (aliás, o servidor armazena apenas na RAM, ainda não pode ser armazenado em um arquivo), um campo para um bate-papo e um formulário de chamada de áudio e vídeo com caixas de seleção para seleção de áudio e (ou) vídeo. Para fazer uma chamada de vídeo, o usuário marca as caixas de seleção apropriadas, pressiona o botão de chamada e confirma a permissão para o navegador. O assinante chamado começa a emitir um toque de chamada e um formulário de resposta é aberto com os mesmos sinalizadores. Após clicar no botão de resposta, o navegador também pedirá permissão para acessar os dispositivos multimídia. Em seguida, uma janela de chamada é aberta.



Não posso dizer que tenho muita experiência com software para videoconferência, consultoria de vídeo, etc., mas, por exemplo, no Google Hangouts em um computador (como em dispositivos móveis, não sei) não vi uma oportunidade de transformar minha amada em tela cheia, o que, em tese, pode ser exigido nas consultas remotas, quando você precisa ver bem o que está mostrando ao seu interlocutor (por exemplo, pela câmera traseira do seu smartphone). Nesse chat, no diálogo da chamada, decidi fazer duas abas com o vídeo - o interlocutor e o próprio usuário. A partir da versão atual na aba do usuário, além do próprio vídeo, existem campos para seleção de câmera e microfone; você pode alterar seus valores instantaneamente durante uma conversa. Talvez seja útil para alguém.



Agora descreverei brevemente os cones cheios de desenvolvimento; talvez ajude alguém a desenvolver e depurar suas soluções.



Funcionalidades modernas do trabalho e implementação de WebRTC e geralmente trabalhando com multimídia em JavaScript



Aqui, brevemente; detalhes podem ser encontrados nos comentários no arquivo javascript static / js / videoChat.js



  1. Chrome com certeza, além de, possivelmente, outros navegadores também permitem que você trabalhe com getUserMedia apenas em sites acessíveis via HTTPS
  2. A lista de dispositivos de entrada de áudio e vídeo pode ser obtida somente após uma chamada bem-sucedida para getUserMedia
  3. O início automático da reprodução de som usando JavaScript (por meio do método play () do elemento de vídeo ou áudio html) só é possível depois que o usuário mostra atividade no site - por exemplo, clica em algum elemento de controle.
  4. promise setLocalDescription , offer. RTCPeerConnection ICE-, .
  5. « » getUserMedia RTCPeerConnection. , , .
  6. Muitas descrições de dispositivos móveis referem-se à propriedade fachadaMode para selecionar câmeras frontal ou traseira. Na verdade, não sei como em aparelhos antigos, mas neste chat em smartphones testados, a troca funciona mesmo sem usar esta propriedade. Mas, estritamente levando em consideração a cláusula 5.


A lista provavelmente não é exaustiva. Acho que muito mais surgirá no decorrer do desenvolvimento futuro. Se alguém souber contornar as restrições e, consequentemente, simplificar o programa ou trabalhar com ele, por favor, escreva nos comentários.



Grande tiro do desenvolvedor de aplicativos de rede Lazarus



O Synapse atualmente suporta apenas bibliotecas 1.0.x OpenSSL; no 1.1 muitas coisas já são implementadas de forma diferente, outras até nomes de bibliotecas. Além disso, não basta simplesmente colocar as dlls na pasta do programa. Você também precisa de um arquivo de configuração (openssl.cnf), o caminho para o qual é definido por meio da variável de ambiente OPENSSL_CONF.



Onde posso baixar



As distribuições do programa para Win32 e Win64 e o código-fonte do lado do servidor no Lazarus estão disponíveis na página do programa no link www.lubezniy.ru/soft/videochat



PS: A propósito, alguém sabe como você pode usar o Lazarus para automatizar a construção da mesma fonte dois exe diferentes - para Win32 e Win64? O compilador cruzado de Win64 para Win32 está instalado e funcionando, mas alterar as opções no projeto todas as vezes não é correto.



PPS: Quem experimentou, por favor, compartilhe suas impressões nos comentários.



All Articles