1

Já pesquisei bastante e a maioria do conteúdo bem explicado que encontrei é em inglês, especialmente em vídeos (não tenho conhecimento suficiente pra entender um vídeo em inglês). Preciso criar uma comunicação WebRTC com vídeo e texto, mas estou bem perdido quanto a isso. Ou o conteúdo encontrado é em inglês, ou ele é apenas uma pequena introdução sobre o que é webRTC. Podem me orientar? Só encontrei um curso em português que parece ser muito bom sobre o tema, mas é pago e não tenho dinheiro no momento.

1 Resposta 1

1

O WebRTC é uma API muito grande para ser totalmente explicada numa resposta, mas tentarei dar aqui uma breve introdução.

O que é o WebRTC?

É uma API que vem embutida nos navegadores e permite trocar informação (geralmente áudio e vídeo, mas pode ser qualquer dado também) entre múltiplas pontas (peers) sem usar um servidor central. Para isso, a informação trafega entre servidores STUN/TURN (não entrarei em detalhes sobre isto aqui).

Esta proposta de permuta de dados diretamente entre as pontas permite que pessoas ou empresas sem muitos recursos ofereçam serviços relativamente complexos, como uma videochamada, sem ter que sustentar servidores potentes para intermediar as comunicações.

A principal lacuna do WebRTC é o fato de que duas pontas precisam ser "externamente" coordenadas a se identificarem. Ou seja, para a ponta A se comunicar com a ponta B, não existe a necessidade de servidores centralizados. Mas para que as duas se encontrem e possam começar a se comunicar, sim. Este procedimento de uma ponta encontrar a outra é chamado de sinalização. Esta sinalização consiste na permuta de uma "ficha técnica" de cada ponta, que contém informações referentes aos dados que elas pretendem trocar e as possíveis rotas que elas podem usar para cambiar estes dados.

Há múltiplas abordagens possíveis para que a sinalização seja realizada, por aí se vê diversos tutoriais. Pessoalmente, tenho usado Firebase para tal fim, mas não abordarei a sinalização aqui porque ela é uma etapa bastante complexa e pode ser feita de inúmeras maneiras diferentes.

Como iniciar uma conexão?

Como eu já mencionei, a API vem embutida nos navegadores (Internet Explorer é a exceção), então não há necessidade de importar nada. Numa conexão RTC, importa quem iniciou a conexão e quem recebeu o pedido. Nesta resposta, chamarei de sender a ponta que iniciou o pedido de conexão e de receiver a ponta que aceitou este pedido.

Assumirei que você saiba como obter a mídia do usuário e tenha guardado a stream de áudio e vídeo da câmera de cada ponta na variável localStream.

Do lado do sender

Vamos criar uma conexão e uma oferta. Uma oferta é aquela "ficha técnica" que eu havia mencionado antes. Esta oferta pode receber configurações, que estão detalhadas aqui.

const conexaoConfig = {
    iceServers: [
        {
            "urls": ["stun:stun.l.google.com:19302",
                "stun:stun1.l.google.com:19302",
                "stun:stun2.l.google.com:19302"]
        }
    ]
};

let conexao = new RTCPeerConnection(conexaoConfig);

Já podemos inserir nossa stream de áudio e vídeo da webcam no próprio objeto da conexão:

// sendo localStream a stream da webcam local:
for (const audioTrack of localStream.getAudioTracks())
    conexao.addTrack(audioTrack, localStream);

for (const videoTrack of localStream.getVideoTracks())
    conexao.addTrack(videoTrack, localStream);

Podem ser inseridas diversas tracks de áudio e vídeo, mas geralmente queremos uma só de cada. Agora, vamos criar uma oferta:

// estou afirmando que, na minha oferta de conexão, quero receber áudio e vídeo
offer = await conexao.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
});

Temos nossa oferta criada, mas ela ainda não está valendo. Antes de "aplicar" a oferta à conexão que criamos na primeira linha, precisamos nos preparar para receber candidatos (rotas de servidores STUN/TURN).

conexao.onicegatheringstatechange = async function () {
        // terminou de encontrar candidatos
        if (conexao.iceGatheringState === 'complete') {
            // os candidatos foram embutidos na local description
            offer = conexao.localDescription.toJSON();
            // enviar a offer
        }
    }

E agora podemos definir a nossa offer como a descrição local da conexão:

