O WebRTC sem nenhum servidor nem mesmo é possível um servidor de sinalização

Resumo

O WebRTC é um conjunto de componentes que permitem a mídia e canais de dados em tempo real entre os navegadores. No entanto, ainda requer um serviço de back -end para certas funcionalidades. Neste artigo, exploraremos as razões pelas quais um serviço de back -end é necessário, os componentes e o hardware envolvidos na criação de WebRTC, os codecs de áudio e vídeo suportados e a importância de um diretório e servidor de atordoamento.

1. O que é webrtc?

O WebRTC é um conjunto de componentes que permite aos desenvolvedores configurar os canais de mídia e dados em tempo real entre navegadores. Foi criado pelo Google e contém componentes -chave que são enviados em Chrome, Firefox, Opera e Microsoft Edge (ORTC).

2. Por que você ainda precisa de um serviço de back -end?

Apesar das capacidades do WebRTC, é necessário um serviço de back -end para certas funcionalidades. Por exemplo, para ligar para alguém, você precisa conhecer o endereço deles, que geralmente é dinâmico. Esta informação precisa ser armazenada e gerenciada em um servidor. Além disso, um serviço de back -end pode acompanhar todos os dispositivos para um usuário e notificá -los sobre chamadas recebidas.

3. Quais componentes e hardware estão envolvidos na configuração do WebRTC?

O WebRTC ajuda a configurar o ambiente físico, como câmeras, alto -falantes e microfones, bem como outros hardware como o cancelamento de eco e o hardware de cancelamento de fundo. Ele também ajuda a configurar a rede usando o Stun (Utilitários Traversal da Sessão para NAT).

4. Quais codecs de áudio são suportados pelo WebRTC?

O WebRTC suporta vários codecs de áudio, incluindo G711, ILBC e Opus. Opus é um codec variável de alta qualidade amplamente utilizado no webrtc.

5. Quais codecs de vídeo são suportados pelo WebRTC?

O WebRTC suporta codecs VP8 e VP9, ​​que são variações sem royalties do Google de H.264/h.265. Também suporta H.264.

6. Por que os codecs de áudio são importantes no webrtc?

Os codecs de áudio lidam com tarefas como perda de pacotes, codificação e decodificação de áudio, correção de erros, cancelamento de ruído, cancelamento de eco e nivelamento de volume. Eles contribuem para a popularidade do WebRTC em dispositivos móveis e desktops.

7. Qual é o diretório de quem está disponível para ligar?

Para iniciar uma chamada, você precisa conhecer o endereço do destinatário. O diretório serve como um dinâmico páginas brancas, permitindo que os usuários marquem com um servidor e forneçam informações de contato. Isso pode ser implementado usando protocolos XMPP, SIP ou.

8. Por que você precisa de um servidor de atordoamento?

Um servidor de atordoamento (utilitários de travessia de sessão para NAT) ajuda a determinar o endereço IP externo de um dispositivo e verifica se dois dispositivos podem se comunicar diretamente. Ele desempenha um papel crucial no estabelecimento de conexões entre pares.

9. O que é um servidor de turno?

Se uma sessão ponto a ponto não for possível devido a limitações de firewall, é necessário um turno (travessia usando relés em torno do NAT). Ajuda a transmitir dados entre os dispositivos, ignorando as restrições de firewall.

10. Por que você deve considerar usar um serviço de back -end como Sinch?

Configurar e manter servidores para sinalização, atordoamento e turno pode ser complexo e caro. Sinch, como provedor de serviços de back-end, oferece soluções escaláveis ​​e econômicas. Eles lidam com um bilhão de minutos por ano e fornecem SDKs WebRTC otimizados para diferentes dispositivos e condições de rede.

11. O WebRTC é apenas sobre o back -end?

Não, o WebRTC envolve aspectos de front -end e back -end. Sinch, por exemplo, personaliza e configura seu SDK WebRTC para garantir o desempenho ideal entre dispositivos e condições de rede. Eles implementam recursos como opus adaptável para ajustar a qualidade da gravação com base em métricas de qualidade do tráfego.

12. Quais são os benefícios de usar sinch?

Sinch oferece experiência em comunicações em tempo real e fornece SDKs WebRTC personalizados, codecs otimizados e uma rede distribuída. Seus preços para transferência de dados são econômicos e garantem a comunicação de baixa latência por meio de servidores estrategicamente localizados.

13. Quão perceptível é a latência da rede em uma conversa?

Cerca de 250ms de latência da rede é perceptível durante uma conversa. Fatores como latência da rede, tempo de processamento e codificação de dados podem contribuir para a latência geral.

