O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Firebase + WebRTC Codelab

1. Introdução

Neste codelab, você aprenderá a construir um aplicativo de chat de vídeo simples usando a API WebRTC em seu navegador e o Cloud Firestore para sinalização. O aplicativo é denominado FirebaseRTC e funciona como um exemplo simples que lhe ensinará os fundamentos da construção de aplicativos habilitados para WebRTC.

O que você aprenderá

  • Iniciar uma videochamada em um aplicativo da web usando WebRTC
  • Sinalizar para a parte remota usando o Cloud Firestore

O que você precisará

Antes de iniciar este codelab, certifique-se de ter instalado:

  • npm que normalmente vem com Node.js - Node LTS é recomendado

2. Crie e configure um projeto Firebase

Crie um projeto Firebase

  1. No console Firebase , clique em Adicionar projeto, então nomear o Firebase projeto FirebaseRTC.

Lembre-se do ID do projeto para seu projeto Firebase.

  1. Clique em Criar projeto.

O aplicativo que você vai construir usa dois serviços Firebase disponíveis na web:

  • Cloud Firestore para salvar dados estruturados na nuvem e receber notificação instantânea quando os dados forem atualizados
  • Firebase Hosting para hospedar e servir seus ativos estáticos

Para este codelab específico, você já configurou o Firebase Hosting no projeto que clonará. No entanto, para o Cloud Firestore, orientaremos você na configuração e ativação dos serviços usando o console do Firebase.

Ativar Cloud Firestore

O aplicativo usa o Cloud Firestore para salvar as mensagens de bate-papo e receber novas mensagens de bate-papo.

Você precisará habilitar o Cloud Firestore:

  1. Na seção Desenvolver do menu do Firebase console, clique em Banco de dados.
  2. Clique em Criar banco de dados no painel de Nuvem Firestore.
  3. Selecione a opção Iniciar o modo de teste em, em seguida, clique em Ativar depois de ler o aviso sobre as regras de segurança.

O modo de teste garante que você possa gravar livremente no banco de dados durante o desenvolvimento. Vamos tornar nosso banco de dados mais seguro posteriormente neste codelab.

3. Obtenha o código de amostra

Clone o repositório GitHub da linha de comando:

git clone https://github.com/webrtc/FirebaseRTC

O código de exemplo deveria ter sido clonados no FirebaseRTC diretório. Certifique-se de que sua linha de comando seja executada a partir deste diretório a partir de agora:

cd FirebaseRTC

Importe o aplicativo inicial

Abra os arquivos em FirebaseRTC no seu editor e alterá-las de acordo com as instruções abaixo. Este diretório contém o código inicial para o codelab que consiste em um aplicativo WebRTC ainda não funcional. Vamos torná-lo funcional em todo este codelab.

4. Instale a interface de linha de comando do Firebase

A Firebase Command Line Interface (CLI) permite que você veicule seu aplicativo da web localmente e implante-o no Firebase Hosting.

  1. Instalar o CLI executando o seguinte comando npm: sh npm -g install firebase-tools
  1. Verifique se o CLI foi instalado corretamente executando o seguinte comando: sh firebase --version

Certifique-se de que a versão da Firebase CLI é v6.7.1 ou posterior.

  1. Autorizar a Firebase CLI executando o seguinte comando: sh firebase login

Você configurou o modelo de aplicativo da web para obter a configuração do seu aplicativo para Firebase Hosting do diretório local e dos arquivos do seu aplicativo. Mas, para fazer isso, você precisa associar seu aplicativo ao projeto Firebase.

  1. Associar a sua aplicação com o seu projeto Firebase executando o seguinte comando: sh firebase use --add

  2. Quando solicitado, selecione o ID do projeto e atribua um alias ao projeto do Firebase.

Um alias é útil se você tiver vários ambientes (produção, teste, etc). No entanto, para este codelab, vamos apenas usar o alias default .

  1. Siga as instruções restantes em sua linha de comando.

5. Execute o servidor local

Você está pronto para começar a trabalhar em nosso aplicativo! Vamos executar o aplicativo localmente!

  1. Execute o seguinte comando Firebase CLI: sh firebase serve --only hosting

  2. Sua linha de comando deve exibir a seguinte resposta: hosting: Local server: http://localhost:5000

Estamos usando o emulador do Firebase Hosting para servir nosso aplicativo localmente. O aplicativo da web agora deve estar disponível em http: // localhost: 5000.

  1. Abra seu aplicativo em http: // localhost: 5000.

Você deve ver sua cópia do FirebaseRTC que foi conectada ao seu projeto do Firebase.

O aplicativo foi conectado automaticamente ao seu projeto Firebase.

6. Criação de uma nova sala

Neste aplicativo, cada sessão de chat de vídeo é chamada de sala. Um usuário pode criar uma nova sala clicando em um botão em seu aplicativo. Isso irá gerar uma ID que a parte remota pode usar para entrar na mesma sala. O ID é usado como a chave no Cloud Firestore para cada quarto.

Cada quarto conterá os RTCSessionDescriptions tanto para a oferta ea resposta, bem como duas coleções separadas com os candidatos ICE de cada partido.

Sua primeira tarefa é implementar o código que falta para criar uma nova sala com a oferta inicial do chamador. Abrir public/app.js e encontrar o comentário // Add code for creating a room here e adicione o seguinte código:

const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`

A primeira linha cria um RTCSessionDescription que irá representar a oferta do chamador. Isso é então definido como a descrição local e, finalmente, gravado no novo objeto de sala no Cloud Firestore.

A seguir, ouviremos as alterações no banco de dados e detectaremos quando uma resposta do receptor foi adicionada.

roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});

Isto irá esperar até que o receptor escreve o RTCSessionDescription para a resposta, e defina-o como a descrição remoto do chamador RTCPeerConnection .

7. Entrando em uma sala

A próxima etapa é implementar a lógica para ingressar em uma sala existente. O usuário faz isso clicando no botão sala Participe e introduzir o ID para o quarto para se juntar. Sua tarefa aqui é implementar a criação do RTCSessionDescription para a resposta e atualizar o quarto no banco de dados em conformidade.

const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);

No código acima, nós começamos extraindo a oferta do chamador e criando uma RTCSessionDescription que estabelecemos como a descrição remoto. Em seguida, criamos a resposta, definimos como a descrição local e atualizamos o banco de dados. A atualização do banco de dados irá desencadear a onSnapshot callback no lado do chamador, que por sua vez irá definir a descrição remoto com base na resposta do receptor. Isso completa a troca da RTCSessionDescription objetos entre o chamador e o receptor.

8. Colete candidatos ICE

Antes que o chamador e o receptor possam se conectar, eles também precisam trocar candidatos ICE que informam ao WebRTC como se conectar ao par remoto. Sua próxima tarefa é implementar o código que escuta os candidatos ICE e os adiciona a uma coleção no banco de dados. Encontrar a função collectIceCandidates e adicione o código a seguir:

async function collectIceCandidates(roomRef, peerConnection,
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event -> {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot -> {
        snapshot.docChanges().forEach(change -> {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}

Essa função faz duas coisas. Ele coleta candidatos gelo da API WebRTC e adiciona-los para o banco de dados e escutas para candidatos gelo adicionado a partir do peer remoto e os adiciona à sua RTCPeerConnection instância. É importante, ao ouvir as alterações do banco de dados, filtrar qualquer coisa que não seja uma nova adição, uma vez que, de outra forma, teríamos adicionado o mesmo conjunto de candidatos ICE repetidamente.

9. Conclusão

Neste codelab, você aprendeu como implementar a sinalização para WebRTC usando o Cloud Firestore, bem como usá-la para criar um aplicativo de chat de vídeo simples.

Para saber mais, visite os seguintes recursos:

  1. Código-fonte FirebaseRTC
  2. Amostras WebRTC
  3. Cloud Firestore