await conexao.setLocalDescription(offer);

Repare que o evento onicegatheringstatechange vai disparar toda vez que o estado da busca por candidatos mudar. No caso, quando ele for concluído, a propriedade conexao.localDescription terá sido atualizada e já estará incluindo informações sobre os candidatos que encontrou.

São encontrados vários candidatos e a conexão não precisa esperar por todos eles para começar. Na verdade, a API aceita que novos candidatos sejam adicionados dinamicamente e gerencia qual deles proporciona uma conexão mais veloz automaticamente. Esta técnica é chamada de trickle ice, mas não a adotarei aqui porque é mais complexa.

Agora que vem a parte difícil. A sinalização. Você precisa garantir que a offer ou a conexao.localDescription.toJson() seja entregue para a outra ponta. Use o meio que quiser para fazer esta entrega, há realmente muitas formas de se fazer isso e não vou me ater a explicá-las aqui.

Do lado do receiver

O receiver também deverá criar seu objeto de conexão. Supondo que ele tenha em mãos a variável offer, que é exatamente o texto enviado pelo sender agora há pouco, isto é simples:

conexao = new RTCPeerConnection(conexaoConfig);
await conexao.setRemoteDescription(offer);

Ao definir a descrição remota, sabemos quais os candidatos teremos à disposição, bem como os pedidos que o sender nos fez. O receiver não produz uma offer, mas sim uma answer, que é análoga. Antes de criá-la, temos que adicionar nossas tracks de áudio e vídeo exatamente do mesmo jeito que fizemos no lado do sender. Também temos que construir o event handler para a busca de candidatos:

// adicionar as tracks de áudio e vídeo do mesmo jeito que fizemos
// no lado do sender

let answer;
conexao.onicegatheringstatechange = async function () {
    // terminou de encontrar os candidatos
    if (conexao.iceGatheringState === 'complete') {
        answer = conexao.localDescription.toJSON();
        // enviar a answer
    }
}

Já podemos criar nossa answer e aplicá-la:

let answer = await conexao.createAnswer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
});

await conexao.setLocalDescription(answer);

Depois que o evento disparar e a busca por candidatos estiver findada, basta enviar a answer do receiver de volta para o sender, do mesmo jeito que o contrário foi feito.

Antes de finalizar

A nossa conexão está quase pronta. Vamos adicionar alguns event handlers tanto no lado do sender quanto do receiver antes de terminá-la.

// mudou o estado da conexão
conexao.onconnectionstatechange = e => {
    console.log('estado da conexão:', conexao.connectionState);

    if (conexao.connectionState === 'connected')
        // conectado!
}

// foi detectada alguma track de mídia oriunda da outra ponta
conexao.ontrack = e => {
    console.log('track recebida:', e);
    let video = document.createElement('video');
    video.srcObject = e.streams[0]; // seleciona a primeira stream (geralmente só tem uma)
    document.querySelector('body').appendChild(video);
    video.play();
}

Finalizando

Agora sim, basta que o sender atualize a sua descrição remota (a descrição do receiver) para arrematar a conexão:

// do lado do sender:
await conexao.setRemoteDescription(answer);
// sendo answer a resposta obtida do receiver

Depois disso, cada ponta deverá ter a mídia uma da outra. Há alguns upgrades que esta implementação pode sofrer:

  • Do jeito que mostrei, o código ficou diferente para o sender e para o receiver. Na maioria das aplicações, é obrigatório que cada ponta tenha a capacidade de ser tanto o sender quanto o receiver e seja capaz de julgar qual papel adotar dependendo de cada situação.
  • Nos meus exemplos, não abordei nenhum tratamento de erros. Esta etapa é extremamente necessária e você deveria consultar a documentação da MDN, que creio ser a mais completa sobre WebRTC.
  • Se você deseja alto desempenho para sua aplicação, você deveria considerar implementar o trickle ice. Dependendo do quão bem feita for sua sinalização, isto não deve dar tanto trabalho.
  • Mencionaste que precisa da permuta de textos entre as pontas. Para isso existem os data channels, que não são mais difíceis de implementar do que a videochamada.

Bom, espero que este texto tenha sido útil para orientar pessoas iniciantes em WebRTC. Por favor, se alguém tiver alguma dica ou correção a fazer, comente ou comunique-se comigo e sinta-se livre para editar esta resposta.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .