Demonstração do princípio de estabelecimento de conexão webRTC

Este artigo é publicado simultaneamente na conta pública do WeChat nashaofu na estrada , bem-vindo para prestar atenção.

Pessoas preguiçosas são sempre pressionadas pelo mundo a fazer coisas, sofrem de "ter que" na passividade e desfrutam do conforto da auto-ilusão no vazio. Faz muito tempo que não escrevo nada. As pessoas são sempre preguiçosas. Toda vez que termino de escrever o código, não quero escrever um artigo. Sempre tenho medo de resumir. Acho muito trabalhoso. Demorou me alguns dias para resolver o código e escrever isso Clique no texto. Este artigo

descreve principalmente o processo de estabelecimento do webRTC e inclui um exemplo de demonstração, o endereço de visualização online https://nashaofu.github.io/webrtc-

demo/, o código-fonte do Github warehouse é: github.com/nashaofu/we…  . E este exemplo de demonstração também foi selecionado para o Entusiasta Semanal de Ciência e Tecnologia do Professor Ruan Yifeng (No. 115) www.ruanyifeng.com/blog/2020/0…

Este exemplo recomenda clonar o warehouse e depois executá-lo localmente.A versão online só pode demonstrar a página que estabelece uma conexão sem um servidor. A seguir está uma explicação na forma de um armazém clone.

1. Execute git clone  github.com/nashaofu/we…

2. Entre na pasta do projeto e gere os arquivos relacionados ao certificado SSL (para garantir que a LAN possa ser acessada normalmente)

mkdir ssl

cd ssl

openssl genrsa -des3 -passout pass:x -out server.pass.key 2048

# writing RSA key
openssl rsa -passin pass:x -in server.pass.key -out server.key

rm server.pass.key

openssl req -new -key server.key -out server.csr

openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt

3. Instale as dependências e inicie o serviço

# 安装依赖
yarn
# 启动服务
yarn start

4. Abra o endereço da saída do terminal no navegador. Se você encontrar problemas de segurança de certificado, consulte https://blog.caojun.xyz/posts/macos_trust_ssl/

5. index.html é um exemplo de handshake usando texto de cópia, http.html é um exemplo de uso de http para estabelecer uma conexão, socket.html é um exemplo de demonstração do estabelecimento de uma conexão por soquete, dataChannel.html é um exemplo de uso webRTC para transmitir conteúdo de texto
webRTC Processo de estabelecimento de conexão
 

A troca de oferta e iceCandidata geralmente é trocada por meio de sockets, o objetivo é facilitar a troca de informações aos participantes após a mudança da situação da rede da outra parte. Na verdade, esse processo de troca também pode ser usado de qualquer outra forma, desde que informações podem ser trocadas entre si. Por exemplo, depois que A cria uma sessão, ele envia sua oferta e iceCandidata para B por e-mail, e B define essas informações em sua sessão e, em seguida, envia sua resposta e iceCandidata para A, desde que o status da rede não mude durante isso período, você pode falar normalmente. Em relação ao webRTC, este artigo ( juejin.cn/post/684490… ) é muito bom. A descrição do processo de conexão webRTC no MDN é a seguinte
 

A seguir, falaremos principalmente sobre o processo de estabelecer uma conexão por cópia manual em index.html. Desde que você entenda esse processo, poderá entender basicamente outros métodos. 1. Entre na página e escolha criar uma sessão

2. Copie as informações geradas para a pessoa que deseja convidar. O conteúdo gerado aqui é o objeto composto por offer e icecandidate gerado por createOffer e o conteúdo após a codificação base64.

function tokenEncode(data) {
  // data为：｛ offer: string, candidate: object[] ｝
  // candidata为：
  // {
  //    sdpMLineIndex: number,
  //    sdpMid: string,
  //    candidate: string
  // }
  return btoa(JSON.stringify(data))
}

3. O convidado abre a página da web e escolhe entrar na sessão , em seguida, preenche as informações enviadas pelo convidador na caixa de entrada, clica em enviar após inserir, a oferta e o icecandidate serão decodificados de acordo com o conteúdo enviado e, em seguida, o answer e icecandidate serão gerados na área da codificação base64 da Figura 2 e enviarão a codificação base64 para o solicitante
 

4. Depois de receber o recibo de answer e icecandidate, o responsável pelo convite preenche a caixa de entrada do conteúdo do recibo, clica em enviar e, em seguida, decodifica a resposta e o icecandidate. Então, se tudo correr bem, você pode fazer uma chamada de vídeo.

Problema de impenetrabilidade da rede

De um modo geral, se confiarmos apenas nas etapas acima para realizar a conexão P2P da LAN e não pudermos penetrar no gateway, o motivo específico é principalmente por causa do NAT e dos firewalls. Por esse motivo, o webRTC possui STUN (Session Traversal Utilities for NAT) e TURN

(Traversal Using Relays around NAT) Dois tipos de servidores, esses dois são usados ​​principalmente como servidores de retransmissão quando a conexão P2P não está disponível, portanto, ao usar o servidor de retransmissão, o tráfego passará pelo servidor de retransmissão em vez da conexão P2P direta. Portanto, no exemplo, uso um servidor de retransmissão gratuito para garantir que possa me conectar à rede.
 

  const pc = new RTCPeerConnection({
    iceServers: [ // 信令服务器列表
      {
        urls: 'stun:stun.l.google.com:19302'
      }
    ]
  })

Aplicações do webRTC

Podemos usar webRTC para construir uma sala de bate-papo, e também pode ser usado para transmissão ao vivo (tráfego de graça) e assim por diante. Também vi uma ideia que usa elétron para fazer software, e um servidor de sinalização webRTC também é construído em o cliente (oferta de troca e icecandidate), portanto, se houver clientes suficientes instalados, podemos formar uma enorme rede P2P e fazer muitas coisas. Essa coisa descentralizada ainda pode ter um grande potencial no futuro.

O servidor que o webRTC estabelece uma conexão para troca de ofertas e candidatos ao gelo é geralmente chamado de servidor de sinalização. O primeiro servidor que estabelece uma rede P2P é geralmente chamado de servidor de criação, e outros clientes também servirão como servidores para acessar a rede ao mesmo tempo.

Demonstração do princípio original  de estabelecimento de conexão webRTC - Nuggets

 

★O cartão de visita no final do artigo pode receber gratuitamente materiais de aprendizagem de desenvolvimento de áudio e vídeo, incluindo (FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, srs) e roteiros de aprendizagem de áudio e vídeo, etc.

Veja abaixo!