14. Que funcionalidades um serviço de back -end fornece no WebRTC?

Um serviço de back -end lida com tarefas como gerenciamento de diretórios, sinalização, atordoamento e gestão de servidores e rastreamento de dispositivos para usuários.

15. O que torna o WebRTC popular em dispositivos móveis e desktops?

O suporte do WebRTC para codecs de áudio e vídeo, juntamente com sua facilidade de uso e recursos em tempo real, contribui para sua popularidade em dispositivos móveis e desktops.

O WebRTC sem nenhum servidor nem mesmo é possível um servidor de sinalização

Em seguida, abra duas guias no seu navegador (ou em dois navegadores diferentes) e entre LocalHost: 7000. Como mencionado anteriormente, é melhor ter duas câmeras disponíveis para este exemplo funcionar. Se tudo correr bem, você deve ver um feed de vídeo em cada uma das guias.

WebRTC e por que você ainda precisa de um serviço de back -end

Junte -se à comunidade DZone e obtenha a experiência completa do membro.

Este artigo apareceu originalmente no blog Sinch de Christian Jensen.

O que é webrtc?

O WebRTC é um conjunto de componentes baseados em algumas inovações de empresas que o Google comprou em 2010. O WebRTC permite que um desenvolvedor configure canais de mídia e dados em tempo real entre dois navegadores (ou celulares, se você o compilar para isso). Ele contém alguns componentes -chave e todos são enviados em Chrome, Firefox e Opera, e uma versão dele existe na Microsoft’s Nova borda do navegador (ORTC).

Configurando fluxos de dados e hardware

O WebRTC ajuda a configurar o ambiente físico (como câmeras, alto -falantes e microfones) e outros hardware (como cancelamento de eco e hardware de cancelamento de fundo – aqueles que você encontrará principalmente em celulares), além de ajudar a descobrir a rede junto com o atordoamento.

Codecs de áudio e codecs de vídeo

Um dos principais benefícios usando o WebRTC em relação a outros softwares ao lidar com áudio e vídeo em tempo real é o código de código aberto/royalty gratuito que o Google é gentil o suficiente para enviar.

Codecs de áudio

• G711, usado em redes telefônicas regulares
• ILBC, codificado de banda estreita antiga, também usada em redes telefônicas
• Opus, uma variável de alta qualidade e (suporte para adaptativa) codec que é o mais novo no codec usado no webrtc.

Existem mais enviados, mas esses são os principais e os mais amplamente utilizados.

Codecs de vídeo

• VP8 e logo VP9, ​​este é o Google’s Variação de um Royalty Free H.264/h.265 codec
• H.264 (adicionado em 2015 como um contrato para o ORTC)

Os codecs de áudio fazem muito do trabalho para você, cuidando da perda de pacotes, codificação e decodificação de áudio, correção de erros, cancelamento de ruído, cancelamento de eco, nivelamento de volume e muito mais. O fato de ele ter codecs também o torna extremamente popular em dispositivos móveis e desktops.

Então, agora eu posso construir meu próprio chamado baseado em navegador em JavaScript puro usando (adicione sua estrutura de JS do lado favorita do cliente aqui). Infelizmente, é’não é tão simples para fazer uma ligação, pois há duas coisas principais faltando aqui.

Diretório de quem está disponível para chamar (ou descoberta de pares)

Para ligar para alguém, você precisa saber o endereço e, diferentemente dos números de telefone regulares, o endereço na Internet é principalmente endereços IP dinâmicos. Para resolver isso, você deve manter o registro de onde todos estão. Isso pode ser feito de várias maneiras usando XMPP, SIP, protocolos personalizados, etc., Mas tudo se resume a que qualquer pessoa pronta para receber uma chamada de chamadas com um servidor de uma maneira ou de outra e permita ao servidor saber como entrar em contato com esse colega (implícito para a entrega adicional de oferta/convite/sdp etc.).

Pense nisso como uma página branca totalmente dinâmica. Isso geralmente é feito em intervalos cronometrados para manter os firewalls ou similares abertos para o servidor de sinalização para notificar o cliente se alguém quiser se comunicar com eles. Então, esta é a primeira peça que você precisa construir em cima disso.

Em seguida, você provavelmente deseja acompanhar todos os dispositivos para um usuário em particular e notificá -los em todos os dispositivos se houver uma chamada. Usando Sinch, cuidamos desta parte para você.

Servidor de atordoamento

Depois que o servidor de sinalização localizou um dispositivo e envia uma oferta, você precisa de um servidor de atordoamento. O servidor de atordoamento facilitará para determinar seu endereço IP externo, bem como se os dois (ou mais) dispositivos pudessem conversar diretamente entre si. Sinch vai cuidar disso para você também.

Servidor de retransmissão de mídia (Turn Server)

Se uma sessão ponto a ponto não for possível (nossos próprios dados sugerem que isso representa cerca de 25% das sessões), você precisará de um servidor de turno. O servidor Turn mudará basicamente os bits para você através de orifícios abertos no firewall entre os dois clientes. Por que isso acontece? O mais comum são os firewalls assimétricos e a possibilidade de perfurar buracos em diferentes portos em firewalls.

OK, mas por que não’Eu eu mesmo configurei isso?

Bem, você poderia. Isso pode ser um pouco exagerado, e mais uma competência em sua equipe de operações será necessária. Seus servidores de sua vez e atordoamento provavelmente estarão fortemente abaixo utilizados e caros. E aqui é onde entra economia escalável. Como Sinch está fazendo mais de um bilhão de minutos por ano, nossos preços para transferência de dados são mais baratos do que a maioria das empresas pode obter.

Você provavelmente quer ter uma rede distribuída também. Se você, por exemplo, tenha seu servidor de turno no U.S. E as chamadas estão acontecendo entre clientes na Europa, você adicionará latência apenas porque todo o tráfego precisa atravessar o oceano. Uma boa regra geral é que cerca de 250ms é perceptível em uma conversa (mais informações sobre qualidade de serviço aqui). Portanto, sem adicionar qualquer latência de rede ao cliente e tempo de processamento para codificar os dados, você é basicamente garantido para ter muita latência entre os clientes.

É apenas sobre back -end?

Isto’não é apenas sobre o back -end. No Sinch, temos uma vasta experiência de comunicações em tempo real, e estamos personalizando e configurando nosso SDK WebRTC para trabalhar melhor em todos os dispositivos e em diferentes condições de redes. Alguns exemplos são a implementação do opus adaptativo, que ajustará a qualidade da gravação com base em métricas de qualidade do nosso tráfego. Também sabemos quais codecs usar em circunstâncias específicas e quais selecionar para minimizar a transcodificação e a latência em todo o mundo.

Publicado em Dzone com permissão de Christian Jensen . Veja o artigo original aqui.

Opiniões expressas pelos colaboradores da DZone são suas próprias.

O WebRTC sem nenhum servidor nem mesmo é possível um servidor de sinalização?

Estou tentando configurar um plug -in Cordova para iOS, que implementa as funções do WebRTC sem usar nenhum servidor e vai ser usado apenas em uma rede local. Eu sei que existe esse plugin, que parece promissor, mas tenho alguns problemas com ele. Meu plano não é usar um TRUN, atordoamento ou qualquer tipo de servidor de sinalização. Talvez você pense agora: “Ok isso não é possível. Nenhuma sinalização é igual a nenhuma conexão.“Mas deixe -me explicar primeiro. Como apontado aqui e aqui é possível evitar o uso de um servidor de munição, atordoamento ou gelo. Eu acho que essa é uma boa maneira de iniciar meu projeto, mas ainda há uma pergunta em aberto. Como os dispositivos devem se encontrar se não houver nenhum tipo de sinalização (no exemplo que eles usam um nó.servidor js)? No momento, estou brincando com a ideia de um código QR que contém todas as informações necessárias. No final, deve parecer assim (os Arrwos pretos são mais importantes): a idéia é que todos que entram em uma sala precisam escanear um código QR no RP e depois o dispositivo conhece o IP, porta, etc. do RP e uma conexão webrtc com um datacachannel será estabelecida. Estou procurando uma resposta há dias, mas devido ao fato (ou pelo menos uma das razões) que o WebRTC nem sequer é suportado no iOS nativo, não há muitos exemplos do WebRTC por aí que trabalham no iOS e ninguém para uma rede local. Então, minha pergunta é: estou da maneira certa ou isso não é possível? (Não encontrei nenhum exemplo para isso em qualquer lugar, mas se eu colocar todas as postagens que li juntas, acho que deveria ser possível.)

Questionado em 10 de agosto de 2017 às 12:38

3.257 3 3 crachás de ouro 11 11 crachás de prata 19 19 crachás de bronze

Não importa como você resolve a descoberta, mas para estabelecer uma conexão WebRTC, você precisa obter a oferta e responder a mensagens entre os colegas de alguma forma. Essas mensagens contêm automaticamente os candidatos a gelo se você esperar a reunião de gelo para terminar primeiro. Veja Stackoverflow.com/a/29056385/918910.

Webrtc: um exemplo de trabalho

Recentemente, tive que usar o WebRTC para um projeto simples. A tecnologia em si tem muitas vantagens e está sendo desenvolvida como um padrão aberto, sem a necessidade de nenhum plugins. No entanto, eu era bastante novo no WebRTC e tive alguns problemas para entender os conceitos básicos, além de criar uma solução de trabalho. Existem muitos tutoriais disponíveis (como este, o que inspirou minha solução). Mas a maioria deles é incompleta, obsoleta ou me forçou a usar alguns serviços de terceiros (e.g. Google Firebase), que apenas tornou todo o processo mais complicado de configurar e mais difícil de entender.

Decidi reunir as informações de todos esses recursos e criar um exemplo simples e funcionando de um aplicativo WebRTC. Não requer serviços de terceiros, a menos que você queira usá-lo em uma rede pública (nesse caso, possuir um servidor realmente ajudaria). Espero que isso forneça um bom ponto de partida para todos que estão interessados ​​em explorar o webrtc.

Este não será um tutorial completo da tecnologia WebRTC. Você pode encontrar muitos tutoriais e explicações detalhadas em toda a Internet, por exemplo, aqui. Você também pode verificar a API do WebRTC se quiser mais informações. Este post vai apenas mostrar um possível exemplo de trabalho de webrtc e explicar como funciona.

Descrição geral

O código -fonte completo deste exemplo está disponível no GitHub. O programa consiste em três partes:

• Aplicativo da Web
• servidor de sinalização
• Turn Server

O Aplicativo da Web é muito simples: um arquivo html e um arquivo javascript (mais uma dependência: soquete.io.JS, que está incluído no repositório). Ele foi projetado para funcionar com apenas dois clientes (dois navegadores da web ou duas guias do mesmo navegador). Depois de abri -lo no seu navegador (testado no Firefox 74), ele solicitará permissão para usar sua câmera e microfone. Depois que a permissão for concedida, o vídeo e o áudio de cada uma das guias serão transmitidos para o outro.

Nota: Você pode ter alguns problemas se tentar acessar a mesma câmera de ambas as guias. No meu teste, eu’Usei dois dispositivos durante o teste na minha máquina (uma câmera de laptop embutida e uma webcam USB).

O servidor de sinalização é usado pelos aplicativos WebRTC para trocar informações necessárias para criar uma conexão direta entre pares. Você pode escolher qualquer tecnologia que desejar para isso. Este exemplo usa websockets (Python-Socketio no back -end e soquete.io-client no frontend).

O VEZ O servidor é necessário se você quiser usar este exemplo em uma rede pública. O processo é descrito mais adiante neste post. Para testes de rede local, você não precisará.

Sinalização

O servidor de sinalização está escrito no Python3 e se parece com o seguinte:

De Aiohttp Importar Web Importar Socketio Room = 'Room' SiO = Socketio.Assyncserver (cors_allowed_origins = '*') app = web.APLICAÇÃO () SIO.Anexar (App) @sio.Evento Async Def Connect (Sid, Environ): Print ('Connected', Sid) Aguarda Sio.emit ('pronto', quarto = quarto, skip_sid = sid) sio.Enter_room (Sid, quarto) @sio.Evento def Desconect (SID): SIO.leave_room (sid, quarto) impressão ('desconectado', sid) @sio.Evento Async Def Data (SID, Data): Print ('Mensagem de <>: <>'.formato (sid, dados)) aguarda sio.emit ('dados', dados, sala = sala, skip_sid = sid) se __name__ == '__main__': web.run_app (app, porta = 9999)

Cada cliente se junta à mesma sala. Antes de entrar na sala, um preparar O evento é enviado a todos os clientes atualmente na sala. Isso significa que a primeira conexão do WebSocket não receberá nenhuma mensagem (a sala está vazia), mas quando a segunda conexão for estabelecida, a primeira receberá um preparar evento, sinalizando que existem pelo menos dois clientes na sala e a conexão WebRTC pode começar. Fora isso, este servidor encaminhará quaisquer dados (dados evento) que é enviado por um webSocket para o outro.

A configuração é bastante simples:

Sinalização de CD PIP Instale o servidor Python-Socketio Python aiohttp-Socketio.py

Isso iniciará o servidor de sinalização em LocalHost: 9999.

Webrtc

O processo simplificado de usar o WebRTC neste exemplo se parece com o seguinte:

• Ambos os clientes obtêm seus fluxos de mídia local
• Depois que o fluxo é obtido, cada cliente se conecta ao servidor de sinalização
• Uma vez que o segundo cliente se conecta, o primeiro recebe um preparar evento, o que significa que a conexão WebRTC pode ser negociada
• O primeiro cliente cria um objeto RTCPeerConnection e envia uma oferta ao segundo cliente
• O segundo cliente recebe a oferta, cria um objeto RTCPeerConnection e envia uma resposta
• Mais informações também são trocadas, como candidatos a gelo
• Depois que a conexão é negociada, um retorno de chamada para receber um fluxo remoto é chamado e esse fluxo é usado como uma fonte do vídeo elemento.

Se você deseja executar este exemplo no localhost, o servidor de sinalização e o aplicativo da web é tudo o que você precisa. A parte principal do arquivo html é um único elemento de vídeo (que a fonte será definida posteriormente pelo script):

JavaScript parte é um pouco mais complicada, e eu’eu explicará passo a passo. Primeiro, existem as variáveis ​​de configuração:

// Variáveis ​​de configuração const Signaling_server_url = 'http: // localhost: 9999'; const pc_config = <>;

Para localhost, Pc_config pode ficar vazio e Signaling_server_url deve apontar para o servidor de sinalização que você’Comecei na etapa anterior.

Em seguida, temos os métodos de sinalização:

Deixe soquete = io (Signaling_server_url, < autoConnect: false >); soquete.on ('dados', (dados) => < console.log('Data received: ',data); handleSignalingData(data); >); soquete.on ('pronto', () => < console.log('Ready'); createPeerConnection(); sendOffer(); >); Deixe sendData = (dados) => < socket.emit('data', data); >;

Neste exemplo, queremos nos conectar ao servidor de sinalização somente depois de obter o fluxo de mídia local, então precisamos definir . Fora isso, temos um SendData método que emite um dados evento, e nós reagimos ao dados Evento ao lidar com as informações recebidas adequadamente (mais sobre isso mais tarde). Além disso, recebendo um preparar Evento significa que ambos os clientes obtiveram seus fluxos de mídia local e se conectaram ao servidor de sinalização, para que possamos criar uma conexão do nosso lado e negociar uma oferta com o lado remoto.

Deixe PC; Deixe o local do local; Let RemoteSTereameLement = Documento.QuerySelector ('#remotestream');

Seja getLocalStream = () => < navigator.mediaDevices.getUserMedia(< audio: true, video: true >) .então ((stream) => < console.log('Stream found'); localStream = stream; // Connect after making sure that local stream is availble socket.connect(); >) .captura (erro => < console.error('Stream not found: ', error); >); >

Deixe CreatePeeConnection = () => < try < pc = new RTCPeerConnection(PC_CONFIG); pc.onicecandidate = onIceCandidate; pc.onaddstream = onAddStream; pc.addStream(localStream); console.log('PeerConnection created'); >captura (erro) < console.error('PeerConnection failed: ', error); >>;

Deixe sendOffer = () => < console.log('Send offer'); pc.createOffer().then( setAndSendLocalDescription, (error) => < console.error('Send offer failed: ', error); >); >; Deixe sendanswer = () => < console.log('Send answer'); pc.createAnswer().then( setAndSendLocalDescription, (error) => < console.error('Send answer failed: ', error); >); >; Deixe setandSendlocaldScription = (sessionDescription) => < pc.setLocalDescription(sessionDescription); console.log('Local description set'); sendData(sessionDescription); >;

deixe onicecandidate = (event) => < if (event.candidate) < console.log('ICE candidate'); sendData(< type: 'candidate', candidate: event.candidate >); >>; deixe onaddStream = (event) => < console.log('Add stream'); remoteStreamElement.srcObject = event.stream; >;

Deixe HandlesignalingData = (dados) => < switch (data.type) < case 'offer': createPeerConnection(); pc.setRemoteDescription(new RTCSessionDescription(data)); sendAnswer(); break; case 'answer': pc.setRemoteDescription(new RTCSessionDescription(data)); break; case 'candidate': pc.addIceCandidate(new RTCIceCandidate(data.candidate)); break; >>;

// Iniciar a conexão getLocalStream ();

cd web python -m http.Servidor 7000

sudo apt install coturn turnserver -a -o -v -n - -no -dtls - -tls -u nome de usuário: credencial -r realmname

const turn_server_url = ': 3478'; const turn_server_username = 'nome de usuário'; const turn_server_credential = 'credencial'; const pc_config = < iceServers: [ < urls: 'turn:' + TURN_SERVER_URL + '?transport=tcp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >, < urls: 'turn:' + TURN_SERVER_URL + '?transport=udp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >]>;